Parcourir la source

feat(screenshare): add auto pin of latest screen share (#4076)

master
virtuacoplenny il y a 6 ans
Parent
révision
76642b7c4b
Aucun compte lié à l'adresse e-mail de l'auteur

+ 6
- 0
interface_config.js Voir le fichier

195
      */
195
      */
196
     // ANDROID_APP_PACKAGE: 'org.jitsi.meet',
196
     // ANDROID_APP_PACKAGE: 'org.jitsi.meet',
197
 
197
 
198
+    /**
199
+     * A UX mode where the last screen share participant is automatically
200
+     * pinned. Note: this mode is experimental and subject to breakage.
201
+     */
202
+    // AUTO_PIN_LATEST_SCREEN_SHARE: false,
203
+
198
     /**
204
     /**
199
      * Override the behavior of some notifications to remain displayed until
205
      * Override the behavior of some notifications to remain displayed until
200
      * explicitly dismissed through a user action. The value is how long, in
206
      * explicitly dismissed through a user action. The value is how long, in

+ 12
- 0
react/features/video-layout/actionTypes.js Voir le fichier

1
+/**
2
+ * The type of the action which sets the list of known participant IDs which
3
+ * have an active screen share.
4
+ *
5
+ * @returns {{
6
+ *     type: SCREEN_SHARE_PARTICIPANTS_UPDATED,
7
+ *     participantIds: Array<string>
8
+ * }}
9
+ */
10
+export const SCREEN_SHARE_PARTICIPANTS_UPDATED
11
+    = 'SCREEN_SHARE_PARTICIPANTS_UPDATED';
12
+
1
 /**
13
 /**
2
  * The type of the action which enables or disables the feature for showing
14
  * The type of the action which enables or disables the feature for showing
3
  * video thumbnails in a two-axis tile view.
15
  * video thumbnails in a two-axis tile view.

+ 22
- 1
react/features/video-layout/actions.js Voir le fichier

1
 // @flow
1
 // @flow
2
 
2
 
3
-import { SET_TILE_VIEW } from './actionTypes';
3
+import {
4
+    SCREEN_SHARE_PARTICIPANTS_UPDATED,
5
+    SET_TILE_VIEW
6
+} from './actionTypes';
7
+
8
+/**
9
+ * Creates a (redux) action which signals that the list of known participants
10
+ * with screen shares has changed.
11
+ *
12
+ * @param {string} participantIds - The participants which currently have active
13
+ * screen share streams.
14
+ * @returns {{
15
+ *     type: SCREEN_SHARE_PARTICIPANTS_UPDATED,
16
+ *     participantId: string
17
+ * }}
18
+ */
19
+export function setParticipantsWithScreenShare(participantIds: Array<string>) {
20
+    return {
21
+        type: SCREEN_SHARE_PARTICIPANTS_UPDATED,
22
+        participantIds
23
+    };
24
+}
4
 
25
 
5
 /**
26
 /**
6
  * Creates a (redux) action which signals to set the UI layout to be tiled view
27
  * Creates a (redux) action which signals to set the UI layout to be tiled view

+ 19
- 3
react/features/video-layout/reducer.js Voir le fichier

3
 import { ReducerRegistry } from '../base/redux';
3
 import { ReducerRegistry } from '../base/redux';
4
 import { PersistenceRegistry } from '../base/storage';
4
 import { PersistenceRegistry } from '../base/storage';
5
 
5
 
6
-import { SET_TILE_VIEW } from './actionTypes';
6
+import {
7
+    SCREEN_SHARE_PARTICIPANTS_UPDATED,
8
+    SET_TILE_VIEW
9
+} from './actionTypes';
10
+
11
+const DEFAULT_STATE = {
12
+    screenShares: []
13
+};
7
 
14
 
8
 const STORE_NAME = 'features/video-layout';
15
 const STORE_NAME = 'features/video-layout';
9
 
16
 
10
-PersistenceRegistry.register(STORE_NAME);
17
+PersistenceRegistry.register(STORE_NAME, {
18
+    tileViewEnabled: true
19
+});
11
 
20
 
12
-ReducerRegistry.register(STORE_NAME, (state = {}, action) => {
21
+ReducerRegistry.register(STORE_NAME, (state = DEFAULT_STATE, action) => {
13
     switch (action.type) {
22
     switch (action.type) {
23
+    case SCREEN_SHARE_PARTICIPANTS_UPDATED: {
24
+        return {
25
+            ...state,
26
+            screenShares: action.participantIds
27
+        };
28
+    }
29
+
14
     case SET_TILE_VIEW:
30
     case SET_TILE_VIEW:
15
         return {
31
         return {
16
             ...state,
32
             ...state,

+ 88
- 3
react/features/video-layout/subscriber.js Voir le fichier

4
     VIDEO_QUALITY_LEVELS,
4
     VIDEO_QUALITY_LEVELS,
5
     setMaxReceiverVideoQuality
5
     setMaxReceiverVideoQuality
6
 } from '../base/conference';
6
 } from '../base/conference';
7
-import { StateListenerRegistry } from '../base/redux';
7
+import {
8
+    getPinnedParticipant,
9
+    pinParticipant
10
+} from '../base/participants';
11
+import { StateListenerRegistry, equals } from '../base/redux';
8
 import { selectParticipant } from '../large-video';
12
 import { selectParticipant } from '../large-video';
9
 import { shouldDisplayTileView } from './functions';
13
 import { shouldDisplayTileView } from './functions';
14
+import { setParticipantsWithScreenShare } from './actions';
15
+
16
+declare var interfaceConfig: Object;
10
 
17
 
11
 /**
18
 /**
12
  * StateListenerRegistry provides a reliable way of detecting changes to
19
  * StateListenerRegistry provides a reliable way of detecting changes to
14
  */
21
  */
15
 StateListenerRegistry.register(
22
 StateListenerRegistry.register(
16
     /* selector */ state => shouldDisplayTileView(state),
23
     /* selector */ state => shouldDisplayTileView(state),
17
-    /* listener */ (displayTileView, { dispatch }) => {
24
+    /* listener */ (displayTileView, store) => {
25
+        const { dispatch } = store;
26
+
18
         dispatch(selectParticipant());
27
         dispatch(selectParticipant());
19
 
28
 
20
         if (!displayTileView) {
29
         if (!displayTileView) {
21
-            dispatch(setMaxReceiverVideoQuality(VIDEO_QUALITY_LEVELS.HIGH));
30
+            dispatch(
31
+                setMaxReceiverVideoQuality(VIDEO_QUALITY_LEVELS.HIGH));
32
+
33
+            if (typeof interfaceConfig === 'object'
34
+                && interfaceConfig.AUTO_PIN_LATEST_SCREEN_SHARE) {
35
+                _updateAutoPinnedParticipant(store);
36
+            }
37
+        }
38
+    }
39
+);
40
+
41
+/**
42
+ * For auto-pin mode, listen for changes to the known media tracks and look
43
+ * for updates to screen shares.
44
+ */
45
+StateListenerRegistry.register(
46
+    /* selector */ state => state['features/base/tracks'],
47
+    /* listener */ (tracks, store) => {
48
+        if (typeof interfaceConfig !== 'object'
49
+            && !interfaceConfig.AUTO_PIN_LATEST_SCREEN_SHARE) {
50
+            return;
51
+        }
52
+
53
+        const oldScreenSharesOrder
54
+            = store.getState()['features/video-layout'].screenShares || [];
55
+        const knownSharingParticipantIds = tracks.reduce((acc, track) => {
56
+            if (track.mediaType === 'video' && track.videoType === 'desktop') {
57
+                acc.push(track.participantId);
58
+            }
59
+
60
+            return acc;
61
+        }, []);
62
+
63
+        // Filter out any participants which are no longer screen sharing
64
+        // by looping through the known sharing participants and removing any
65
+        // participant IDs which are no longer sharing.
66
+        const newScreenSharesOrder = oldScreenSharesOrder.filter(
67
+            participantId => knownSharingParticipantIds.includes(participantId));
68
+
69
+        // Make sure all new sharing participant get added to the end of the
70
+        // known screen shares.
71
+        knownSharingParticipantIds.forEach(participantId => {
72
+            if (!newScreenSharesOrder.includes(participantId)) {
73
+                newScreenSharesOrder.push(participantId);
74
+            }
75
+        });
76
+
77
+        if (!equals(oldScreenSharesOrder, newScreenSharesOrder)) {
78
+            store.dispatch(
79
+                setParticipantsWithScreenShare(newScreenSharesOrder));
80
+
81
+            _updateAutoPinnedParticipant(store);
22
         }
82
         }
23
     }
83
     }
24
 );
84
 );
85
+
86
+/**
87
+ * Private helper to automatically pin the latest screen share stream or unpin
88
+ * if there are no more screen share streams.
89
+ *
90
+ * @param {Store} store - The redux store.
91
+ * @returns {void}
92
+ */
93
+function _updateAutoPinnedParticipant({ dispatch, getState }) {
94
+    const state = getState();
95
+    const screenShares = state['features/video-layout'].screenShares;
96
+
97
+    if (!screenShares) {
98
+        return;
99
+    }
100
+
101
+    const latestScreenshareParticipantId
102
+        = screenShares[screenShares.length - 1];
103
+
104
+    if (latestScreenshareParticipantId) {
105
+        dispatch(pinParticipant(latestScreenshareParticipantId));
106
+    } else if (getPinnedParticipant(state['features/base/participants'])) {
107
+        dispatch(pinParticipant(null));
108
+    }
109
+}

Chargement…
Annuler
Enregistrer