Added parameters custom style to settings + 51009

Updatet animation load page code
AN0NCER · Oct 6, 2024 · 270b6ea · 270b6ea
1 parent c8e4df7
commit 270b6ea
Show file tree

Hide file tree

Showing 11 changed files with 208 additions and 130 deletions.
diff --git a/javascript/pages/anime/51009.js b/javascript/pages/anime/51009.js
@@ -0,0 +1,13 @@
+import { Screenshots } from "../watch/mod_resource.js";
+
+const url = "https://image.tmdb.org/t/p/original/fgPa2oJD8lbLaTanzlGDd32tqDE.jpg";
+
+$(`.page-loading`).css("--image", `url(${url})`);
+
+export default {
+    OnLoad: () => {
+        $('.galery-slider').prepend(`<div class="slide" data-id="${Screenshots.length}"><img src="${url}"></div>`);
+        $(`.galery-slider > .slide[data-id="${Screenshots.length - 1}"]`).click();
+        Screenshots.push({ original: url });
+    }
+}
diff --git a/javascript/pages/anime/51122.js b/javascript/pages/anime/51122.js
@@ -10,7 +10,7 @@ if (/Android|webOS|iPhone|iPad|iPod|Opera Mini/i.test(navigator.userAgent)) {
 const url = "https://image.tmdb.org/t/p/original/Ao8SbtYJbxBuzFTQFSdHF7lLmDE.jpg";
 const bg = "https://image.tmdb.org/t/p/original/iCqaGYVQw9MYZap5pNgTRkdPBWf.jpg";
 
-$(`.page-loading`).css({ "background": `linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1)), url('${load_image}') no-repeat center center / cover` });
+$(`.page-loading`).css("--image", `url(${load_image})`);
 
 export default {
     OnLoad: () => {

diff --git a/javascript/pages/settings.js b/javascript/pages/settings.js
@@ -92,6 +92,12 @@ const Parameters = [
                 name: 'Скрыть героев',
                 description: 'Позволяет пользователю убирать изображения персонажей для более нейтрального просмотра сайта.'
             },
+            {
+                type: 'boolean',
+                param: 'customstyle',
+                name: 'Кастомизация',
+                description: 'Включить кастомные стили для некоторых аниме.'
+            },
             // {
             //     type: 'boolean',
             //     param: '',

diff --git a/javascript/pages/watch.js b/javascript/pages/watch.js
@@ -29,11 +29,13 @@ import(`/javascript/pages/watch/mod_collection.js`);
 
 //Авторизируем пользователя
 Main(async (e) => {
-    try {
-        const data = await import(`/javascript/pages/anime/${$ID}.js`);
-        $RULES = data.default;
-        console.log(`[watch] - Custom RULES uploaded`);
-    } catch { }
+    if ($PARAMETERS.anime.customstyle) {
+        try {
+            const data = await import(`/javascript/pages/anime/${$ID}.js`);
+            $RULES = data.default;
+            console.log(`[watch] - Custom RULES uploaded`);
+        } catch { }
+    }
     //Проверка на существование такого ID
     const check = await CheckID($ID);
 

diff --git a/javascript/parametrs.js b/javascript/parametrs.js
@@ -9,6 +9,7 @@ const $PARAMETERS = {
     anime: {
         syncdata: true,
         hidehero: false,
+        customstyle: true,
     },
     watch: {
         dubanime: false,

diff --git a/style/css/list.css b/style/css/list.css
@@ -1055,7 +1055,6 @@ body.menuver[data-orientation="90"] .span-row {
 }
 .app > .wrapper .anime-content .anime-list .card-loader,
 .app > .wrapper .anime-content .anime-search-result .card-loader {
-  max-height: 200px;
   aspect-ratio: 1/1.44;
   border-radius: 4px;
   display: flex;

diff --git a/style/css/watch.css b/style/css/watch.css
@@ -21,10 +21,29 @@ body.loading {
   left: 0;
   width: 100%;
   height: 100dvh;
-  background: #101318;
   opacity: 1;
   z-index: 9999;
 }
+.page-loading::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: #101318;
+  z-index: 1;
+}
+.page-loading::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  background: linear-gradient(rgba(0, 0, 0, 0.5), rgb(0, 0, 0)), var(--image) center center/cover no-repeat;
+}
 .page-loading .loader {
   position: absolute;
   top: calc(50% - 32px);
@@ -33,6 +52,7 @@ body.loading {
   height: 64px;
   border-radius: 50%;
   perspective: 800px;
+  z-index: 3;
 }
 .page-loading .wrapper {
   max-width: 900px;
@@ -43,6 +63,7 @@ body.loading {
   width: 100%;
   left: 0;
   right: 0;
+  z-index: 3;
 }
 .page-loading .wrapper .text-error {
   position: absolute;
@@ -632,6 +653,12 @@ main .player-title .player-controls .btn {
   background: #191C21;
 }
 
+.spotify {
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-top: 20px;
+}
+
 .episodes {
   margin: 20px 20px 10px 20px;
   overflow: hidden;

diff --git a/style/watch.scss b/style/watch.scss
@@ -15,124 +15,7 @@ body {
     }
 }
 
-.page-loading {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100dvh;
-    background: #101318;
-    opacity: 1;
-    z-index: 9999;
-
-    .loader {
-        position: absolute;
-        top: calc(50% - 32px);
-        left: calc(50% - 32px);
-        width: 64px;
-        height: 64px;
-        border-radius: 50%;
-        perspective: 800px;
-    }
-
-    .wrapper {
-        max-width: 900px;
-        margin: 0 auto;
-        position: absolute;
-        bottom: 20px;
-        height: 4px;
-        width: 100%;
-        left: 0;
-        right: 0;
-
-        .text-error {
-            position: absolute;
-            bottom: 10px;
-            text-align: center;
-            left: 20px;
-            right: 20px;
-            color: #ff000057;
-            font-family: "Manrope";
-            font-size: 12px;
-        }
-
-        .progress {
-            position: relative;
-            height: 4px;
-            margin-left: 20px;
-            margin-right: 20px;
-            border-radius: 3px;
-            background: #ffffff07;
-            overflow: hidden;
-
-            .bar {
-                width: 0%;
-                height: 100%;
-                background: #5fbff325;
-                transition: 0.6s ease-in-out;
-            }
-        }
-    }
-
-    .inner {
-        position: absolute;
-        box-sizing: border-box;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-    }
-
-    .inner.one {
-        left: 0%;
-        top: 0%;
-        animation: rotate-one 1s linear infinite;
-        border-bottom: 3px solid #efeffa;
-    }
-
-    .inner.two {
-        right: 0%;
-        top: 0%;
-        animation: rotate-two 1s linear infinite;
-        border-right: 3px solid #efeffa;
-    }
-
-    .inner.three {
-        right: 0%;
-        bottom: 0%;
-        animation: rotate-three 1s linear infinite;
-        border-top: 3px solid #efeffa;
-    }
-
-    @keyframes rotate-one {
-        0% {
-            transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
-        }
-
-        100% {
-            transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
-        }
-    }
-
-    @keyframes rotate-two {
-        0% {
-            transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
-        }
-
-        100% {
-            transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
-        }
-    }
-
-    @keyframes rotate-three {
-        0% {
-            transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
-        }
-
-        100% {
-            transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
-        }
-    }
-}
+@import './watch/pageloading';
 
 header {
     width: 100%;
@@ -748,6 +631,12 @@ main {
     }
 }
 
+.spotify {
+    margin-left: 20px;
+    margin-right: 20px;
+    margin-top: 20px;
+}
+
 .episodes {
     margin: 20px 20px 10px 20px;
     overflow: hidden;