ngthanhvu/kr-phim
1
0
Fork 0
mirror of https://github.com/ngthanhvu/kr-phim.git synced 2026-08-10 17:07:46 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: remove overlay all video

Browse Source
This commit is contained in:
ngthanhvu
2026-05-31 12:38:33 +07:00
parent a16c1d4846
commit 2782ffb75e
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/pages/xem/[slug].vue
+6 -4
View File
@@ -1172,7 +1172,7 @@ useHead(() => ({
@error="handleVideoError" /> @error="handleVideoError" />
<div <div
class="pointer-events-none absolute inset-0 bg-linear-to-t from-black/70 via-transparent to-black/35" /> class="pointer-events-none absolute inset-x-0 top-0 h-20 bg-linear-to-b from-black/35 to-transparent" />
<div v-if="isVideoBuffering" <div v-if="isVideoBuffering"
class="pointer-events-none absolute inset-0 z-10 grid place-items-center bg-black/20 text-yellow-200"> class="pointer-events-none absolute inset-0 z-10 grid place-items-center bg-black/20 text-yellow-200">
@@ -1219,7 +1219,7 @@ useHead(() => ({
:class="edgeProgressVisible || (isHlsFullscreen && !shouldShowHlsControls) ? 'opacity-100' : 'opacity-0'" /> :class="edgeProgressVisible || (isHlsFullscreen && !shouldShowHlsControls) ? 'opacity-100' : 'opacity-0'" />
<div class="kr-hls-controls text-white transition" <div class="kr-hls-controls text-white transition"
:class="shouldShowHlsControls ? 'opacity-100' : 'pointer-events-none opacity-0'"> :class="shouldShowHlsControls ? 'translate-y-0 opacity-100' : 'pointer-events-none translate-y-3 opacity-0'">
<div class="kr-hls-time-row"> <div class="kr-hls-time-row">
<span>{{ formatPlayerTime(videoCurrentTime) }}</span> <span>{{ formatPlayerTime(videoCurrentTime) }}</span>
<span>{{ formatPlayerTime(durationSeconds) }}</span> <span>{{ formatPlayerTime(durationSeconds) }}</span>
@@ -1493,7 +1493,9 @@ useHead(() => ({
bottom: 0; bottom: 0;
z-index: 10; z-index: 10;
padding: 8px 14px 14px; padding: 8px 14px 14px;
background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.78) 22%, rgb(0 0 0 / 0.92)); background: linear-gradient(180deg, transparent, rgb(0 0 0 / 0.22) 42%, rgb(0 0 0 / 0.48));
will-change: opacity, transform;
transition: opacity 0.24s ease, transform 0.24s ease;
} }
.kr-hls-time-row { .kr-hls-time-row {
@@ -1626,7 +1628,7 @@ useHead(() => ({
height: 4px; height: 4px;
pointer-events: none; pointer-events: none;
background: linear-gradient(90deg, rgb(250 204 21) v-bind('`${progressPercent}%`'), rgb(255 255 255 / 0.24) 0); background: linear-gradient(90deg, rgb(250 204 21) v-bind('`${progressPercent}%`'), rgb(255 255 255 / 0.24) 0);
transition: opacity 0.18s ease; transition: opacity 0.24s ease;
} }
@media (max-width: 640px) { @media (max-width: 640px) {