fix the styles in watch page components

GokuxSS4 · Feb 26, 2025 · 881f7c9 · 881f7c9
1 parent 5c37ceb
commit 881f7c9
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/components/watch/ListOfEpisodes.tsx b/components/watch/ListOfEpisodes.tsx
@@ -54,12 +54,12 @@ export function ListOfEpisodes({
   );
 
   return (
-    <div className="flex flex-col gap-3 border-2 border-white-10 p-2 rounded-lg">
+    <div className="flex flex-col gap-3 border border-white/20 p-2 rounded-lg">
       <div className="relative inline-block text-left">
         <select
           value={selectedCategory}
           onChange={(e) => setSelectedCategory(e.target.value)}
-          className="block w-[50%] bg-[#0f0f11] border border-300 rounded-md shadow-sm px-1 py-1 text-base font-medium text-white focus:outline-none"
+          className="block w-[50%] bg-[#0f0f11] border border-white/20 rounded-md shadow-sm px-1 py-1 text-base font-medium text-white focus:outline-none"
         >
           {episodesCategory.map((episode, index) => (
             <option key={index} value={episode}>

diff --git a/components/watch/VideoContainer.tsx b/components/watch/VideoContainer.tsx
@@ -304,16 +304,16 @@ export function VideoContainer({
 
   return (
     <div className="w-full flex flex-col">
-      <div className="relative aspect-video w-full">
+      <div className="relative aspect-video w-full mb-2 rounded-lg">
         {isServerResourceError ? (
-          <div className="w-full h-full relative bg-gray-300">
+          <div className="w-full h-full relative bg-gray-300 rounded-lg border border-white/20">
             <p className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center text-black">
               Failed to retrieve
             </p>
             <VidStackPlayerSkeleton />
           </div>
         ) : serverResources && !isVideoSkeletonVisible ? (
-          <div className="w-full h-full">
+          <div className="w-full h-full border border-white/20 rounded-lg">
             <VidstackDefaultPlayer
               title={title || ""}
               videoUrl={serverResources.sources[0].url}
@@ -329,13 +329,13 @@ export function VideoContainer({
             />
           </div>
         ) : (
-          <div className="w-full h-full animate-pulse bg-gray-700 rounded-lg">
+          <div className="w-full h-full animate-pulse bg-gray-700 rounded-lg border border-white/20">
             <VidStackPlayerSkeleton />
           </div>
         )}
       </div>
 
-      <div className="bg-[#0f0f11] flex flex-wrap gap-2 md:gap-4 px-2 py-1 mt-1 rounded-lg text-xs">
+      <div className="bg-[#0f0f11] flex flex-wrap gap-2 md:gap-4 px-2 py-1 rounded-lg text-xs border border-white/20">
         <button
           className="flex items-center gap-1 text-white/50 hover:text-white transition-colors"
           onClick={toggleAutoPlay}
@@ -389,7 +389,7 @@ export function VideoContainer({
 
       <div className="">
         {availableServers !== null ? (
-          <div className="bg-[rgb(15,14,15)] rounded-lg mt-4 overflow-hidden border border-gray-800">
+          <div className="bg-[rgb(15,14,15)] rounded-lg mt-4 overflow-hidden border border-white/20">
             <div className="flex flex-col lg:flex-row">
               <div className="lg:w-[250px] p-6 bg-gray-900/50">
                 <div className="flex flex-col items-center text-center gap-2">

diff --git a/components/watch/VidstackDefaultPlayer.tsx b/components/watch/VidstackDefaultPlayer.tsx
@@ -28,7 +28,11 @@ type IntroOutroType = {
 
 export function VidStackPlayerSkeleton() {
   return (
-    <MediaPlayer title="" src={""}>
+    <MediaPlayer
+      className="w-full h-full player relative z-10"
+      viewType="video"
+      aspectRatio="16/9"
+    >
       <MediaProvider />
     </MediaPlayer>
   );
@@ -55,7 +59,6 @@ function SkipButton({
         text-white px-4 py-2 rounded-lg
         overflow-hidden font-bold
         bg-white/10 hover:bg-white/30 
-        border-1 border-white
       `}
     >
       <span className="relative z-10 font-bold">
@@ -162,7 +165,7 @@ export function VidstackDefaultPlayer({
       ref={player}
       title={title}
       autoPlay={autoPlay}
-      className="player relative z-10 border-2 border-white-10 rounded-lg"
+      className="player w-full h-full relative z-10"
       src={videoUrl}
       viewType="video"
       crossOrigin
@@ -190,7 +193,6 @@ export function VidstackDefaultPlayer({
       <DefaultVideoLayout
         icons={defaultLayoutIcons}
         noGestures={false}
-        download={true}
         slots={{
           afterCaptionButton: (
             <SeekButton seconds={-10} className="vds-button">