Fixes bugs with the story viewer

images/icons/v2/arrow-left-32.svg

@@ -0,0 +1 @@
+<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m23.2028 3.06066c.5857.58579.5857 1.53553 0 2.12132l-11.0104 11.01042 11.0104 11.0104c.5858.5858.5858 1.5356 0 2.1213-.5858.5858-1.5355.5858-2.1213 0l-12.02084-12.0208c-.3055-.3055-.45168-.71-.43852-1.1102-.01354-.4007.13262-.8058.43847-1.1116l12.02079-12.02084c.5858-.58579 1.5356-.58579 2.1214 0z" fill="#000" fill-rule="evenodd"/></svg>

images/icons/v2/arrow-right-32.svg

@@ -0,0 +1 @@
+<svg fill="none" height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m9.06066 3.06066c-.58578.58579-.58578 1.53553 0 2.12132l11.01044 11.01042-11.01048 11.0104c-.58579.5858-.58579 1.5356 0 2.1213.58578.5858 1.53558.5858 2.12128 0l12.0209-12.0208c.3055-.3055.4516-.71.4385-1.1102.0135-.4007-.1326-.8058-.4385-1.1116l-12.0208-12.02084c-.5858-.58579-1.53555-.58579-2.12134 0z" fill="#000" fill-rule="evenodd"/></svg>

stylesheets/components/StoryViewer.scss

@@ -56,8 +56,6 @@
   &__container {
     flex-grow: 1;
     overflow: hidden;
-    position: relative;
-    z-index: $z-index-base;
   }
 
   &__story {
@@ -74,7 +72,7 @@
     transform: translateX(-50%);
     min-width: 284px;
     width: 56.25vh;
-    z-index: $z-index-above-base;
+    z-index: $z-index-above-above-base;
 
     &--group-avatar {
       margin-left: -8px;
@@ -156,14 +154,16 @@
   }
 
   &__arrow {
+    @include button-reset;
     align-items: center;
     display: flex;
     height: 100vh;
     position: absolute;
     width: 25%;
+    z-index: $z-index-above-above-base;
 
-    button {
+    &::before {
-      @include button-reset;
+      content: '';
       height: 24px;
       opacity: 0;
       width: 24px;
@@ -174,10 +174,10 @@
       justify-content: flex-start;
       left: 0;
 
-      button {
+      &::before {
         margin-left: 24px;
         @include color-svg(
-          '../images/icons/v2/chevron-left-24.svg',
+          '../images/icons/v2/arrow-left-32.svg',
           $color-white
         );
       }
@@ -187,25 +187,24 @@
       justify-content: flex-end;
       right: 0;
 
-      button {
+      &::before {
         margin-right: 24px;
         @include color-svg(
-          '../images/icons/v2/chevron-right-24.svg',
+          '../images/icons/v2/arrow-right-32.svg',
           $color-white
         );
       }
     }
 
-    &--visible button {
+    &--visible::before {
       opacity: 1;
-      visibility: visible;
     }
   }
 
   &__protection {
     position: absolute;
     width: 100%;
-    z-index: $z-index-above-base;
+    z-index: $z-index-base;
 
     &--top {
       background: linear-gradient($color-black-alpha-16, $color-transparent);

ts/components/StoryViewer.stories.tsx

@@ -45,6 +45,7 @@ function getDefaultProps(): PropsType {
           path: 'snow.jpg',
           url: '/fixtures/snow.jpg',
         }),
+        canReply: true,
         messageId: '123',
         sender,
         timestamp: Date.now(),
@@ -64,6 +65,7 @@ story.add('Wide story', () => (
           path: 'file.jpg',
           url: '/fixtures/nathan-anderson-316188-unsplash.jpg',
         }),
+        canReply: true,
         messageId: '123',
         sender: getDefaultConversation(),
         timestamp: Date.now(),
@@ -103,6 +105,7 @@ story.add('Multi story', () => {
             path: 'file.jpg',
             url: '/fixtures/nathan-anderson-316188-unsplash.jpg',
           }),
+          canReply: true,
           messageId: '456',
           sender,
           timestamp: Date.now() - 3600,
@@ -122,6 +125,7 @@ story.add('Caption', () => (
           path: 'file.jpg',
           url: '/fixtures/nathan-anderson-316188-unsplash.jpg',
         }),
+        canReply: true,
         messageId: '123',
         sender: getDefaultConversation(),
         timestamp: Date.now(),
@@ -141,6 +145,7 @@ story.add('Long Caption', () => (
           path: 'file.jpg',
           url: '/fixtures/snow.jpg',
         }),
+        canReply: true,
         messageId: '123',
         sender: getDefaultConversation(),
         timestamp: Date.now(),

ts/components/StoryViewer.tsx

@@ -370,21 +370,18 @@ export const StoryViewer = ({
           style={{ background: getStoryBackground(attachment) }}
         />
         <div className="StoryViewer__content">
-          <div
+          <button
+            aria-label={i18n('back')}
             className={classNames(
               'StoryViewer__arrow StoryViewer__arrow--left',
               {
                 'StoryViewer__arrow--visible': arrowToShow === Arrow.Left,
               }
             )}
+            onClick={showPrevStory}
             onMouseMove={() => setArrowToShow(Arrow.Left)}
-          >
+            type="button"
-            <button
+          />
-              aria-label={i18n('back')}
-              onClick={showPrevStory}
-              type="button"
-            />
-          </div>
           <div className="StoryViewer__protection StoryViewer__protection--top" />
           <div className="StoryViewer__container">
             <StoryImage
@@ -415,157 +412,154 @@ export const StoryViewer = ({
                 type="button"
               />
             )}
-            <div className="StoryViewer__meta">
+          </div>
-              {caption && (
+          <div className="StoryViewer__meta">
-                <div className="StoryViewer__caption">
+            {caption && (
-                  {caption.text}
+              <div className="StoryViewer__caption">
-                  {caption.hasReadMore && !hasExpandedCaption && (
+                {caption.text}
-                    <button
+                {caption.hasReadMore && !hasExpandedCaption && (
-                      className="MessageBody__read-more"
-                      onClick={() => {
-                        setHasExpandedCaption(true);
-                      }}
-                      onKeyDown={(ev: React.KeyboardEvent) => {
-                        if (ev.key === 'Space' || ev.key === 'Enter') {
-                          setHasExpandedCaption(true);
-                        }
-                      }}
-                      type="button"
-                    >
-                      ...
-                      {i18n('MessageBody--read-more')}
-                    </button>
-                  )}
-                </div>
-              )}
-              <Avatar
-                acceptedMessageRequest={acceptedMessageRequest}
-                avatarPath={avatarPath}
-                badge={undefined}
-                color={getAvatarColor(color)}
-                conversationType="direct"
-                i18n={i18n}
-                isMe={Boolean(isMe)}
-                name={name}
-                profileName={profileName}
-                sharedGroupNames={sharedGroupNames}
-                size={AvatarSize.TWENTY_EIGHT}
-                title={title}
-              />
-              {group && (
-                <Avatar
-                  acceptedMessageRequest={group.acceptedMessageRequest}
-                  avatarPath={group.avatarPath}
-                  badge={undefined}
-                  className="StoryViewer__meta--group-avatar"
-                  color={getAvatarColor(group.color)}
-                  conversationType="group"
-                  i18n={i18n}
-                  isMe={false}
-                  name={group.name}
-                  profileName={group.profileName}
-                  sharedGroupNames={group.sharedGroupNames}
-                  size={AvatarSize.TWENTY_EIGHT}
-                  title={group.title}
-                />
-              )}
-              <div className="StoryViewer__meta--title">
-                {group
-                  ? i18n('Stories__from-to-group', {
-                      name: title,
-                      group: group.title,
-                    })
-                  : title}
-              </div>
-              <MessageTimestamp
-                i18n={i18n}
-                module="StoryViewer__meta--timestamp"
-                timestamp={timestamp}
-              />
-              <div className="StoryViewer__progress">
-                {stories.map((story, index) => (
-                  <div
-                    className="StoryViewer__progress--container"
-                    key={story.messageId}
-                  >
-                    {currentStoryIndex === index ? (
-                      <animated.div
-                        className="StoryViewer__progress--bar"
-                        style={{
-                          width: to([styles.width], width => `${width}%`),
-                        }}
-                      />
-                    ) : (
-                      <div
-                        className="StoryViewer__progress--bar"
-                        style={{
-                          width: currentStoryIndex < index ? '0%' : '100%',
-                        }}
-                      />
-                    )}
-                  </div>
-                ))}
-              </div>
-              <div className="StoryViewer__actions">
-                {canReply && (
                   <button
-                    className="StoryViewer__reply"
+                    className="MessageBody__read-more"
-                    onClick={() => setHasReplyModal(true)}
+                    onClick={() => {
-                    tabIndex={0}
+                      setHasExpandedCaption(true);
+                    }}
+                    onKeyDown={(ev: React.KeyboardEvent) => {
+                      if (ev.key === 'Space' || ev.key === 'Enter') {
+                        setHasExpandedCaption(true);
+                      }
+                    }}
                     type="button"
                   >
-                    <>
+                    ...
-                      {viewCount > 0 &&
+                    {i18n('MessageBody--read-more')}
-                        (viewCount === 1 ? (
-                          <Intl
-                            i18n={i18n}
-                            id="MyStories__views--singular"
-                            components={[<strong>{viewCount}</strong>]}
-                          />
-                        ) : (
-                          <Intl
-                            i18n={i18n}
-                            id="MyStories__views--plural"
-                            components={[<strong>{viewCount}</strong>]}
-                          />
-                        ))}
-                      {viewCount > 0 && replyCount > 0 && ' '}
-                      {replyCount > 0 &&
-                        (replyCount === 1 ? (
-                          <Intl
-                            i18n={i18n}
-                            id="MyStories__replies--singular"
-                            components={[<strong>{replyCount}</strong>]}
-                          />
-                        ) : (
-                          <Intl
-                            i18n={i18n}
-                            id="MyStories__replies--plural"
-                            components={[<strong>{replyCount}</strong>]}
-                          />
-                        ))}
-                      {!viewCount && !replyCount && i18n('StoryViewer__reply')}
-                    </>
                   </button>
                 )}
               </div>
+            )}
+            <Avatar
+              acceptedMessageRequest={acceptedMessageRequest}
+              avatarPath={avatarPath}
+              badge={undefined}
+              color={getAvatarColor(color)}
+              conversationType="direct"
+              i18n={i18n}
+              isMe={Boolean(isMe)}
+              name={name}
+              profileName={profileName}
+              sharedGroupNames={sharedGroupNames}
+              size={AvatarSize.TWENTY_EIGHT}
+              title={title}
+            />
+            {group && (
+              <Avatar
+                acceptedMessageRequest={group.acceptedMessageRequest}
+                avatarPath={group.avatarPath}
+                badge={undefined}
+                className="StoryViewer__meta--group-avatar"
+                color={getAvatarColor(group.color)}
+                conversationType="group"
+                i18n={i18n}
+                isMe={false}
+                name={group.name}
+                profileName={group.profileName}
+                sharedGroupNames={group.sharedGroupNames}
+                size={AvatarSize.TWENTY_EIGHT}
+                title={group.title}
+              />
+            )}
+            <div className="StoryViewer__meta--title">
+              {group
+                ? i18n('Stories__from-to-group', {
+                    name: title,
+                    group: group.title,
+                  })
+                : title}
+            </div>
+            <MessageTimestamp
+              i18n={i18n}
+              module="StoryViewer__meta--timestamp"
+              timestamp={timestamp}
+            />
+            <div className="StoryViewer__progress">
+              {stories.map((story, index) => (
+                <div
+                  className="StoryViewer__progress--container"
+                  key={story.messageId}
+                >
+                  {currentStoryIndex === index ? (
+                    <animated.div
+                      className="StoryViewer__progress--bar"
+                      style={{
+                        width: to([styles.width], width => `${width}%`),
+                      }}
+                    />
+                  ) : (
+                    <div
+                      className="StoryViewer__progress--bar"
+                      style={{
+                        width: currentStoryIndex < index ? '0%' : '100%',
+                      }}
+                    />
+                  )}
+                </div>
+              ))}
+            </div>
+            <div className="StoryViewer__actions">
+              {canReply && (
+                <button
+                  className="StoryViewer__reply"
+                  onClick={() => setHasReplyModal(true)}
+                  tabIndex={0}
+                  type="button"
+                >
+                  <>
+                    {viewCount > 0 &&
+                      (viewCount === 1 ? (
+                        <Intl
+                          i18n={i18n}
+                          id="MyStories__views--singular"
+                          components={[<strong>{viewCount}</strong>]}
+                        />
+                      ) : (
+                        <Intl
+                          i18n={i18n}
+                          id="MyStories__views--plural"
+                          components={[<strong>{viewCount}</strong>]}
+                        />
+                      ))}
+                    {viewCount > 0 && replyCount > 0 && ' '}
+                    {replyCount > 0 &&
+                      (replyCount === 1 ? (
+                        <Intl
+                          i18n={i18n}
+                          id="MyStories__replies--singular"
+                          components={[<strong>{replyCount}</strong>]}
+                        />
+                      ) : (
+                        <Intl
+                          i18n={i18n}
+                          id="MyStories__replies--plural"
+                          components={[<strong>{replyCount}</strong>]}
+                        />
+                      ))}
+                    {!viewCount && !replyCount && i18n('StoryViewer__reply')}
+                  </>
+                </button>
+              )}
             </div>
           </div>
-          <div
+          <button
+            aria-label={i18n('forward')}
             className={classNames(
               'StoryViewer__arrow StoryViewer__arrow--right',
               {
                 'StoryViewer__arrow--visible': arrowToShow === Arrow.Right,
               }
             )}
+            onClick={showNextStory}
             onMouseMove={() => setArrowToShow(Arrow.Right)}
-          >
+            type="button"
-            <button
+          />
-              aria-label={i18n('forward')}
-              onClick={showNextStory}
-              type="button"
-            />
-          </div>
           <div className="StoryViewer__protection StoryViewer__protection--bottom" />
           <button
             aria-label={i18n('MyStories__more')}