feature/search

README.md

@@ -13,12 +13,13 @@
 - [x] Episodes screen
 - [x] Video player
 - [x] Menu options screen
+- [x] Search element
 
 #### In progress
 - [ ] Browse elements by categories
-- [ ] Search element
 
 #### Pending
+- [ ] Auto next episode
 - [ ] Change audio and subtitles language inside player
 - [ ] History screen
 - [ ] My list screen and workflow

index.html

@@ -20,6 +20,7 @@
     <link rel="stylesheet" href="server/css/loading.css" />
     <link rel="stylesheet" href="server/css/exit.css" />
     <link rel="stylesheet" href="server/css/login.css" />
+    <link rel="stylesheet" href="server/css/search.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" />
@@ -49,6 +50,7 @@
     <script src="server/js/screen/loading.js"></script>
     <script src="server/js/screen/exit.js"></script>
     <script src="server/js/screen/login.js"></script>
+    <script src="server/js/screen/search.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>

package.json

@@ -0,0 +1,22 @@
+{
+  "name": "crunchyroll-tizen",
+  "version": "1.0.0",
+  "description": "## Description:",
+  "main": "index.js",
+  "scripts": {
+    "package-app": "tizen package -t wgt",
+    "install-app": "tizen install -t T-samsung-7.0-x86 --name Crunchyroll.wgt",
+    "run-app": "tizen run -t T-samsung-7.0-x86 -p qXuEoRvlCp.Crunchyroll",
+    "start": "npm run package-app && npm run install-app && npm run run-app"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jhassan8/crunchyroll-tizen.git"
+  },
+  "author": "jhassan8",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/jhassan8/crunchyroll-tizen/issues"
+  },
+  "homepage": "https://github.com/jhassan8/crunchyroll-tizen"
+}

server/css/home.css

@@ -5,7 +5,7 @@
   overflow: hidden;
 }
 
-#home-screen .logo-fixed {
+.logo-fixed {
   position: fixed;
   right: 0;
   bottom: 0;
@@ -19,7 +19,7 @@
   z-index: 1;
 }
 
-#home-screen .logo-fixed img {
+.logo-fixed img {
   width: 100%;
   opacity: 0.8;
 }

server/css/menu.css

@@ -3,6 +3,7 @@
   top: 0;
   height: 100%;
   position: absolute;
+  z-index: 1;
 }
 
 #menu-screen .content {

server/css/search.css

@@ -0,0 +1,98 @@
+#search-screen {
+  width: 100%;
+  height: 100%;
+  background: #000;
+  overflow: hidden;
+}
+
+#search-screen .content {
+  height: 100vh;
+  transition: margin 0.5s;
+  padding: 60px 60px 60px 8.5vw;
+}
+
+#search-screen .content .input {
+  position: relative;
+  display: flex;
+  margin: 0 auto;
+  transition: border-color 0.2s cubic-bezier(0.5, 0, 0.25, 1);
+  padding: 5px 15px;
+  width: 40%;
+  margin: auto;
+}
+
+#search-screen .content .input::after {
+  content: "";
+  width: 100%;
+  height: 0.3rem;
+  background: rgba(255, 255, 255, 0.5);
+  position: absolute;
+  bottom: -0.3rem;
+  left: 0px;
+}
+
+#search-screen .content .input.focus::after {
+  background: #f47521;
+  box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset;
+}
+
+#search-screen .content .input input {
+  border: none;
+  color: #fff;
+  display: block;
+  flex: 1 1 auto;
+  font-size: 2rem;
+  padding-bottom: 0.25rem;
+  padding-top: 0;
+  width: 100%;
+  background: transparent;
+  text-align: center;
+}
+
+#search-screen .content .list-container {
+  margin-top: 92px;
+  overflow: hidden;
+}
+
+#search-screen .content .list-container .list-container-over {
+  display: grid;
+  grid-template-columns: repeat(9, 1fr);
+  grid-gap: 31px;
+  transition: margin 0.5s;
+}
+
+#search-screen .content .list-container .list-container-over .item {
+  width: 161px;
+  opacity: 0.5;
+  position: relative;
+}
+
+#search-screen .content .list-container .list-container-over .item img {
+  width: 100%;
+  height: 100%;
+}
+
+#search-screen .content .list-container .list-container-over .item.selected {
+  opacity: 0.5;
+}
+
+#search-screen .content .list-container.focus .list-container-over .item.selected {
+  opacity: 1;
+}
+
+#search-screen .content .list-container .list-container-over .item.selected::after{
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  border: 3px solid rgb(114, 114, 114);
+  box-shadow: 0 0 25px 6px #727272, 0 0 15px 6px #727272 inset;
+}
+
+#search-screen .content .list-container.focus .list-container-over .item.selected::after{
+  border: 3px solid rgb(244, 130, 33, 0.9);
+  box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset;
+}

server/js/core/mappers/crunchyroll.js

@@ -15,6 +15,7 @@ crunchyroll.home = function (response, callback) {
 
   home.data.main = {
     banner: {
+      id: response.data[1].panel.id,
       title: response.data[1].panel.title,
       description: response.data[1].panel.description,
       background: response.data[1].panel.images.poster_wide[0][4].source,
@@ -134,3 +135,23 @@ crunchyroll.episodes = function (response) {
     premium: episode.is_premium_only,
   }));
 };
+
+crunchyroll.search = function (response) {
+  return response.items.reduce(
+    (acum, elem) =>
+      elem.type === "series" || elem.type === "movie_listing"
+        ? [
+            ...acum,
+            ...elem.items.map((item) => ({
+              display: "serie",
+              id: item.id,
+              title: item.title,
+              description: item.description,
+              background: item.images.poster_wide[0][5].source,
+              poster: item.images.poster_tall[0][2].source,
+            })),
+          ]
+        : acum,
+    []
+  );
+};

server/js/core/service.js

@@ -192,6 +192,25 @@ service.video = function (request) {
   });
 };
 
+service.search = function (request) {
+  return session.refresh({
+    success: function (storage) {
+      var headers = new Headers();
+      headers.append("Authorization", `Bearer ${storage.access_token}`);
+      headers.append("Content-Type", "application/x-www-form-urlencoded");
+      fetch(
+        `${service.api.url}/content/v1/search?q=${request.data.query}&type=series&n=100&locale=${storage.account.language}`,
+        {
+          headers: headers,
+        }
+      )
+        .then((response) => response.json())
+        .then((json) => request.success(json))
+        .catch((error) => request.error(error));
+    },
+  });
+};
+
 service.format = function (params) {
   return Object.keys(params)
     .map(function (k) {

server/js/main.js

@@ -37,6 +37,7 @@ main.events.home = function () {
         success: function () {
           loading.destroy();
           home.init();
+          menu.init();
         },
       });
     },
@@ -74,6 +75,9 @@ main.keyDown = function (event) {
       case menu.id:
         menu.keyDown(event);
         break;
+      case search.id:
+        search.keyDown(event);
+        break;
       case home.id:
         home.keyDown(event);
         break;

server/js/screen/exit.js

@@ -1,6 +1,6 @@
 var exit = {
   id: "exit-screen",
-  previus: null,
+  previous: null,
   selected: false,
 };
 
@@ -20,15 +20,15 @@ exit.init = function () {
     "</div>";
   document.body.appendChild(exit_element);
 
-  exit.previus = main.state;
+  exit.previous = main.state;
   main.state = exit.id;
   exit.move(false);
   //translate.init();
 };
 
 exit.destroy = function () {
   document.body.removeChild(document.getElementById(this.id));
-  main.state = exit.previus;
+  main.state = exit.previous;
 };
 
 exit.keyDown = function (event) {

server/js/screen/home.details.js

@@ -1,13 +1,20 @@
 home.details = {
   id: "home_details-screen",
-  previus: NaN,
+  previous: NaN,
   data: {
     this: NaN,
     continue: NaN,
   },
+  callbacks: {
+    init: NaN,
+    destroy: NaN
+  }
 };
 
-home.details.init = function (item) {  
+home.details.init = function (item, init, destroy) {
+  home.details.callbacks.init = init;
+  home.details.callbacks.destroy = destroy;
+  home.details.callbacks.init && home.details.callbacks.init(item);
   var buttons = document.createElement("div");
   buttons.className = `${home.details.id} ${home.details.id}_buttons`;
   buttons.innerHTML = `
@@ -62,7 +69,7 @@ home.details.init = function (item) {
   $(`#${home.id} .details`).addClass("full");
   $(`body`).addClass(`${home.details.id}`);
 
-  home.details.previus = main.state;
+  home.details.previous = main.state;
   main.state = home.details.id;
 };
 
@@ -73,7 +80,8 @@ home.details.destroy = function () {
   home.details.data.continue = NaN;
   home.details.data.this = NaN;
 
-  main.state = home.details.previus;
+  main.state = home.details.previous;
+  home.details.callbacks.destroy && home.details.callbacks.destroy();
 };
 
 home.details.keyDown = function (event) {

server/js/screen/home.episodes.js

@@ -1,6 +1,6 @@
 home.episodes = {
   id: "home_episodes-screen",
-  previus: NaN,
+  previous: NaN,
   data: {
     seasons: NaN,
     episodes: NaN,
@@ -47,7 +47,7 @@ home.episodes.init = function (item) {
 
   $(`body`).addClass(`${home.episodes.id}`);
 
-  home.episodes.previus = main.state;
+  home.episodes.previous = main.state;
   main.state = home.episodes.id;
 };
 
@@ -106,7 +106,7 @@ home.episodes.destroy = function () {
   setTimeout(() => {
     $(`body`).removeClass(`${home.episodes.id}`);
     $(`.${home.episodes.id}`).remove();
-    main.state = home.episodes.previus;
+    main.state = home.episodes.previous;
   }, 400);
 };
 

server/js/screen/home.js

@@ -94,11 +94,11 @@ home.init = function () {
   $(`#${home.id} .rows`)[0].slick.slickGoTo(0);
   $(`#${home.id} .rows .row-content`)[0].slick.slickGoTo(0);
 
-  menu.init();
   main.state = home.id;
 };
 
 home.destroy = function () {
+  this.position = 0;
   document.body.removeChild(document.getElementById(home.id));
 };
 
@@ -202,16 +202,13 @@ home.keyDown = function (event) {
       break;
     case tvKey.KEY_ENTER:
     case tvKey.KEY_PANEL_ENTER:
-      if (home.position > 0) {
-        var item =
-          home.position > 0
-            ? this.data.main.lists[home.position - 1].items[
-                $(".row-content")[home.position - 1].slick.currentSlide
-              ]
-            : home.data.main.banner;
-        home.details.init(item);
-      } else {
-      }
+      var item =
+        home.position > 0
+          ? this.data.main.lists[home.position - 1].items[
+              $(".row-content")[home.position - 1].slick.currentSlide
+            ]
+          : home.data.main.banner;
+      home.details.init(item);
       break;
   }
 };