fixed al the errors realted to pip button

code100x · Oct 23, 2024 · a99f661 · a99f661
1 parent cefecca
commit a99f661
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -25,9 +25,6 @@ export const metadata: Metadata = siteConfig;
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html suppressHydrationWarning={true} lang="en">
-      <head>
-        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
-      </head>
       <body
         suppressHydrationWarning={true}
         className={cn(

diff --git a/src/components/ContentCard.tsx b/src/components/ContentCard.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { CheckCircle2, Play } from 'lucide-react';
 import { Bookmark } from '@prisma/client';
 import BookmarkButton from './bookmark/BookmarkButton';

diff --git a/src/components/VideoPlayer2.tsx b/src/components/VideoPlayer2.tsx
@@ -15,6 +15,7 @@ import './QualitySelectorControllBar';
 import { YoutubeRenderer } from './YoutubeRenderer';
 import { toast } from 'sonner';
 import { createRoot } from 'react-dom/client';
+import { SkipForward, SkipBack, PictureInPicture2 } from 'lucide-react';
 
 // todo correct types
 interface VideoPlayerProps {
@@ -75,22 +76,34 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
     const pipButtonContainer = (player as any).controlBar.addChild('button');
 
     const root = createRoot(pipButtonContainer.el());
-    root.render(<span className="material-symbols-outlined">picture_in_picture_alt</span>);
+    root.render(
+      <div className='flex justify-center items-center'>
+        <PictureInPicture2 size={16} strokeWidth={3.0}/>
+      </div>
+    );
 
     return pipButtonContainer;
   };
 
   const createNextVideoButton = (player: Player) => {
     const NextButtonContainer = (player as any).controlBar.addChild('button');
     const root = createRoot(NextButtonContainer.el());
-    root.render(<span className="material-symbols-outlined">skip_next</span>);
+    root.render(
+      <div className='flex items-center justify-center'>
+        <SkipForward size={16} strokeWidth={3.0} />
+      </div>
+    );
     return NextButtonContainer;
   };
 
   const createPrevVideoButton = (player: Player) => {
     const PrevButtonContainer = (player as any).controlBar.addChild('button');
     const root = createRoot(PrevButtonContainer.el());
-    root.render(<span className="material-symbols-outlined">skip_previous</span>);
+    root.render(
+      <div className='flex items-center justify-center'>
+        <SkipBack size={16} strokeWidth={3.0}/>
+      </div>
+    );
     return PrevButtonContainer;
   };
 
@@ -433,6 +446,11 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
 
           const pipButton = createPipButton(player);
           controlBar.el().insertBefore(pipButton.el(), fullscreenToggle.el());
+          // pipButton.on('click', (e: any) => {
+          //   e.preventDefault();
+          //   e.stopPropagation();
+          //   togglePictureInPicture();
+          // });
 
           pipButton.on('click', (e:any) => {
             e.preventDefault();