costin/123movies-seo
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add episode list

Browse source
This commit is contained in:
Constantin Plaiasu 2024-09-09 17:24:50 +03:00
parent 5aa6f2cd04
commit 90ef287829
10 changed files with 2131 additions and 537 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
.yarn/install-state.gz
View file

Binary file not shown.

1
public/build/assets/app-3G2-6e3D.css
View file

File diff suppressed because one or more lines are too long

1
public/build/assets/app-Bvw9nDvx.css Normal file
View file

File diff suppressed because one or more lines are too long

2
public/build/manifest.json
View file

@ -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
},

2
resources/js/img.js
View file

@ -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,
});
// }
// });

32
resources/scss/_lazyload.scss
View file

@ -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;
// }
// }
// }
&.lazy {
opacity: 0.6;
transition: 0.6s ease-out;
}
&.loaded {
opacity: 1;
transition: 0.6s ease-out;
}
img.lazy {
opacity: 0;
}
img:not(.initial) {
transition: opacity 0.6s;
}
img.initial,
img.loaded,
img.error {
opacity: 1;
}

69
resources/scss/_lists.scss
View file

@ -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;
}
}
}

47
resources/scss/_main.scss
View file

@ -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;

50
resources/views/show.blade.php
View file

@ -205,26 +205,44 @@
<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" 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="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">
<div class="movie-small__content">
<h5>{{ $currentSeason['name'] }}</h5>
<p class="text-white">{{ str($currentSeason['overview'])->limit(200) }}</p>
</div>
</div>
<div class="movie-small__lock">
<span class="movie-small__lock-icon" style="font-size: 2rem">
<svg class="si">
<use href="#si-caret-down"></use>
</svg>
</span>
</div>
</a>
<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>
</div>
</div>
<div class="movie-small__lock">
<span class="movie-small__lock-icon" style="font-size: 2rem">
<svg class="si">
<use href="#si-caret-down"></use>
</svg>
</span>
</div>
</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>

2464
yarn.lock
View file

File diff suppressed because it is too large Load diff