nextcloud / spreed

🗨️ Nextcloud Talk – chat, video & audio calls for Nextcloud
https://nextcloud.com/talk
GNU Affero General Public License v3.0
1.62k stars 433 forks source link

Improve src/ structure #9402

Open marcoambrosini opened 1 year ago

marcoambrosini commented 1 year ago
Eta Close to stable28 branch-off

What: Move components to root according to vue styleguide (eslint.vuejs.org)

cc @nickvergessen @ShGKme @Antreesy

Antreesy commented 1 year ago

Current structure (directories only). Feel free to copy / edit the comment:

Current structure Proposal №1 @Antreesy
├── assets
├── components
│   ├── AdminSettings
│   ├── AvatarWrapper
│   ├── BreakoutRoomsEditor
│   ├── CallView
│   │   ├── Grid
│   │   └── shared
│   ├── ConversationSettings
│   │   └── Matterbridge
│   ├── LeftSidebar
│   │   ├── ConversationsList
│   │   ├── NewGroupConversation
│   │   │   ├── Confirmation
│   │   │   ├── SetContacts
│   │   │   │   └── ContactSelectionBubble
│   │   │   └── SetConversationName
│   │   └── SearchBox
│   ├── MediaSettings
│   ├── MessagesList
│   │   └── MessagesGroup
│   │       └── Message
│   │           ├── MessageButtonsBar
│   │           └── MessagePart
│   ├── missingMaterialDesignIcons
│   ├── NewMessageForm
│   │   ├── AudioRecorder
│   │   └── SimplePollsEditor
│   ├── PermissionsEditor
│   ├── RightSidebar
│   │   ├── BreakoutRooms
│   │   ├── Participants
│   │   │   ├── CurrentParticipants
│   │   │   ├── ParticipantsList
│   │   │   │   └── Participant
│   │   │   │       └── ParticipantPermissionsEditor
│   │   │   └── ParticipantsSearchResults
│   │   └── SharedItems
│   │       └── SharedItemsBrowser
│   ├── SettingsDialog
│   ├── TopBar
│   └── VolumeIndicator
├── mixins
├── __mocks__
├── patchers
├── router
├── services
├── store
├── types
│   └── vendor
│       └── @nextcloud
├── utils
│   ├── media
│   │   ├── effects
│   │   │   └── virtual-background
│   │   │       └── vendor
│   │   │           ├── models
│   │   │           └── tflite
│   │   └── pipeline
│   └── webrtc
│       ├── analyzers
│       ├── models
│       ├── shims
│       └── simplewebrtc
└── views
Idea:
- extract reusable components and modal dialogs from big feature-driven folders
- prepare for moving to Vue 3.0
- cleanup in services and store
To think about:
- nesting in features
├── assets
├── components
│   ├── __tests__ (integration and e2e)
│   ├── modals
│   │   ├── BreakoutRoomsEditor
│   │   ├── MediaSettings
│   │   ├── ParticipantPermissionsEditor
│   │   ├── PermissionsEditor
│   │   ├── SettingsDialog
│   │   └── ...
│   └── UI (reusable components)
│       ├── AvatarWrapper
│       ├── MaterialDesignIcons
│       ├── NewMessageForm
│       ├── VolumeIndicator
│       └── ...
├── composables (for Vue ^3.0)
├── features
│   ├── AdminSettings
│   ├── CallView
│   │   └── Video...
│   ├── ChatView
│   │   └── Messages...
│   ├── LeftSidebar
│   │   └── Conversations..
│   ├── TopBar
│   └── RightSidebar
│       ├── BreakoutRooms...
│       ├── Participants...
│       ├── SharedItems...
│       └── ...
├── services
│   └── __tests__
├── stores (Pinia)
│   └── __tests__
--------- no changes ------------
├── __mocks__
├── router
├── types
│   └── ...
├── utils
│   ├── media
│   │   └── ...
│   └── webrtc
│       └── ....
└── views
nickvergessen commented 6 months ago

Just assigning you because of your PR

Antreesy commented 6 months ago

Future thoughts after splitting off UIShared components (see PR above):

Feature Candidates: too complex to be dummy, but technically a reusable feature ├── tests │   ├── AvatarWrapper.spec.js │   └── FilePreview.spec.js ├── AvatarWrapper.vue ├── CallButton.vue ├── ConversationAvatarEditor.vue ├── ConversationIcon.vue ├── FilePreview.vue ├── Mention.vue ├── PermissionsEditor.vue └── SetGuestUsername.vue

Rework Candidates: need a minor rework to make them dummies or features ├── LoadingComponent.vue - should be replaced by NcLoadingIcon :wastebasket: ├── LocalAudioControlButton.vue - works with model, can extract some logic from it :construction: ├── LocalVideoControlButton.vue - works with model, can extract some logic from it :construction: ├── Quote.vue - uses store, can extract some logic from it :construction: ├── VideoBackground.vue : not used without AvatarWrapper, rework to VideoPlaceholder :construction: ├── AudioPlayer.vue - uses store, message part ├── DeckCard.vue - message part ├── Location.vue - message part └── Poll.vue - get requests