Merge pull request #12 from jhassan8/bug/QN900A

fix: update keys, player and performance improvement
jhassan8 · Apr 29, 2023 · b0090b5 · b0090b5
2 parents 88ce593 + eadd36a
commit b0090b5
Show file tree

Hide file tree

Showing 21 changed files with 384 additions and 130 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
 .project
 .settings/
-dist
+dist
+.sign
+.package
diff --git a/Crunchyroll.wgt b/Crunchyroll.wgt
diff --git a/README.md b/README.md
@@ -16,11 +16,11 @@
 - [x] Search element
 
 #### In progress
+- [ ] Auto next episode
+- [ ] Change audio and subtitles language inside player
 - [ ] Browse elements by categories
 
 #### Pending
-- [ ] Auto next episode
-- [ ] Change audio and subtitles language inside player
 - [ ] History screen
 - [ ] My list screen and workflow
 - [ ] Settings screen
@@ -44,4 +44,11 @@
     - Right click on the project
     - Configure
     - Convert To Tizen Project
-8. The app opens on the TV and will be installed.
+8. The app opens on the TV and will be installed.
+
+## Instalation CLI
+
+1. Set tizen var
+    - Linux: ```export PATH=$PATH:<your_tizen_path>/tizen-studio/tools/ide/bin```
+    - Windows: ```set PATH=%PATH%;<your_tizen_path>/tizen-studio/tools/ide/bin```
+2. In project folder run: ```npm run install --tv=<name_of_tv_device_manager>```
diff --git a/css/app.css b/css/app.css
@@ -70,4 +70,14 @@ body {
   font-size: 3rem;
   color: #fff;
   text-align: center;
+}
+
+#console {
+  width: 50%;
+  height: 50%;
+  color: #fff;
+  padding: 25px;
+  position: absolute;
+  z-index: 300;
+  overflow: auto;
 }
diff --git a/index.html b/index.html
@@ -28,6 +28,7 @@
   </head>
 
   <body onkeydown="app.keyDown(event)">
+    <!-- <div id="console"></div> -->
     <div id="error-screen">
       <div class="content">
         <div class="logo">
@@ -39,6 +40,7 @@
         </div>
       </div>
     </div>
+    <script src="server/js/core/hls.min.js"></script>
     <script src="server/js/core/jquery.min.js"></script>
     <script src="server/js/core/slick.min.js"></script>
     <script src="server/js/core/mappers/crunchyroll.js"></script>

diff --git a/js/keys.js b/js/keys.js
@@ -20,6 +20,7 @@ window.tvKey = {
   KEY_PAUSE: 19,
   KEY_RECORD: 416,
   KEY_PLAY: 415,
+  KEY_PLAY_PAUSE: 10252,
   KEY_STOP: 413,
   KEY_INFO: 457,
   KEY_LEFT: 37,

diff --git a/package.json b/package.json
@@ -4,14 +4,13 @@
   "description": "## Description:",
   "main": "index.js",
   "scripts": {
-    "build": "tizen build-web -opt -out dist -e package.json layouts.gif .gitignore *.md .github/*/* server/mock/*",
-    "package": "tizen package -t wgt -- dist",
-    "install-emulator": "tizen install -t T-samsung-7.0-x86 --name Crunchyroll.wgt",
-    "run-emulator": "tizen run -t T-samsung-7.0-x86 -p qXuEoRvlCp.Crunchyroll",
-    "install-tv": "tizen install -t UN65MU6100 --name Crunchyroll.wgt",
-    "run-tv": "tizen run -t UN65MU6100 -p qXuEoRvlCp.Crunchyroll",
-    "start": "npm run build && npm run package && npm run install-emulator && npm run run-emulator",
-    "start-tv": "npm run build && npm run package && npm run install-tv && npm run run-tv"
+    "build": "tizen build-web -opt -out dist -e package.json layouts.gif .gitignore *.md **.github/* server/mock/* **.git/*",
+    "package": "tizen package -t wgt -- dist -o .",
+    "install": "tizen install -t $npm_config_tv --name Crunchyroll.wgt",
+    "init": "tizen run -t $npm_config_tv -p qXuEoRvlCp.Crunchyroll",
+    "start-tv": "npm run build && npm run package && npm run install --tv=$npm_config_tv && npm run init --tv=$npm_config_tv",
+    "start": "npm run start-tv --tv=T-samsung-7.0-x86",
+    "run": "npm run start-tv --tv=LS27AM500NLXZB"
   },
   "repository": {
     "type": "git",

diff --git a/server/css/exit.css b/server/css/exit.css
@@ -5,6 +5,7 @@
   position: absolute;
   left: 0;
   top: 0;
+  z-index: 5;
 }
 
 #exit-screen .content {
@@ -51,5 +52,5 @@
 
 #exit-screen .button.selected {
   background: #f47521;
-  box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset;
+  /* box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset; */
 }
diff --git a/server/css/home.css b/server/css/home.css
@@ -26,13 +26,13 @@
 
 #home-screen .content {
   height: 100vh;
-  transition: margin 0.5s;
+  /* transition: margin 0.5s; */
 }
 
 #home-screen .content .details {
   height: 50vh;
   position: relative;
-  transition: all 0.5s;
+  /* transition: all 0.5s; */
   overflow: hidden;
 }
 
@@ -46,7 +46,7 @@
   top: 0;
   bottom: 0;
   margin: auto;
-  transition: all 0.5s;
+  /* transition: all 0.5s; */
   width: 60%;
   background: linear-gradient(
     90deg,
@@ -67,12 +67,29 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  box-shadow: 240px -200px 1000px 0 rgb(0, 0, 0) inset;
-  transition: background 0.5s;
+  background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(0,0,0,0) 50%);
+  /* box-shadow: 240px -200px 1000px 0 rgb(0, 0, 0) inset; */
+  /* transition: background 0.5s; */
+}
+
+#home-screen .content .details .background::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
+  z-index: 1;
+  /* box-shadow: 240px -200px 1000px 0 rgb(0, 0, 0) inset; */
+  /* transition: background 0.5s; */
 }
 
 #home-screen .content .details.full .background::after {
-  box-shadow: 760px -250px 1000px 0 rgba(0, 0, 0, 0.7) inset;
+  background: linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.50) 45%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%);
+  /* box-shadow: 760px -250px 1000px 0 rgba(0, 0, 0, 0.7) inset; */
+}
+
+#home-screen .content .details.full .background::before {
+  background: none;
 }
 
 #home-screen .content .details .background img {
@@ -95,16 +112,17 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  z-index: 1;
 }
 
 #home-screen .content .details .info .title {
   color: #fff;
   font-size: 5vh;
   font-weight: bolder;
   text-transform: uppercase;
-  text-shadow: #fff;
+  /* text-shadow: #fff;
   text-shadow: -1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff,
-    -1px -1px 0 #fff;
+    -1px -1px 0 #fff; */
   max-height: 200px;
 }
 
@@ -113,7 +131,7 @@
   font-size: 2.5vh;
   margin: 30px 0;
   max-height: 280px;
-  transition: max-height 1s;
+  /* transition: max-height 1s; */
 }
 
 #home-screen .content .details .info .description.hide {
@@ -151,9 +169,9 @@
 #home-screen .content .details .info .buttons a.selected {
   border: 2px solid rgb(244, 130, 33, 0.9);
   box-sizing: border-box;
-  box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset;
+  /* box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset; */
   color: rgb(250, 150, 60);
-  text-shadow: 0 0 25px #f47521, 0 0 15px #f47521, 0 0 15px #f47521;
+  /* text-shadow: 0 0 25px #f47521, 0 0 15px #f47521, 0 0 15px #f47521; */
   opacity: 1;
 }
 
@@ -162,7 +180,7 @@
   display: inline-block;
   cursor: pointer;
   margin: 0px 8px;
-  transition: 350ms all;
+  /* transition: 350ms all; */
   transform-origin: center left;
 }
 
@@ -196,7 +214,7 @@
     rgba(0, 0, 0, 0.9) 0%,
     rgba(0, 0, 0, 0) 100%
   );
-  transition: 450ms opacity;
+  /* transition: 450ms opacity; */
   color: #ecf0f1;
 }
 
@@ -267,7 +285,7 @@
   top: 0;
   margin-left: 8.3vw;
   box-sizing: border-box;
-  box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset;
+  /* box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset; */
 }
 
 #home-screen .content .row .row-content.episode.selected::after {
@@ -339,14 +357,14 @@
 .home_details-screen.home_details-screen_buttons a.selected {
   border: 2px solid rgb(244, 130, 33, 0.9);
   box-sizing: border-box;
-  box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset;
+  /* box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset; */
   opacity: 1;
 }
 
 .home_details-screen.home_details-screen_buttons a.selected p,
 .home_details-screen.home_details-screen_buttons a.selected i {
   color: rgb(250, 150, 60);
-  text-shadow: 0 0 25px #f47521, 0 0 15px #f47521, 0 0 15px #f47521;
+  /* text-shadow: 0 0 25px #f47521, 0 0 15px #f47521, 0 0 15px #f47521; */
   opacity: 1;
 }
 
@@ -387,8 +405,8 @@
 
 .home_episodes-screen.home_episodes-screen_content .seasons .title {
   color: #fff;
-  text-shadow: -1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff,
-    -1px -1px 0 #fff;
+  /* text-shadow: -1px 1px 0 #fff, 1px 1px 0 #fff, 1px -1px 0 #fff,
+    -1px -1px 0 #fff; */
   text-transform: uppercase;
   font-weight: bolder;
   font-size: 5vh;
@@ -420,7 +438,7 @@
   .seasons
   .seasons-list
   .season.selected {
-  box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset;
+  /* box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset; */
   border: 2px solid rgb(244, 130, 33, 0.9);
   filter: grayscale(1);
   opacity: 0.5;
@@ -467,7 +485,7 @@
   top: 0;
   margin-left: -5px;
   box-sizing: border-box;
-  box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset;
+  /* box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset; */
   margin-top: 25px;
   opacity: 0;
 }
@@ -484,7 +502,7 @@
   .episodes-list
   .slick-slide {
   opacity: 0.5;
-  transition: all 0.5s;
+  /* transition: all 0.5s; */
 }
 
 .home_episodes-screen.home_episodes-screen_content

diff --git a/server/css/keyboard.css b/server/css/keyboard.css
@@ -104,7 +104,7 @@
   position: absolute;
   bottom: -0.3rem;
   left: 0;
-  box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset;
+  /* box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset; */
 }
 
 #keyboard-screen .col.size-5.selected::before {

diff --git a/server/css/login.css b/server/css/login.css
@@ -40,7 +40,7 @@
   position: relative;
   display: flex;
   margin: 0 auto;
-  transition: border-color 0.2s cubic-bezier(0.5, 0, 0.25, 1);
+  /* transition: border-color 0.2s cubic-bezier(0.5, 0, 0.25, 1); */
   padding: 5px 15px;
   margin: 20px 0;
 }
@@ -57,7 +57,7 @@
 
 #login-screen .content .box .form .input.focus::after {
   background: #f47521;
-  box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset;
+  /* box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset; */
 }
 
 #login-screen .content .box .form .input input {
@@ -87,5 +87,5 @@
 
 #login-screen .content .box .form .button.focus {
   background: #f47521;
-  box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset;
+  /* box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset; */
 }
diff --git a/server/css/menu.css b/server/css/menu.css
@@ -10,7 +10,7 @@
   height: 100%;
   width: 150px;
   padding: 50px 35px 50px 65px;
-  transition: all 0.3s;
+  /* transition: all 0.3s; */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -45,7 +45,7 @@
   margin: 0;
   line-height: 22px;
   text-transform: uppercase;
-  transition: width 0.3s;
+  /* transition: width 0.3s; */
   white-space: nowrap;
   color: #fff;
   font-size: 18px;
@@ -90,7 +90,7 @@
   margin-left: 20px;
   line-height: 22px;
   text-transform: uppercase;
-  transition: width 0.3s;
+  /* transition: width 0.3s; */
   white-space: nowrap;
 }
 
@@ -106,7 +106,7 @@
 #menu-screen .content .tools .option.focus::after {
   content: "";
   background: #f47521;
-  box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset;
+  /* box-shadow: 0 0 25px 6px #f47521, 0 0 15px 6px #f47521 inset; */
   width: 10px;
   height: calc(100% + 30px);
   position: absolute;