Adds playback bar to story viewer

signalapp · May 6, 2022 · 85c8ff7 · 85c8ff7
1 parent 9817946
commit 85c8ff7
Show file tree

Hide file tree

Showing 17 changed files with 291 additions and 125 deletions.
diff --git a/_locales/en/messages.json b/_locales/en/messages.json
@@ -7018,6 +7018,14 @@
       }
     }
   },
+  "StoryViewer__pause": {
+    "message": "Pause",
+    "description": "Aria label for pausing a story"
+  },
+  "StoryViewer__play": {
+    "message": "Play",
+    "description": "Aria label for playing a story"
+  },
   "StoryViewer__reply": {
     "message": "Reply",
     "description": "Button label to reply to a story"
@@ -7026,6 +7034,14 @@
     "message": "Reply to Group",
     "description": "Button label to reply to a group story"
   },
+  "StoryViewer__mute": {
+    "message": "Mute",
+    "description": "Aria label for muting stories"
+  },
+  "StoryViewer__unmute": {
+    "message": "Unmute",
+    "description": "Aria label for unmuting stories"
+  },
   "StoryViewsNRepliesModal__no-replies": {
     "message": "No replies yet",
     "description": "Placeholder text for when there are no replies"

diff --git a/images/icons/v2/pause_solid_20.svg b/images/icons/v2/pause_solid_20.svg
diff --git a/images/icons/v2/play_solid_20.svg b/images/icons/v2/play_solid_20.svg
diff --git a/images/icons/v2/speaker-off-solid-20.svg b/images/icons/v2/speaker-off-solid-20.svg
diff --git a/images/icons/v2/speaker-on-solid-20.svg b/images/icons/v2/speaker-on-solid-20.svg
diff --git a/stylesheets/components/StoryViewer.scss b/stylesheets/components/StoryViewer.scss
@@ -35,24 +35,6 @@
     z-index: $z-index-above-above-base;
   }
 
-  &__more {
-    @include button-reset;
-    height: 24px;
-    position: absolute;
-    right: 80px;
-    top: var(--title-bar-drag-area-height);
-    width: 24px;
-    z-index: $z-index-above-base;
-
-    @include color-svg('../images/icons/v2/more-horiz-24.svg', $color-white);
-
-    @include keyboard-mode {
-      &:focus {
-        background-color: $color-ultramarine;
-      }
-    }
-  }
-
   &__container {
     flex-grow: 1;
     overflow: hidden;
@@ -89,6 +71,16 @@
       @include font-body-2;
       color: $color-white-alpha-60;
     }
+
+    &__playback-bar {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    &__playback-controls {
+      align-items: center;
+      display: flex;
+    }
   }
 
   &__caption {
@@ -154,6 +146,76 @@
     }
   }
 
+  &__more {
+    @include button-reset;
+    height: 24px;
+    width: 24px;
+
+    @include color-svg('../images/icons/v2/more-horiz-24.svg', $color-white);
+
+    @include keyboard-mode {
+      &:focus {
+        background-color: $color-black;
+      }
+    }
+  }
+
+  &__mute {
+    @include button-reset;
+    height: 20px;
+    margin: 0 24px;
+    width: 20px;
+    @include color-svg(
+      '../images/icons/v2/speaker-on-solid-20.svg',
+      $color-white
+    );
+    @include keyboard-mode {
+      &:focus {
+        background-color: $color-white-alpha-80;
+      }
+    }
+  }
+
+  &__pause {
+    @include button-reset;
+    height: 20px;
+    width: 20px;
+    @include color-svg('../images/icons/v2/pause_solid_20.svg', $color-white);
+    @include keyboard-mode {
+      &:focus {
+        background-color: $color-white-alpha-80;
+      }
+    }
+  }
+
+  &__play {
+    @include button-reset;
+    height: 20px;
+    width: 20px;
+    @include color-svg('../images/icons/v2/play_solid_20.svg', $color-white);
+    @include keyboard-mode {
+      &:focus {
+        background-color: $color-white-alpha-80;
+      }
+    }
+  }
+
+  &__unmute {
+    @include button-reset;
+    height: 20px;
+    margin: 0 18px;
+    width: 20px;
+    @include color-svg(
+      '../images/icons/v2/speaker-off-solid-20.svg',
+      $color-white
+    );
+    @include keyboard-mode {
+      &:focus {
+        background-color: $color-white-alpha-80;
+      }
+    }
+  }
+
   &__progress {
     display: flex;
 

diff --git a/ts/components/ContextMenu.tsx b/ts/components/ContextMenu.tsx
@@ -49,6 +49,7 @@ export function ContextMenuPopper<T>({
   onClose,
   referenceElement,
   title,
+  theme,
   value,
 }: ContextMenuPropsType<T>): JSX.Element | null {
   const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
@@ -84,49 +85,54 @@ export function ContextMenuPopper<T>({
   }
 
   return (
-    <div
-      className="ContextMenu__popper"
-      ref={setPopperElement}
-      style={styles.popper}
-      {...attributes.popper}
-    >
-      {title && <div className="ContextMenu__title">{title}</div>}
-      {menuOptions.map((option, index) => (
-        <button
-          aria-label={option.label}
-          className={classNames({
-            ContextMenu__option: true,
-            'ContextMenu__option--focused': focusedIndex === index,
-          })}
-          key={option.label}
-          type="button"
-          onClick={() => {
-            option.onClick(option.value);
-            onClose();
-          }}
-        >
-          <div className="ContextMenu__option--container">
-            {option.icon && (
-              <div
-                className={classNames('ContextMenu__option--icon', option.icon)}
-              />
-            )}
-            <div>
-              <div className="ContextMenu__option--title">{option.label}</div>
-              {option.description && (
-                <div className="ContextMenu__option--description">
-                  {option.description}
-                </div>
+    <div className={theme ? themeClassName(theme) : undefined}>
+      <div
+        className="ContextMenu__popper"
+        ref={setPopperElement}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        {title && <div className="ContextMenu__title">{title}</div>}
+        {menuOptions.map((option, index) => (
+          <button
+            aria-label={option.label}
+            className={classNames({
+              ContextMenu__option: true,
+              'ContextMenu__option--focused': focusedIndex === index,
+            })}
+            key={option.label}
+            type="button"
+            onClick={() => {
+              option.onClick(option.value);
+              onClose();
+            }}
+          >
+            <div className="ContextMenu__option--container">
+              {option.icon && (
+                <div
+                  className={classNames(
+                    'ContextMenu__option--icon',
+                    option.icon
+                  )}
+                />
               )}
+              <div>
+                <div className="ContextMenu__option--title">{option.label}</div>
+                {option.description && (
+                  <div className="ContextMenu__option--description">
+                    {option.description}
+                  </div>
+                )}
+              </div>
             </div>
-          </div>
-          {typeof value !== 'undefined' &&
-          typeof option.value !== 'undefined' &&
-          value === option.value ? (
-            <div className="ContextMenu__option--selected" />
-          ) : null}
-        </button>
-      ))}
+            {typeof value !== 'undefined' &&
+            typeof option.value !== 'undefined' &&
+            value === option.value ? (
+              <div className="ContextMenu__option--selected" />
+            ) : null}
+          </button>
+        ))}
+      </div>
     </div>
   );
 }

diff --git a/ts/components/StoryImage.tsx b/ts/components/StoryImage.tsx
@@ -25,6 +25,7 @@ export type PropsType = {
   readonly attachment?: AttachmentType;
   readonly children?: ReactNode;
   readonly i18n: LocalizerType;
+  readonly isMuted?: boolean;
   readonly isPaused?: boolean;
   readonly isThumbnail?: boolean;
   readonly label: string;
@@ -37,6 +38,7 @@ export const StoryImage = ({
   attachment,
   children,
   i18n,
+  isMuted,
   isPaused,
   isThumbnail,
   label,
@@ -106,6 +108,7 @@ export const StoryImage = ({
         controls={false}
         key={attachment.url}
         loop={shouldLoop}
+        muted={isMuted}
         ref={videoRef}
       >
         <source src={attachment.url} />

diff --git a/ts/components/StoryViewer.stories.tsx b/ts/components/StoryViewer.stories.tsx
@@ -23,6 +23,7 @@ function getDefaultProps(): PropsType {
     conversationId: sender.id,
     getPreferredBadge: () => undefined,
     group: undefined,
+    hasAllStoriesMuted: false,
     i18n,
     loadStoryReplies: action('loadStoryReplies'),
     markStoryRead: action('markStoryRead'),
@@ -51,6 +52,7 @@ function getDefaultProps(): PropsType {
         timestamp: Date.now(),
       },
     ],
+    toggleHasAllStoriesMuted: action('toggleHasAllStoriesMuted'),
   };
 }
 
@@ -153,6 +155,7 @@ story.add('Caption', () => (
 story.add('Long Caption', () => (
   <StoryViewer
     {...getDefaultProps()}
+    hasAllStoriesMuted
     stories={[
       {
         attachment: fakeAttachment({