Merge pull request #27 from jhassan8/feature/video-languages

feature: video languages
jhassan8 · Jun 3, 2023 · e68a955 · e68a955
2 parents f59c330 + 84b5a34
commit e68a955
Show file tree

Hide file tree

Showing 6 changed files with 332 additions and 28 deletions.
diff --git a/Crunchyroll.wgt b/Crunchyroll.wgt
diff --git a/server/css/video.css b/server/css/video.css
@@ -46,7 +46,7 @@
 
 #video-screen .osd .details #title {
   padding: 1rem 0;
-  font-size: 10vh;
+  font-size: 5.8vh;
   font-weight: bold;
   color: #fff;
 }
@@ -65,6 +65,100 @@
   color: #fff;
 }
 
+#video-screen .osd .player-settings {
+  position: absolute;
+  right: 0;
+  padding: 60px;
+}
+
+#video-screen .osd .player-settings i {
+  color: #fff;
+  font-size: 45px;
+  opacity: 0.5;
+}
+
+#video-screen .osd .player-settings i.selected {
+  opacity: 1;
+}
+
+#video-screen .settings-slide {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  background: linear-gradient(
+    90deg,
+    rgba(0, 0, 0, 0) 0%,
+    rgba(0, 0, 0, 0.8043418050814075) 70%,
+    rgba(0, 0, 0, 0.7959384437368697) 100%
+  );
+  display: none;
+}
+
+#video-screen .settings-slide.open {
+  display: block;
+}
+
+#languages-content {
+  width: 50%;
+  height: 100%;
+  right: 0;
+  position: absolute;
+  margin: 0;
+  padding: 100px;
+  padding-left: 200px;
+}
+
+#languages-content #audios,
+#languages-content #subtitles {
+  padding: 0;
+  height: 370px;
+  overflow: hidden;
+  list-style: none;
+}
+
+#languages-content #subtitles {
+  height: 290px;
+}
+
+#languages-content .title {
+  color: white;
+  font-size: 35px;
+  text-transform: uppercase;
+  margin: 30px 0;
+}
+
+#languages-content .option {
+  font-size: 35px;
+  color: white;
+  opacity: 0.5;
+  padding: 15px;
+  padding-left: 62px;
+  position: relative;
+  margin: 5px 0;
+  border: 2px solid transparent;
+}
+
+#languages-content .option:first-child {
+  margin-top: 0;
+}
+
+#languages-content .option.selected {
+  border: 2px solid rgba(244, 130, 33, 0.9);
+  opacity: 1;
+}
+
+#languages-content .option.active::after {
+  content: "";
+  position: absolute;
+  border-left: 10px solid white;
+  border-bottom: 10px solid transparent;
+  border-top: 10px solid transparent;
+  left: 30px;
+  top: 27px;
+}
+
 #video-screen .icon-status {
   position: absolute;
   left: 0;
@@ -226,7 +320,11 @@
   position: absolute;
   right: 0;
   bottom: 0;
-  background: linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
+  background: linear-gradient(
+    270deg,
+    rgba(0, 0, 0, 1) 0%,
+    rgba(0, 0, 0, 0) 100%
+  );
   height: 200px;
   width: 410px;
   margin-bottom: 140px;

diff --git a/server/js/core/player.js b/server/js/core/player.js
@@ -37,7 +37,7 @@ window.player = {
     return player.getVideo().duration;
   },
 
-  play: function (url, playhead) {
+  play: function (url, playhead, noplay) {
     if (Hls.isSupported()) {
       player.plugin = new Hls();
       player.plugin.loadSource(url);
@@ -209,8 +209,10 @@ window.player = {
     if (playhead && playhead > 0) {
       player.getVideo().currentTime = playhead * 60;
     }
-    player.getVideo().play();
-    player.state = player.states.PLAYING;
+    if (!noplay) {
+      player.getVideo().play();
+      player.state = player.states.PLAYING;
+    }
   },
 
   pause: function () {

diff --git a/server/js/core/service.js b/server/js/core/service.js
@@ -260,7 +260,7 @@ window.service = {
           {
             method: "POST",
             headers: headers,
-            body: JSON.stringify(request.data)
+            body: JSON.stringify(request.data),
           }
         )
           .then((response) => response.text())
@@ -270,6 +270,13 @@ window.service = {
     });
   },
 
+  languages: function (request) {
+    fetch("https://static.crunchyroll.com/config/i18n/v3/audio_languages.json")
+      .then((response) => response.json())
+      .then((json) => request.success(json))
+      .catch((error) => request.error(error));
+  },
+
   format: function (params) {
     return Object.keys(params)
       .map(function (k) {

diff --git a/server/js/core/session.js b/server/js/core/session.js
@@ -1,4 +1,5 @@
 window.session = {
+  languages: {},
   info: {
     id: undefined,
     device: undefined,
@@ -35,6 +36,17 @@ window.session = {
   },
 
   init: function () {
+    service.languages({
+      success: function (response) {
+        session.languages = response;
+        session.languages["ja-JP"] = "Japanese";
+        session.languages[""] = "Disabled";
+      },
+      error: function (error) {
+        console.log(error);
+      },
+    });
+
     var storage = localStorage.getItem("session");
     if (storage) {
       try {