fix: Player Subtitles not showing

ErickLimaS · Mar 22, 2024 · f0d418c · f0d418c
2 parents 81f0b81 + 1518234
commit f0d418c
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 14 deletions.
diff --git a/app/media/[id]/components/AniwatchEpisodeContainer/component.module.css b/app/media/[id]/components/AniwatchEpisodeContainer/component.module.css
@@ -40,6 +40,8 @@
 
 .container a.img_container img {
 
+    object-fit: cover;
+
     transition: all ease-in-out 100ms;
 
     background: linear-gradient(45deg, var(--brand-color), transparent);

diff --git a/app/media/[id]/components/CrunchyrollEpisodeContainer/component.module.css b/app/media/[id]/components/CrunchyrollEpisodeContainer/component.module.css
@@ -40,6 +40,8 @@
 
 .container a.img_container img {
 
+    object-fit: cover;
+
     transition: all ease-in-out 100ms;
 
     background: linear-gradient(45deg, var(--brand-color), transparent);

diff --git a/app/media/[id]/components/GoGoAnimeEpisodeContainer/component.module.css b/app/media/[id]/components/GoGoAnimeEpisodeContainer/component.module.css
@@ -40,6 +40,8 @@
 
 .container a.img_container img {
 
+    object-fit: cover;
+
     transition: all ease-in-out 100ms;
 
     background: linear-gradient(45deg, var(--brand-color), transparent);

diff --git a/app/watch/[id]/components/VideoPlayer/component.module.css b/app/watch/[id]/components/VideoPlayer/component.module.css
@@ -36,10 +36,9 @@
     background-color: var(--black-75);
     border: 2px solid var(--white-50);
 
-    padding: 8px 24px;
-
     border-radius: 4px;
 
+
     font-family: var(--font-family-sans-serif);
     font-weight: 600;
     color: var(--white-100);
@@ -48,9 +47,32 @@
 
 @media(min-width: 620px) {
     .container #skip_btn {
-        padding: 12px 40px;
-        width: 38%;
         max-width: 220px;
+        width: 38%;
+    }
+}
+
+.container #skip_btn span.moving_bar {
+
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+
+    background-color: var(--brand-dark-color);
+
+    height: 100%;
+    width: 100%;
+    transform-origin: 0 0;
+}
+
+.container #skip_btn span.btn_text {
+    padding: 8px 24px;
+}
+
+@media(min-width: 620px) {
+    .container #skip_btn span.btn_text {
+        padding: 12px 40px;
     }
 }
 

diff --git a/app/watch/[id]/components/VideoPlayer/index.tsx b/app/watch/[id]/components/VideoPlayer/index.tsx
@@ -24,7 +24,7 @@ import gogoanime from "@/api/gogoanime";
 import aniwatch from "@/api/aniwatch";
 import { useRouter } from "next/navigation";
 import SkipSvg from "@/public/assets/chevron-double-right.svg"
-import NextSvg from "@/public/assets/play.svg"
+import PlaySvg from "@/public/assets/play.svg"
 
 type VideoPlayerType = {
     source: string,
@@ -230,11 +230,15 @@ function Player({
         if (episodeIntro || episodeOutro) {
             if (episodeIntro && currentTime >= episodeIntro.start && currentTime < episodeIntro.end) {
                 if (timeskip == null) setTimeskip(() => episodeIntro.end)
-                if (user && autoSkipIntroAndOutro && timeskip != null) skipEpisodeIntroOrOutro()
+                if (user && autoSkipIntroAndOutro && timeskip != null && (currentTime >= episodeIntro.start + 4)) { // adds 4 seconds to show btn animation
+                    skipEpisodeIntroOrOutro()
+                }
             }
             else if (episodeOutro && currentTime >= episodeOutro.start && currentTime < episodeOutro.end) {
                 if (timeskip == null) setTimeskip(() => episodeOutro.end)
-                if (user && autoSkipIntroAndOutro && timeskip != null) skipEpisodeIntroOrOutro()
+                if (user && autoSkipIntroAndOutro && timeskip != null && (currentTime >= episodeOutro.start + 4)) { // adds 4 seconds to show btn animation
+                    skipEpisodeIntroOrOutro()
+                }
             }
             else {
                 setTimeskip(null)
@@ -312,8 +316,6 @@ function Player({
 
     }, [user, loading, episodeId])
 
-    console.log(episodeImg)
-
     useEffect(() => {
 
         getNextEpisode()
@@ -324,7 +326,6 @@ function Player({
         (!loading && subList) && (
             <MediaPlayer
                 playsInline
-                crossOrigin={"use-credentials"}
                 className={styles.container}
                 title={media.title.romaji}
                 src={videoSource}
@@ -344,11 +345,22 @@ function Player({
                             id={styles.skip_btn}
                             onClick={() => skipEpisodeIntroOrOutro()}
                             initial={{ opacity: 0 }}
-                            animate={{ opacity: 1, transition: { animation: 1.5 } }}
+                            animate={{ opacity: 1, transition: { duration: 1.5 } }}
                             exit={{ opacity: 0 }}
                             whileTap={{ scale: 0.95 }}
                         >
-                            <SkipSvg width={16} height={16} /> {autoSkipIntroAndOutro ? "Auto Skip" : "Skip"}
+                            <motion.span
+                                className={styles.moving_bar}
+                                initial={{ scaleX: 0 }}
+                                animate={autoSkipIntroAndOutro ?
+                                    { scaleX: 1, transition: { duration: 4 } }
+                                    :
+                                    { scaleX: 1, backgroundColor: "transparent" }
+                                }
+                            />
+                            <motion.span className={styles.btn_text}>
+                                {autoSkipIntroAndOutro ? "Auto Skip" : "Skip"} <SkipSvg width={16} height={16} />
+                            </motion.span>
                         </motion.button>
 
                     )}
@@ -360,11 +372,11 @@ function Player({
                         id={styles.next_episode_btn}
                         onClick={() => nextEpisodeAction()}
                         initial={{ opacity: 0 }}
-                        animate={{ opacity: 1, transition: { animation: 1.5 } }}
+                        animate={{ opacity: 1, transition: { duration: 1.5 } }}
                         exit={{ opacity: 0 }}
                         whileTap={{ scale: 0.95 }}
                     >
-                        <NextSvg width={16} height={16} /> Next Episode
+                        <PlaySvg width={16} height={16} /> Next Episode
                     </motion.button>
 
                 )}