From 24f6bb1ea506b3c116a107795430f5824a346c15 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Mon, 23 Jan 2023 19:28:32 -0800
Subject: [PATCH] Add aria-title attribute to video player. For #1826

---
 web/components/ui/Content/Content.tsx                    | 8 +++++++-
 .../video/OwncastPlayer/OwncastPlayer.stories.tsx        | 1 +
 web/components/video/OwncastPlayer/OwncastPlayer.tsx     | 9 +++++----
 web/pages/embed/video/index.tsx                          | 3 ++-
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx
index fe077b0dc..53194cb42 100644
--- a/web/components/ui/Content/Content.tsx
+++ b/web/components/ui/Content/Content.tsx
@@ -335,7 +335,13 @@ export const Content: FC = () => {
           <div className={styles.mainSection}>
             <div className={styles.topSection}>
               {appState.appLoading && <Skeleton loading active paragraph={{ rows: 7 }} />}
-              {online && <OwncastPlayer source="/hls/stream.m3u8" online={online} />}
+              {online && (
+                <OwncastPlayer
+                  source="/hls/stream.m3u8"
+                  online={online}
+                  title={streamTitle || name}
+                />
+              )}
               {!online && !appState.appLoading && (
                 <OfflineBanner
                   streamName={name}
diff --git a/web/components/video/OwncastPlayer/OwncastPlayer.stories.tsx b/web/components/video/OwncastPlayer/OwncastPlayer.stories.tsx
index 9c2b007a3..ac27bafd9 100644
--- a/web/components/video/OwncastPlayer/OwncastPlayer.stories.tsx
+++ b/web/components/video/OwncastPlayer/OwncastPlayer.stories.tsx
@@ -34,4 +34,5 @@ export const LiveDemo = Template.bind({});
 LiveDemo.args = {
   online: true,
   source: 'https://watch.owncast.online/hls/stream.m3u8',
+  title: 'Stream title',
 };
diff --git a/web/components/video/OwncastPlayer/OwncastPlayer.tsx b/web/components/video/OwncastPlayer/OwncastPlayer.tsx
index 4a21cf624..e806f14b9 100644
--- a/web/components/video/OwncastPlayer/OwncastPlayer.tsx
+++ b/web/components/video/OwncastPlayer/OwncastPlayer.tsx
@@ -10,7 +10,6 @@ import { isVideoPlayingAtom, clockSkewAtom } from '../../stores/ClientConfigStor
 import PlaybackMetrics from '../metrics/playback';
 import createVideoSettingsMenuButton from '../settings-menu';
 import LatencyCompensator from '../latencyCompensator';
-
 import styles from './OwncastPlayer.module.scss';
 
 const VIDEO_CONFIG_URL = '/api/video/variants';
@@ -26,6 +25,7 @@ export type OwncastPlayerProps = {
   source: string;
   online: boolean;
   initiallyMuted?: boolean;
+  title: string;
 };
 
 async function getVideoSettings() {
@@ -44,6 +44,7 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({
   source,
   online,
   initiallyMuted = false,
+  title,
 }) => {
   const playerRef = React.useRef(null);
   const [videoPlaying, setVideoPlaying] = useRecoilState<boolean>(isVideoPlayingAtom);
@@ -85,13 +86,13 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({
     }
   };
 
-  const setLatencyCompensatorItemTitle = title => {
+  const setLatencyCompensatorItemTitle = t => {
     const item = document.querySelector('.latency-toggle-item > .vjs-menu-item-text');
     if (!item) {
       return;
     }
 
-    item.innerHTML = title;
+    item.innerHTML = t;
   };
 
   const startLatencyCompensator = () => {
@@ -310,7 +311,7 @@ export const OwncastPlayer: FC<OwncastPlayerProps> = ({
     <div className={styles.container} id="player">
       {online && (
         <div className={styles.player}>
-          <VideoJS options={videoJsOptions} onReady={handlePlayerReady} />
+          <VideoJS options={videoJsOptions} onReady={handlePlayerReady} aria-label={title} />
         </div>
       )}
       <div className={styles.poster}>
diff --git a/web/pages/embed/video/index.tsx b/web/pages/embed/video/index.tsx
index 9f3289483..a3dbe1df2 100644
--- a/web/pages/embed/video/index.tsx
+++ b/web/pages/embed/video/index.tsx
@@ -20,7 +20,7 @@ export default function VideoEmbed() {
   const { name } = clientConfig;
 
   const { offlineMessage } = clientConfig;
-  const { viewerCount, lastConnectTime, lastDisconnectTime } = status;
+  const { viewerCount, lastConnectTime, lastDisconnectTime, streamTitle } = status;
   const online = useRecoilValue<boolean>(isOnlineSelector);
 
   const router = useRouter();
@@ -48,6 +48,7 @@ export default function VideoEmbed() {
             source="/hls/stream.m3u8"
             online={online}
             initiallyMuted={initiallyMuted}
+            title={streamTitle || name}
           />
         )}
         {!online && (