From 88b6ab5e1b532ba332d0c9a73cb92d9e0414cef3 Mon Sep 17 00:00:00 2001
From: thekingofjibs <26507833+thekingofjibs@users.noreply.github.com>
Date: Fri, 18 Nov 2022 21:09:40 +0000
Subject: [PATCH] live iframe support (badly)

---
 components/LiveFeaturedPlayerBanner/index.tsx |  6 +++++-
 components/VideoPlayer/VideoPlayer.css        | 18 ++++++++++++++++++
 components/VideoPlayer/index.tsx              | 16 +++++++++++++++-
 pages/watch/live/[liveURLName].tsx            |  6 +++++-
 4 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/components/LiveFeaturedPlayerBanner/index.tsx b/components/LiveFeaturedPlayerBanner/index.tsx
index 235eb72..f84844e 100644
--- 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
index 90b57c8..63cbe64 100644
--- 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%;
+}
\ No newline at end of file
diff --git a/components/VideoPlayer/index.tsx b/components/VideoPlayer/index.tsx
index cc632c5..6a1d66d 100644
--- 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
index 96f26e2..87a3662 100644
--- 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>
   );