v1.1

index.html

@@ -24,6 +24,7 @@
     <link rel="stylesheet" href="server/css/login.css" />
     <link rel="stylesheet" href="server/css/search.css" />
     <link rel="stylesheet" href="server/css/history.css" />
+    <link rel="stylesheet" href="server/css/changelog.css" />
     <link rel="stylesheet" href="server/css/home.css" />
     <link rel="stylesheet" href="server/css/video.css" />
     <link rel="stylesheet" href="server/css/keyboard.css" />
@@ -58,6 +59,7 @@
     <script src="server/js/screen/login.js"></script>
     <script src="server/js/screen/search.js"></script>
     <script src="server/js/screen/history.js"></script>
+    <script src="server/js/screen/changelog.js"></script>
     <script src="server/js/screen/home.js"></script>
     <script src="server/js/screen/home.details.js"></script>
     <script src="server/js/screen/home.episodes.js"></script>

server/css/changelog.css

@@ -0,0 +1,74 @@
+#changelog-modal {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.6);
+  overflow: hidden;
+  z-index: 200;
+  position: absolute;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#changelog-modal .content {
+  width: 40%;
+  height: 50%;
+  background: rgb(0, 0, 0, 0.8);
+  padding: 20px 40px;
+  display: flex;
+  flex-direction: column;
+  color: #fff;
+  font-size: 16px;
+  border-radius: 10px;
+}
+
+#changelog-modal .content .header {
+  font-size: 30px;
+  font-weight: bold;
+}
+
+#changelog-modal .content .body {
+  position: relative;
+  flex: 1;
+}
+
+#changelog-modal .content .extra {
+  bottom: 30px;
+  position: absolute;
+  font-size: 13px;
+}
+
+#changelog-modal .content .body .changes {
+  list-style: square;
+  padding: 20px 0;
+  margin: 0;
+}
+
+#changelog-modal .content .body .changes li {
+  margin: 15px 0;
+}
+
+#changelog-modal .content .body .changes li .change-title {
+  font-size: 22px;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+#changelog-modal .content .footer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+#changelog-modal .content .footer .button {
+  display: block;
+  width: 150px;
+  color: rgb(0, 0, 0);
+  background: rgb(244, 117, 33);
+  font-size: 2rem;
+  font-weight: bold;
+  padding: 10px 20px;
+  border-radius: 5px;
+  text-align: center;
+}

server/css/video.css

@@ -49,6 +49,7 @@
   font-size: 5.8vh;
   font-weight: bold;
   color: #fff;
+  max-width: 75%;
 }
 
 #video-screen .osd .details #subtitle {
@@ -362,3 +363,21 @@
   text-align: center;
   line-height: 85px;
 }
+
+#video-screen #skip-intro {
+  background: rgba(0, 0, 0, 0.4);
+  padding: 15px 30px;
+  z-index: 2;
+  right: 100px;
+  position: absolute;
+  bottom: 0;
+  margin-bottom: 250px;
+  font-size: 35px;
+  color: #fff;
+  border-radius: 5px;
+  display: none;
+}
+
+#video-screen #skip-intro i {
+  margin-right: 15px;
+}

server/js/core/player.js

@@ -269,6 +269,10 @@ window.player = {
     }, 500);
   },
 
+  forwardTo: function (seconds) {
+    player.getVideo().currentTime = seconds;
+  },
+
   stop: function () {
     if (player.state != player.states.STOPPED) {
       player.plugin.stopLoad();

server/js/core/service.js

@@ -277,6 +277,15 @@ window.service = {
       .catch((error) => request.error(error));
   },
 
+  intro: function (request) {
+    fetch(
+      `https://static.crunchyroll.com/datalab-intro-v2/${request.data.id}.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) {

server/js/core/session.js

@@ -13,6 +13,7 @@ window.session = {
     },
   },
   storage: {
+    version: NaN,
     account: {
       password: NaN,
       username: NaN,

server/js/main.js

@@ -67,6 +67,9 @@ window.main = {
         exit.init();
       } else {
         switch (main.state) {
+          case changelog.id:
+            changelog.keyDown(event);
+            break;
           case loading.id:
             loading.keyDown(event);
             break;

server/js/screen/changelog.js

@@ -0,0 +1,84 @@
+window.changelog = {
+  id: "changelog-modal",
+  data: {
+    version: "v1.1",
+    changes: [
+      {
+        title: "feat: update changelogs",
+        description: "You will now receive a report like this with each update.",
+      },
+      {
+        title: "feat: skip intro beta version",
+        description: "Anime without delays! Skip the intro with just one button. More action, less waiting.",
+      },
+      {
+        title: "fix: solve error when video versions is null",
+        description: "Playback issues have been resolved in certain anime titles, such as \"The Marginal Service\".",
+      },
+    ],
+    extra: "If you have any issues or suggestions, you can report them on the GitHub jhassan8/crunchyroll-tizen.",
+  },
+
+  init: function () {
+    if (session.storage.version !== changelog.data.version) {
+      var changelog_element = document.createElement("div");
+      changelog_element.id = changelog.id;
+
+      changelog_element.innerHTML = `
+      <div class="content">
+        <div class="header">
+          Crunchyroll ${changelog.data.version}
+        </div>
+        <div class="body">
+          <ul class="changes">
+            ${changelog.getChanges()}
+          </ul>
+          <div class="extra">
+            ${changelog.data.extra}
+          </div>
+        </div>
+        <div class="footer">
+          <a class="button ${login.id}-option" translate>OK</a>
+        </div>
+      </div>`;
+
+      session.storage.version = changelog.data.version;
+      session.update();
+
+      document.body.appendChild(changelog_element);
+      main.state = changelog.id;
+    }
+  },
+
+  destroy: function () {
+    main.state = home.id;
+    document.body.removeChild(document.getElementById(changelog.id));
+  },
+
+  getChanges: function (item) {
+    var content_changes = "";
+    changelog.data.changes.forEach((element) => {
+      content_changes += `
+      <li>
+        <div class="change-title">
+          ${element.title}
+        </div>
+        <div class="change-description">
+          ${element.description} 
+        </div>
+      </li>`;
+    });
+    return content_changes;
+  },
+
+  keyDown: function (event) {
+    switch (event.keyCode) {
+      case tvKey.KEY_PANEL_ENTER:
+      case tvKey.KEY_ENTER:
+      case tvKey.KEY_BACK:
+      case 27:
+        changelog.destroy();
+        break;
+    }
+  },
+};

server/js/screen/home.js

@@ -107,6 +107,7 @@ init: function () {
   $(`#${home.id} .rows .row-content`)[0].slick.slickGoTo(0);
 
   main.state = home.id;
+  changelog.init();
 },
 
 destroy: function () {

server/js/screen/video.js

@@ -20,6 +20,7 @@ window.video = {
   subtitle: null,
   audios: [],
   audio: null,
+  intro: null,
   streams: [],
   timers: {
     history: {
@@ -77,6 +78,12 @@ window.video = {
           <div id="next-episode-count">${video.next.time}</div>
         </div>
       </div>
+
+      <div id="skip-intro">
+        <i class="fa-solid fa-forward"></i>
+        SKIP INTRO
+      </div>
+
       <div class="settings-slide">
         <div id="languages-content">
           <div class="title">Audios</div>
@@ -162,6 +169,9 @@ window.video = {
               ? video.changeAudio(options.index(selected[0]))
               : video.changeSubtitle(options.index(selected[0]));
           }
+        } if(video.intro && video.intro.state) {
+          osd = false;
+          player.forwardTo(video.intro.end);
         } else {
           if (video.next.status) {
             clearInterval(video.timers.next);
@@ -276,6 +286,7 @@ window.video = {
       },
       success: function (data) {
         video.stopNext();
+        video.setSkipIntro(item.id);
         video.next.shown = false;
         try {
           video.streams = data.streams.adaptive_hls;
@@ -288,10 +299,15 @@ window.video = {
           }
 
           video.audio = data.audio_locale;
-          video.audios = data.versions.map((element) => ({
-            name: element.audio_locale,
-            id: element.media_guid,
-          }));
+          video.audios = [{ name: video.audio, id: 0 }];
+
+          if (data.versions) {
+            video.audios = data.versions.map((element) => ({
+              name: element.audio_locale,
+              id: element.media_guid,
+            }));
+          }
+
           video.subtitle = lang;
           video.subtitles = Object.keys(video.streams).map((element) => ({
             name: element,
@@ -318,6 +334,40 @@ window.video = {
     });
   },
 
+  setSkipIntro: function (id) {
+    service.intro({
+      data: {
+        id,
+      },
+      success: function (data) {
+        if (data.duration && data.duration > 10) {
+          video.intro = {
+            start: data.startTime + 2,
+            end: data.endTime - 2,
+            state: false,
+          };
+        } else {
+          video.intro = null;
+        }
+      },
+      error: function (error) {
+        console.log(error);
+      },
+    });
+  },
+
+  showSkip: function (time) {
+    if (time > video.intro.end) {
+      video.intro.state = false;
+      $("#skip-intro").hide();
+    } else {
+      if (!video.intro.state && time > video.intro.start && time < video.intro.end) {
+        video.intro.state = true;
+        $("#skip-intro").show();
+      }
+    }
+  },
+
   setAudios: function () {
     $("#audios li").remove();
     var audios = "";
@@ -465,6 +515,8 @@ window.video = {
     var totalTime = player.getDuration();
     var timePercent = (100 * time) / totalTime;
 
+    video.intro && video.showSkip(time);
+
     if (
       !video.next.shown &&
       player.state === player.states.PLAYING &&