Use pin and always show flags in importance ordering

element-hq · Jun 7, 2024 · 289c1ef · 289c1ef
1 parent b546a52
commit 289c1ef
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 5 deletions.
diff --git a/src/state/CallViewModel.ts b/src/state/CallViewModel.ts
@@ -131,14 +131,15 @@ export type WindowMode = "normal" | "full screen" | "pip";
  * Sorting bins defining the order in which media tiles appear in the layout.
  */
 enum SortingBin {
-  SelfStart,
+  SelfAlwaysShown,
+  Pinned,
   Presenters,
   Speakers,
   VideoAndAudio,
   Video,
   Audio,
   NoMedia,
-  SelfEnd,
+  SelfNotAlwaysShown,
 }
 
 class UserMedia {
@@ -410,10 +411,23 @@ export class CallViewModel extends ViewModel {
     switchMap((ms) => {
       const bins = ms.map((m) =>
         combineLatest(
-          [m.speaker, m.presenter, m.vm.audioEnabled, m.vm.videoEnabled],
-          (speaker, presenter, audio, video) => {
+          [
+            m.speaker,
+            m.presenter,
+            m.vm.audioEnabled,
+            m.vm.videoEnabled,
+            m.vm instanceof LocalUserMediaViewModel
+              ? m.vm.alwaysShow
+              : of(false),
+            m.vm instanceof RemoteUserMediaViewModel ? m.vm.pin : of(false),
+          ],
+          (speaker, presenter, audio, video, alwaysShow, pin) => {
             let bin: SortingBin;
-            if (m.vm.local) bin = SortingBin.SelfStart;
+            if (m.vm.local)
+              bin = alwaysShow
+                ? SortingBin.SelfAlwaysShown
+                : SortingBin.SelfNotAlwaysShown;
+            else if (pin) bin = SortingBin.Pinned;
             else if (presenter) bin = SortingBin.Presenters;
             else if (speaker) bin = SortingBin.Speakers;
             else if (video)

diff --git a/src/tile/GridTile.tsx b/src/tile/GridTile.tsx
@@ -312,6 +312,7 @@ const RemoteUserMediaTile = forwardRef<
       }
       secondaryButton={
         <button
+          data-enabled={pin}
           aria-label={pin ? t("video_tile.unpin") : t("video_tile.pin")}
           onClick={onChangePin}
         >