add Plyr.js and working multisource client-side stream

package.json

@@ -17,6 +17,7 @@
     "next": "14.2.2",
     "next-intl": "3.11.3",
     "next-nprogress-bar": "2.3.11",
+    "plyr-react": "^5.3.0",
     "react": "18.3.0",
     "react-cookie": "7.1.4",
     "react-dom": "18.3.0",
@@ -25,7 +26,7 @@
     "react-redux": "9.1.1",
     "redis": "4.6.14",
     "redux-persist": "6.0.0",
-    "video.js": "8.10.0",
+    "video.js": "8.12.0",
     "videojs-hls-quality-selector": "2.0.0"
   },
   "devDependencies": {

src/components/Layout/PlyrJS/PlyrJS.module.scss

@@ -0,0 +1,11 @@
+@import 'spacing';
+
+.container {
+    margin-bottom: $spacing_32;
+
+    [type="button"],
+    [type="reset"],
+    [type="submit"] {
+        margin-bottom: 0 !important;
+    }
+}

src/components/Layout/PlyrJS/index.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import React from 'react';
+
+import style from './PlyrJS.module.scss'
+
+import { VideoData } from '@/meta/data';
+
+import "plyr-react/plyr.css"
+
+import dynamic from 'next/dynamic';
+
+interface Props {
+    data: VideoData
+}
+
+const PlyrJS: React.FC<Props> = (props) => {
+
+
+    const PlyrComponent = React.useMemo(() => {
+        return dynamic(() => import("plyr-react"), { ssr: false });
+    }, []);
+
+    //   const Plyr = dynamic(() => import("plyr-react"), { ssr: false });
+
+    const { data } = props;
+
+    const plyrProps = {
+        source: { type: 'video', sources: data.srcSet }, // https://github.com/sampotts/plyr#the-source-setter
+        // options: undefined, // https://github.com/sampotts/plyr#options
+    }
+
+    return (
+        <div className={style.container}>
+            {/* @ts-ignore */}
+            <PlyrComponent {...plyrProps} />
+        </div>
+    );
+};
+
+export default PlyrJS;

src/components/Layout/VideoJS/VJSContent/index.tsx

@@ -6,9 +6,9 @@ import videojs from 'video.js';
 
 import 'video.js/dist/video-js.css';
 
-import style from './VideoJS.module.scss'
+import style from './VJSContent.module.scss'
 
-export const VideoJS = (props: { options: any; onReady: any; }) => {
+export const VJSContent = (props: { options: any; onReady: any; }) => {
   const videoRef = React.useRef(null);
   const playerRef = React.useRef(null);
   const {options, onReady} = props;
@@ -64,4 +64,4 @@ export const VideoJS = (props: { options: any; onReady: any; }) => {
   );
 }
 
-export default VideoJS;
+export default VJSContent;

src/components/Layout/VideoJS/index.tsx

@@ -2,9 +2,9 @@
 
 import React from 'react';
 
-import style from './Player.module.scss'
+import style from './VideoJS.module.scss'
 
-import VideoJS from './VideoJS';
+import VJSContent from './VJSContent';
 import { VideoData } from '@/meta/data';
 
 import 'videojs-hls-quality-selector';
@@ -13,7 +13,7 @@ interface Props {
   data: VideoData
 }
 
-const Player: React.FC<Props> = (props) => {
+const VideoJS: React.FC<Props> = (props) => {
 
   const { data } = props;
 
@@ -27,7 +27,7 @@ const Player: React.FC<Props> = (props) => {
     controls: true,
     responsive: true,
     fluid: true,
-    sources: data.srcSet ?? [{
+    sources: [{
       src: videoSrc,
       type: videoType
     }]
@@ -55,9 +55,9 @@ const Player: React.FC<Props> = (props) => {
 
   return (
     <div className={style.container}>
-      <VideoJS options={videoJsOptions} onReady={handlePlayerReady} />
+      <VJSContent options={videoJsOptions} onReady={handlePlayerReady} />
     </div>
   );
 };
 
-export default Player;
+export default VideoJS;

src/components/Pages/Video/index.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 
 import Header from '@/components/Layout/Header';
-import Player from '@/components/Layout/Player';
+
+import VideoJS from '@/components/Layout/VideoJS';
+import PlyrJS from '@/components/Layout/PlyrJS';
+
 import SearchBar from '@/components/Layout/SearchBar';
 import Results from '@/components/Layout/Results';
 
@@ -21,7 +24,7 @@ const Video: React.FC<Props> = (props) => {
     return (
         <>
             <Header />
-            <Player data={data} />
+            {data.srcSet ? <PlyrJS data={data} /> : <VideoJS data={data} />}
             <SearchBar />
             {related && <Results data={related} />}
         </>

src/meta/data.ts

@@ -15,7 +15,7 @@ export interface GalleryData {
 export interface VideoSourceItem {
     type: string,
     src: string,
-    label: string
+    size: string
 }
 
 export interface VideoData {

src/utils/scrape/common/mindgeek.ts

@@ -25,7 +25,6 @@ export const createSessionCookie = (responseSetCookies: string[]): string => {
     responseSetCookies.map((elem, key) => {
         if (elem.includes('platform=') || elem.includes('ss=') || elem.includes('fg_')) {
             pieces.push(elem.split(';')[0])
-            console.log()
         }
     })
 

src/utils/scrape/pornhub/gallery.ts

@@ -19,8 +19,6 @@ export const fetchPornHubGalleryData = async (params?: FetchParams): Promise<Gal
 
     const queryUrl = await getPornHubQueryUrl(params?.query)
 
-    console.log(queryUrl)
-
     const cachedData = await getDataFromRedis(queryUrl)
 
     if (cachedData) {

src/utils/scrape/pornhub/url.ts

@@ -30,7 +30,7 @@ export const getPornHubMediaUrlList = async (url: string, sessionCookie: string)
                 videos = await response.data.map((elem: PornHubVideoSrcElem) => ({
                     src: elem?.videoUrl,
                     type: 'video/mp4',
-                    label: elem?.quality
+                    size: elem?.quality
                 })) as VideoSourceItem[]
 
                 return videos