Page do not reload when Quality is changed for the video

src/components/QualitySelectorControllBar.ts

@@ -1,9 +1,11 @@
 import videojs from 'video.js';
 
-const changeVideoQuality = (quality: string) => {
+const changeVideoQuality = (quality: string, player: any) => {
   const currentUrl = new URL(window.location.href);
   currentUrl.searchParams.set('quality', quality);
-  window.location.href = currentUrl.href;
+  const newUrl = `${currentUrl.pathname}?${currentUrl.searchParams.toString()}`;
+  window.history.pushState({ path: newUrl }, '', newUrl);
+  player.qualitySelector(quality);
 };
 
 class QualitySelectorControllBar extends videojs.getComponent('Button') {
@@ -42,15 +44,16 @@ class QualitySelectorControllBar extends videojs.getComponent('Button') {
     dropUpMenuElement.querySelectorAll('li').forEach((item) => {
       item.addEventListener('click', (e: any) => {
         const quality = e.target.getAttribute('data-quality');
-        if (quality) {
-          changeVideoQuality(quality);
+        const urlParams = new URLSearchParams(window.location.search);
+        if (quality !== urlParams.get('quality')) {
+          changeVideoQuality(quality, player);
         }
         dropUpMenuElement.style.display = 'none';
       });
       item.addEventListener('touchend', (e: any) => {
         const quality = e.target.getAttribute('data-quality');
         if (quality) {
-          changeVideoQuality(quality);
+          changeVideoQuality(quality, player);
         }
         dropUpMenuElement.style.display = 'none';
         dropUpMenuElement.style.display = 'none';

src/components/VideoPlayer2.tsx

@@ -15,6 +15,7 @@ import './QualitySelectorControllBar';
 
 // todo correct types
 interface VideoPlayerProps {
+  setQuality: React.Dispatch<React.SetStateAction<number>>;
   options: any;
   onReady?: (player: Player) => void;
   subtitles?: string;
@@ -26,6 +27,7 @@ const PLAYBACK_RATES: number[] = [0.5, 1, 1.25, 1.5, 1.75, 2];
 const VOLUME_LEVELS: number[] = [0, 0.2, 0.4, 0.6, 0.8, 1.0];
 
 export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
+  setQuality,
   options,
   contentId,
   onReady,
@@ -231,6 +233,7 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
             back: 15,
           });
 
+          player.qualitySelector = setQuality;
           const qualitySelector = player.controlBar.addChild(
             'QualitySelectorControllBar',
           );
@@ -266,6 +269,14 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
     }
   }, [options, onReady]);
 
+  useEffect(() => {
+    if (player) {
+      const currentTime = player.currentTime();
+      player.src(options.sources[0]);
+      player.currentTime(currentTime);
+    }
+  }, [options.sources[0]]);
+
   useEffect(() => {
     const player = playerRef.current;
     return () => {

src/components/VideoPlayerSegment.tsx

@@ -18,6 +18,7 @@ export interface Thumbnail {
 }
 
 interface VideoProps {
+  setQuality: React.Dispatch<React.SetStateAction<number>>;
   thumbnails: Thumbnail[];
   segments: Segment[];
   subtitles: string;
@@ -27,6 +28,7 @@ interface VideoProps {
 }
 
 export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
+  setQuality,
   contentId,
   subtitles,
   segments,
@@ -93,6 +95,7 @@ export const VideoPlayerSegment: FunctionComponent<VideoProps> = ({
           className="hidden absolute bg-no-repeat bg-cover w-[320px] h-[180px] pointer-events-none z-10"
         />
         <VideoPlayer
+          setQuality={setQuality}
           contentId={contentId}
           subtitles={subtitles}
           options={videoJsOptions}

src/components/admin/ContentRendererClient.tsx

@@ -38,7 +38,9 @@ export const ContentRendererClient = ({
   const router = useRouter();
 
   //@ts-ignore
-  const quality: '720' | '1080' | '360' | null = searchParams.get('quality');
+  const [quality, setQuality] = useState<number>(
+    searchParams.get('quality') | null,
+  );
 
   if (!metadata) {
     return <div>Loading</div>;
@@ -92,6 +94,7 @@ export const ContentRendererClient = ({
     <div className="flex gap-2 items-start flex-col lg:flex-row">
       <div className="flex-1 w-full">
         <VideoPlayerSegment
+          setQuality={setQuality}
           contentId={content.id}
           subtitles={metadata.subtitles}
           thumbnails={[]}

src/db/Cache.ts

@@ -26,7 +26,12 @@ export class Cache {
     return this.instance;
   }
 
-  set(type: string, args: string[], value: any, expirySeconds: number = parseInt(process.env.CACHE_EXPIRE_S || '100', 10)) {
+  set(
+    type: string,
+    args: string[],
+    value: any,
+    expirySeconds: number = parseInt(process.env.CACHE_EXPIRE_S || '100', 10),
+  ) {
     this.inMemoryDb.set(`${type} ${JSON.stringify(args)}`, {
       value,
       expiry: new Date().getTime() + expirySeconds * 1000,
@@ -46,7 +51,5 @@ export class Cache {
     return entry.value;
   }
 
-  evict() {
-
-  }
+  evict() {}
 }