feat: browse screen (#46)

* create browse screen * Update browse.css * browse update * browse action * lazy load in browse list and some fix --------- Co-authored-by: MilagrosHassan <[email protected]>
jhassan8 · Sep 9, 2023 · 0756aba · 0756aba
1 parent 4e37330
commit 0756aba
Show file tree

Hide file tree

Showing 14 changed files with 732 additions and 230 deletions.
diff --git a/index.html b/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/browse.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" />
@@ -59,6 +60,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/browse.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>

diff --git a/server/css/browse.css b/server/css/browse.css
@@ -0,0 +1,67 @@
+#browse-screen {
+  width: 100%;
+  height: 100%;
+  background: #000;
+  overflow: hidden;
+}
+
+#browse-screen .content {
+  height: 100vh;
+}
+
+#browse-screen .content #browse-background {
+  position: absolute;
+  top: 0;
+  left: 0;
+  min-width: 100%;
+  min-height: 100%;
+  object-fit: cover;
+}
+
+#browse-screen .content #browse-menu {
+  background: black;
+  width: 60%;
+  height: 100%;
+  background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 100%);
+  padding-left: 60px;
+  position: absolute;
+}
+
+#browse-screen .content #browse-menu .title {
+  color: white;
+  font-size: 50px;
+  padding: 30px;
+}
+
+#browse-screen .content #browse-menu .browse-content {
+  overflow: hidden;
+}
+
+#browse-screen .content #browse-menu .browse-content-wrapper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+#browse-screen .item {
+  color: white;
+  font-size: 50px;
+  margin: 50px 0;
+  opacity: 0.2;
+  display: flex;
+  align-items: center;
+}
+
+#browse-screen .item img{
+  height: 40px;
+  margin-right: 10px;
+} 
+
+#browse-screen .item.focus {
+  opacity: 1;
+  font-size: 65px;
+}
+
+#browse-screen .item.focus img {
+  height: 55px;
+}
diff --git a/server/css/changelog.css b/server/css/changelog.css
@@ -15,7 +15,7 @@
 #changelog-modal .content {
   width: 40%;
   height: 50%;
-  background: rgb(0, 0, 0, 0.8);
+  background: rgba(0, 0, 0, 0.8);
   padding: 20px 40px;
   display: flex;
   flex-direction: column;

diff --git a/server/css/exit.css b/server/css/exit.css
@@ -36,6 +36,7 @@
 #exit-screen .buttons {
   padding: 5px;
   display: flex;
+  justify-content: space-between;
   justify-content: space-evenly;
 }
 

diff --git a/server/css/history.css b/server/css/history.css
@@ -65,7 +65,7 @@
   top: 0;
   left: 0;
   box-sizing: border-box;
-  border: 3px solid rgb(244, 130, 33, 0.9);
+  border: 3px solid rgba(244, 130, 33, 0.9);
   /* box-shadow: 0 0 25px 6px #727272, 0 0 15px 6px #727272 inset; */
 }
 

diff --git a/server/css/home.css b/server/css/home.css
@@ -173,7 +173,7 @@
 }
 
 #home-screen .content .details .info .buttons a.selected {
-  border: 2px solid rgb(244, 130, 33, 0.9);
+  border: 2px solid rgba(244, 130, 33, 0.9);
   box-sizing: border-box;
   /* box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset; */
   color: rgb(250, 150, 60);
@@ -304,7 +304,7 @@
 
 #home-screen .content .row .row-content.selected::after {
   content: "";
-  border: 6px solid rgb(244, 130, 33, 0.9);
+  border: 6px solid rgba(244, 130, 33, 0.9);
   width: 196px;
   height: 100%;
   position: absolute;
@@ -381,7 +381,7 @@
 }
 
 .home_details-screen.home_details-screen_buttons a.selected {
-  border: 2px solid rgb(244, 130, 33, 0.9);
+  border: 2px solid rgba(244, 130, 33, 0.9);
   box-sizing: border-box;
   /* box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset; */
   opacity: 1;
@@ -496,7 +496,7 @@
   .seasons.active
   .seasons-list
   .season.selected {
-  border: 2px solid rgb(244, 130, 33, 0.9);
+  border: 2px solid rgba(244, 130, 33, 0.9);
   /* box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset; */
   opacity: 1;
 }
@@ -527,7 +527,7 @@
   .episodes
   .episodes-list::after {
   content: "";
-  border: 2px solid rgb(244, 130, 33, 0.9);
+  border: 2px solid rgba(244, 130, 33, 0.9);
   width: 100%;
   height: 215px;
   position: absolute;
@@ -667,3 +667,61 @@
   font-size: 1.4rem;
   padding: 15px 0;
 }
+
+.browse-back {
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 125px;
+  z-index: 1;
+  opacity: 0.5;
+}
+
+.home_details-screen .browse-back {
+  display: none;
+}
+
+.browse-back span {
+  position: absolute;
+  width: 150px;
+  height: 3px;
+  margin: auto 0;
+  top: 0;
+  bottom: 0;
+  margin-left: 10px;
+}
+
+.browse-back span:after {
+  transform: rotate(82deg);
+  transform-origin: 11px 12px;
+  content: "";
+  display: inline-block;
+  position: absolute;
+  background-color: #fff;
+  width: 100%;
+  height: 100%;
+}
+
+.browse-back span:before {
+  transform: rotate(-82deg);
+  transform-origin: 10px -8px;
+  content: "";
+  display: inline-block;
+  position: absolute;
+  background-color: #fff;
+  width: 100%;
+  height: 100%;
+}
+
+.browse-back p {
+  color: #fff;
+  font-size: 30px;
+  letter-spacing: 30px;
+  position: absolute;
+  text-align: center;
+  transform: rotate(90deg);
+  width: 100vh;
+  transform-origin: 50px 50px;
+  margin-left: 10px;
+}
diff --git a/server/css/search.css b/server/css/search.css
@@ -58,9 +58,13 @@
 }
 
 #search-screen .content .list-container .list-container-over {
-  display: grid;
+  /* FORCE FOR OLD VERSION OF TIZEN*/
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -30px;
+  /* display: grid;
   grid-template-columns: repeat(6, 1fr);
-  grid-gap: 30px;
+  grid-gap: 30px; */
   /* transition: margin 100ms ease-out; */
 }
 
@@ -89,6 +93,10 @@
   background: rgba(100, 100, 100, 0.5);
   opacity: 0.5;
   position: relative;
+  /* FORCE FOR OLD VERSION OF TIZEN*/
+  max-width: 160px;
+  margin-bottom: 30px;
+  margin-left: 30px;
 }
 
 #search-screen .content .list-container .list-container-over .item .title {
@@ -133,5 +141,5 @@
 }
 
 #search-screen .content .list-container.focus .list-container-over .item.selected::after{
-  border: 3px solid rgb(244, 130, 33, 0.9);
+  border: 3px solid rgba(244, 130, 33, 0.9);
 }
diff --git a/server/js/core/mappers/crunchyroll.js b/server/js/core/mappers/crunchyroll.js
@@ -1,5 +1,6 @@
 window.mapper = {
   loaded: 0,
+  loadedSubcategories: 0,
 
   home: function (response, callback) {
     var lists = response.data.filter((element) =>
@@ -49,7 +50,9 @@ window.mapper = {
                 display = "episode";
                 id = item.panel.id;
                 playhead = item.playhead ? Math.round(item.playhead / 60) : 0;
-                duration = Math.round(item.panel.movie_metadata.duration_ms / 60000);
+                duration = Math.round(
+                  item.panel.movie_metadata.duration_ms / 60000
+                );
                 title = item.panel.title;
                 description = item.panel.description;
                 background = mapper.preventImageErrorTest(function () {
@@ -104,7 +107,10 @@ window.mapper = {
             };
           });
           mapper.loaded++;
-          mapper.loaded === lists.length && callback.success();
+          if(mapper.loaded === lists.length) {
+            home.data.main.lists = home.data.main.lists.filter(e => e.items.length > 0);
+            callback.success();
+          }
         },
       });
     }
@@ -248,7 +254,6 @@ window.mapper = {
   },
 
   history: function (response) {
-    console.log("success", response);
     return response.data
       .filter((element) => element.panel)
       .map((element) => ({
@@ -279,4 +284,81 @@ window.mapper = {
       return `https://dummyimage.com/600x400/f48321/fff.png&text=IMAGE+${id}`;
     }
   },
+
+  listByCategories: function (id, subcategories, callback) {
+    home.data.main = {
+      category: subcategories[0].parent_category,
+      banner: {
+        id: "",
+        title: "",
+        description: "",
+        background: "",
+      },
+      lists: subcategories.map((subcategory) => ({
+        lazy: true,
+        id: subcategory.tenant_category,
+        title: subcategory.localization.description,
+        items: [],
+      })),
+    };
+
+    mapper.loadedSubcategories = 0;
+    for (var index = 0; index < subcategories.length; index++) {
+      mapper.loadCategoryListAsync(
+        `${id},${subcategories[index].tenant_category}`,
+        0,
+        20,
+        index,
+        {
+          success: function (response, listPosition) {
+            home.data.main.lists[listPosition].items = mapper.mapItems(
+              response.items
+            );
+            mapper.loadedSubcategories++;
+            if (mapper.loadedSubcategories === subcategories.length) {
+              home.data.main.lists = home.data.main.lists.filter(e => e.items.length > 0);
+              home.data.main.banner =
+                home.data.main.lists[listPosition].items[0];
+              callback.success();
+            }
+          },
+          error: function (error) {
+            console.log("fail on load subcategorie list.", error);
+          },
+        }
+      );
+    }
+  },
+
+  mapItems: function (items) {
+    return items.map((item) => ({
+      background: item.images.poster_wide[0][4].source,
+      description: item.description,
+      poster: item.images.poster_tall[0][2].source,
+      display: "serie",
+      id: item.id,
+      type: item.type,
+      title: item.title,
+    }));
+  },
+
+  loadCategoryListAsync: function (categories, offset, size, index, callback) {
+    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");
+
+        return fetch(
+          `${service.api.url}/content/v1/browse?categories=${categories}&n=${size}&start=${offset}`,
+          { headers: headers }
+        )
+          .then((response) => response.json())
+          .then((json) => callback.success(json, index))
+          .catch((error) => {
+            callback.error(error);
+          });
+      },
+    });
+  },
 };
diff --git a/server/js/core/service.js b/server/js/core/service.js
@@ -286,6 +286,25 @@ window.service = {
       .catch((error) => request.error(error));
   },
 
+  categories: 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/tenant_categories?include_subcategories=true&locale=${storage.account.language}`,
+          {
+            headers: headers,
+          }
+        )
+          .then((response) => response.json())
+          .then((json) => request.success(json))
+          .catch((error) => request.error(error));
+      },
+    });
+  },
+
   format: function (params) {
     return Object.keys(params)
       .map(function (k) {