feat: update changelogs (#34)

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/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 () {