live iframe support (badly)

ystv · Nov 18, 2022 · 88b6ab5 · 88b6ab5
1 parent 29967d6
commit 88b6ab5
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 3 deletions.
diff --git a/components/LiveFeaturedPlayerBanner/index.tsx b/components/LiveFeaturedPlayerBanner/index.tsx
@@ -34,7 +34,11 @@ const LiveModal = ({ channel }: { channel: channel }) => {
             width: "100%",
           }}
         >
-          <VideoPlayer options={videoJSOptions} time={0} />
+          <VideoPlayer
+            options={videoJSOptions}
+            time={0}
+            iframe={channel.outputType == "iframe" ? channel.outputURL : null}
+          />
           <br />
         </div>
         <div style={{ flex: 1 }}>

diff --git a/components/VideoPlayer/VideoPlayer.css b/components/VideoPlayer/VideoPlayer.css
@@ -353,3 +353,21 @@
 .video-js:hover .vjs-big-play-button {
   outline: none;
 }
+
+.container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
+}
+
+/* Then style the iframe to fit in the container div with full height and width */
+.responsive-iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
diff --git a/components/VideoPlayer/index.tsx b/components/VideoPlayer/index.tsx
@@ -18,7 +18,7 @@ import overlay from "videojs-titleoverlay";
 export const VideoJS = (props) => {
   const videoRef = useRef(null);
   const playerRef = useRef(null);
-  const { options, onReady, time, title } = props;
+  const { options, onReady, time, title, iframe } = props;
 
   useEffect(() => {
     // make sure Video.js player is only initialized once
@@ -101,6 +101,20 @@ export const VideoJS = (props) => {
     };
   }, [playerRef]);
 
+  if (iframe)
+    return (
+      <div className="container">
+        <iframe
+          className="responsive-iframe"
+          src={options.sources[0].src}
+          title={title}
+          frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
+      </div>
+    );
+
   return (
     <div data-vjs-player>
       <video ref={videoRef} className="video-js" />

diff --git a/pages/watch/live/[liveURLName].tsx b/pages/watch/live/[liveURLName].tsx
@@ -27,7 +27,11 @@ export default function WatchLive({ channel }: { channel: channel }) {
       <Link href="/watch/live">&larr; Back to live channels</Link>
       <YstvHead title={`Live - ${channel.name}`} />
       <h1>Live - {channel.name}</h1>
-      <VideoPlayer options={videoJSOptions} time={0} />
+      <VideoPlayer
+        options={videoJSOptions}
+        time={0}
+        iframe={channel.outputType == "iframe" ? channel.outputURL : null}
+      />
       <p>{channel.description}</p>
     </div>
   );