add episode list

public/build/manifest.json

@@ -36,7 +36,7 @@
     "isEntry": true
   },
   "resources/scss/app.scss": {
-    "file": "assets/app-3G2-6e3D.css",
+    "file": "assets/app-Bvw9nDvx.css",
     "src": "resources/scss/app.scss",
     "isEntry": true
   },

resources/js/img.js

@@ -7,10 +7,12 @@ window.LazyLoad = LazyLoad;
     //     if (document.readyState === "complete") {
             window.lLoad = new window.LazyLoad({
                 elements_selector: ".lazy",
+                // unobserve_entered: true,
                 // use_native: true,
                 // load_delay: 100,
                 // effect : "fadeIn"
                 // ... more custom settings?
+                // threshold: 0,
                 });
     //     }
     // });

resources/scss/_lazyload.scss

@@ -1,14 +1,22 @@
-img {
+// img {
+//   &.lazy {
+//     opacity: 0;
+//     transition: opacity ease-in-out 0.6s;
+//     &.loaded {
+//         opacity: 1;
+//         transition: opacity ease-in-out 0.6s;
+//     }
+//   }
+// }
 
-
+img.lazy {
-
+    opacity: 0;
-  &.lazy {
-    opacity: 0.6;
-    transition: 0.6s ease-out;
 }
-  &.loaded {
+img:not(.initial) {
+transition: opacity 0.6s;
+}
+img.initial,
+img.loaded,
+img.error {
 opacity: 1;
-    transition: 0.6s ease-out;
 }
-}
-

resources/scss/_lists.scss

@@ -1,69 +0,0 @@
-.results {
-    @apply container mx-auto mt-3 p-1 grid gap-1 md:gap-1.5 2xl:gap-2 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6  items-start;
-    &:not(.tab-content) {
-        @apply min-h-screen;
-    }
-
-    .card {
-        @apply flex flex-col relative aspect-card rounded overflow-hidden bg-opacity-0  hover:bg-opacity-50; //transition duration-300;
-        transition: opacity 0.5;
-        &-image {
-            @apply  relative inset-0 w-full aspect-2/3;
-            img {
-                @apply  absolute inset-0 w-full h-full;// bg-opacity-50 opacity-0;
-                &.lazy {
-                    @apply opacity-30;// transition-opacity duration-75
-                }
-                &.lazy.loaded {
-                    @apply opacity-100;// transition-opacity duration-200;
-                }
-                transition: 1s filter linear;
-            will-change: filter;
-            :hover {
-                filter: blur(2px);
-
-            }
-            }
-
-        }
-
-        :hover {
-            .card-overlay {
-                background-color: rgb(0 0 0 / 0.5);
-            }
-            .card-play {
-                opacity: 1;
-                z-index: 1;
-            }
-        }
-
-        &-title {
-            @apply relative  bottom-0 w-full   p-1 m-0 bg-black bg-opacity-80 h-auto text-white;
-            a {
-                @apply text-center text-sm font-semibold w-full h-full line-clamp-1 inset-0 flex items-center justify-center;
-                span {
-                    @apply text-center line-clamp-1 sm:line-clamp-1;
-                }
-            }
-        }
-
-        &-play {
-            @apply absolute left-1/2 top-1/2 text-primary;
-            opacity: 0;
-            z-index: -10;
-            transition: 0.3s opacity ease;
-            will-change: opacity;
-            transform: translate(-50%, -50%) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1);
-        }
-        &-overlay {
-            @apply  absolute inset-0 w-full h-full bg-black bg-opacity-10 ;
-            transition: 0.2s background-color ease;
-            will-change: background-color;
-            :hover {
-                filter: blur(2px);
-            }
-            // @apply  group-hover:backdrop-blur-[2px] group-hover:bg-opacity-50;
-            // transition: opacity 0.5;
-        }
-    }
-}

resources/scss/_main.scss

@@ -3850,6 +3850,14 @@ a:hover {
     align-items: center;
     justify-content: center;
     transition: 0.3s linear;
+
+}
+
+li.open {
+    .movie-small__lock {
+        transform: rotate(180deg);
+    }
+
 }
 
 @media (max-width: 575px) {
@@ -3858,6 +3866,45 @@ a:hover {
         height: 15px;
     }
 }
+// .movie-small-list {
+//     img.lazy {
+//         opacity: 0;
+//         animation: opacity ease-in 0.2s;
+//         &.loaded {
+//             opacity: 1;
+//         }
+//     }
+// }
+
+.episode-list {
+    padding: 1.5rem 1rem;
+
+    .episode {
+        img {
+            aspect-ratio: 16/9;
+        }
+        &::after {
+            position: absolute;
+            content: attr(data-label);
+            top: 0px;
+            left: 0px;
+            background-color: #03cf03 !important;
+            color: #fff;
+            font-size: 12px;
+            padding: 1px 6px;
+            border-radius: 0 3px 3px 0;
+            animation: pulse 1s infinite;
+        }
+        .episode-title {
+            font-size: 14px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            text-align: center;
+            color: #fff;
+        }
+    }
+}
 
 .movie-small__lock:hover {
     color: $primary;

resources/views/show.blade.php

@@ -205,16 +205,16 @@
                                             <ul class="movie-small-list movie-list-scroll" style="overflow: hidden; width: auto; height: 420px;">
                                                 @foreach ($show['seasons'] as $currentSeason)
 
-                                                <li class="movie-small d-flex align-items-center justify-content-between movie-item__overlay video-item flex-wrap" data-text="Season">
+                                                <li id="season-{{ $currentSeason['season_number'] }}" class="movie-small  movie-item__overlay video-item @if ($season && $season['season_number'] === $currentSeason['season_number']) open @endif" data-text="Season {{ $currentSeason['season_number'] }}" >
-
+                                                    <a class="d-flex align-items-center justify-content-between w-100" href="{{ route('show.season', ['id' => $show['id'], 'slug' => $show['slug'], 'season' => $currentSeason['season_number']]) . '#season-' . $currentSeason['season_number'] }}">
                                                         <div class="caojtyektj d-flex align-items-center flex-wrap ">
                                                             <div class="movie-small__thumb">
-                                                            <img class="lazy" src="data:image/svg+xml,%3Csvg width='120' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='120' height='180' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E" data-src="{{ $currentSeason['poster'] }}" alt="image">
+                                                                <img class="lazy" width="120" height="180" src="data:image/svg+xml,%3Csvg width='120' height='180' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='120' height='180' x='0' y='0' fill='%23#1B1B3F' /%3E%3C/svg%3E" data-src="{{ $currentSeason['poster'] }}" alt="image">
                                                             </div>
 
                                                             <div class="movie-small__content">
                                                                 <h5>{{ $currentSeason['name'] }}</h5>
-                                                            <a class="base--color" href="{{ route('show.season', ['id' => $show['id'], 'slug' => $show['slug'], 'season' => $currentSeason['season_number']]) }}">Play Now</a>
+                                                                <p class="text-white">{{ str($currentSeason['overview'])->limit(200) }}</p>
                                                             </div>
                                                         </div>
                                                         <div class="movie-small__lock">
@@ -224,7 +224,25 @@
                                                                 </svg>
                                                             </span>
                                                         </div>
+                                                    </a>
+
+
                                                 </li>
+                                                @if ($season && $season['season_number'] === $currentSeason['season_number'])
+                                                <div class="episode-list d-flex align-items-center justify-content-center flex-wrap gap-3">
+                                                    @foreach ($season['episodes'] as $episode)
+                                                    <a href="{{ route('show.episode', ['id' => $show['id'], 'slug' => $show['slug'], 'season' => $episode['season_number'], 'episode' => $episode['episode_number']]) }}" class="episode " data-label="E{{ $episode['label'] }}" style="max-width: 200px;">
+
+                                                        <img @if($episode['backdrop'])class="lazy"@endif width="200" height="113" src="data:image/svg+xml,%3Csvg width='200' height='113' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='200' height='113' x='0' y='0' fill='%231B1B3F' /%3E%3C/svg%3E" @if($episode['backdrop']) data-src="{{ $episode['backdrop'] }}" @endif alt="Episode {{ $episode['episode_number'] }}">
+
+                                                        {{-- @dump($episode) --}}
+                                                        <p class="episode-title" style="width: 100%;">{{ $episode['name'] }}</p>
+                                                    </a>
+                                                    @endforeach
+
+                                                </div>
+                                                @endif
+
                                                 @endforeach
                                             </ul>
                                             <div class="slimScrollBar" style="background: rgb(0, 0, 0); width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 1px; height: 110px;"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; background: rgb(51, 51, 51); opacity: 0.2; z-index: 90; right: 1px;"></div>