ghassanandClaude Opus 4.7
e76ac39f99
The Shorts feed used to emit one <video id="sv-{idx}"> per short. With
60 shorts, that was 60 HTMLMediaElement allocations even though only
one plays at a time — bandwidth was bounded by preload="none" but the
DOM shape was still N:1.
Replace with the YT-parity architecture:
- One #svGlobal <video> rendered once at the end of the feed. The
IntersectionObserver docks it into the active .short-player-wrap on
entry and sets its src from the slot's data-src. Browsers preserve
the active media context across node moves so playback doesn't
restart just because we re-parented the node.
- Per-slot .short-poster shim keeps the slot filled with the video's
thumbnail while the shared player is docked elsewhere; the slot
never goes blank between swaps.
- Two #svPre1 / #svPre2 preloaders park at the end of the DOM and get
their src set to the NEXT one and two shorts on each dock. preload=
"metadata" grabs the moov atom + first keyframe only — enough that
the switch to playback is instant, cheap enough that we can run two.
- The <video>'s single timeupdate listener now updates the
.short-progress-fill of whichever slot it's currently docked in,
found via video.parentElement.id.replace('wrap-', '').
- toggleMute now mutes the shared video directly instead of looking
up the no-longer-existent sv-{idx} by id.
Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
776 lines
28 KiB
PHP
776 lines
28 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Shorts | ' . config('app.name'))
|
|
|
|
@section('main_class', 'shorts-view-page')
|
|
|
|
@section('extra_styles')
|
|
<style>
|
|
/* ── Make yt-main a scroll-snap container ── */
|
|
.yt-main.shorts-view-page {
|
|
padding: 0 !important;
|
|
scroll-snap-type: y mandatory;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
.yt-main.shorts-view-page::-webkit-scrollbar { display: none; }
|
|
|
|
/* ── Each short occupies the full visible height ── */
|
|
.short-item {
|
|
height: calc(100vh - 56px); /* desktop: minus header */
|
|
scroll-snap-align: start;
|
|
scroll-snap-stop: always;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.short-item {
|
|
height: calc(100vh - 112px); /* mobile: minus header + bottom nav */
|
|
gap: 0;
|
|
}
|
|
}
|
|
|
|
/* ── Video wrapper — 9:16 centered ── */
|
|
.short-player-wrap {
|
|
position: relative;
|
|
height: 92%;
|
|
max-height: 780px;
|
|
aspect-ratio: 9 / 16;
|
|
border-radius: 14px;
|
|
overflow: hidden;
|
|
background: #000;
|
|
flex-shrink: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.short-player-wrap {
|
|
height: 100%;
|
|
max-height: unset;
|
|
width: 100%;
|
|
aspect-ratio: unset;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
.short-player-wrap video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
/* Poster shim shown behind the <video> (and visible on inactive slots).
|
|
Keeps the slot filled with content when the shared player node has
|
|
moved to a different slot. */
|
|
.short-poster {
|
|
position: absolute; inset: 0;
|
|
background-size: cover; background-position: center;
|
|
background-color: #000;
|
|
}
|
|
/* Hidden preloader elements that fetch metadata for the next 1-2 shorts
|
|
without rendering anything visible. preload="metadata" is the
|
|
smallest-possible warmup; the browser pulls the moov atom + first
|
|
keyframe, enough that the switch to playback is instant. */
|
|
.short-preloader { display: none; }
|
|
|
|
/* ── Tap-to-pause icon ── */
|
|
.short-pause-icon {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity .2s;
|
|
}
|
|
.short-pause-icon i {
|
|
font-size: 64px;
|
|
color: rgba(255,255,255,.85);
|
|
filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
|
|
}
|
|
.short-player-wrap.paused .short-pause-icon { opacity: 1; }
|
|
|
|
/* ── Info overlay at the bottom ── */
|
|
.short-info-overlay {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 48px 14px 16px;
|
|
background: linear-gradient(transparent, rgba(0,0,0,.72));
|
|
pointer-events: none;
|
|
}
|
|
|
|
.short-channel-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.short-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 1.5px solid rgba(255,255,255,.6);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.short-avatar-initial {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: #e61e1e;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.short-channel-name {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
text-shadow: 0 1px 3px rgba(0,0,0,.5);
|
|
}
|
|
|
|
.short-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
margin: 0;
|
|
text-shadow: 0 1px 3px rgba(0,0,0,.5);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.short-views {
|
|
font-size: 12px;
|
|
color: rgba(255,255,255,.75);
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* ── Right-side action buttons ── */
|
|
.short-actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 20px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.short-actions {
|
|
position: absolute;
|
|
right: 10px;
|
|
bottom: 80px;
|
|
gap: 16px;
|
|
}
|
|
}
|
|
|
|
.short-action-btn {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
}
|
|
|
|
.short-action-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,.12);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 22px;
|
|
color: #fff;
|
|
transition: background .2s, transform .15s;
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
@media (min-width: 769px) {
|
|
.short-action-icon {
|
|
background: var(--bg-secondary);
|
|
color: var(--text-primary);
|
|
}
|
|
}
|
|
|
|
.short-action-btn:hover .short-action-icon,
|
|
.short-action-btn:active .short-action-icon {
|
|
background: rgba(255,255,255,.25);
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
@media (min-width: 769px) {
|
|
.short-action-btn:hover .short-action-icon {
|
|
background: var(--border-color);
|
|
}
|
|
}
|
|
|
|
.short-action-label {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
}
|
|
|
|
@media (min-width: 769px) {
|
|
.short-action-label { color: var(--text-secondary); }
|
|
}
|
|
|
|
.short-action-btn.liked .short-action-icon { background: rgba(230,30,30,.3); color: #e61e1e; }
|
|
|
|
/* ── Up / Down nav arrows (desktop only) ── */
|
|
.short-nav-arrows {
|
|
position: absolute;
|
|
right: calc(50% - 230px - 80px);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
@media (max-width: 900px) { .short-nav-arrows { display: none; } }
|
|
|
|
.short-nav-arrow {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 50%;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
font-size: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: background .2s;
|
|
}
|
|
.short-nav-arrow:hover { background: var(--border-color); }
|
|
|
|
/* ── Progress bar ── */
|
|
.short-progress {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: rgba(255,255,255,.3);
|
|
pointer-events: none;
|
|
}
|
|
.short-progress-fill {
|
|
height: 100%;
|
|
background: #fff;
|
|
width: 0%;
|
|
transition: width .1s linear;
|
|
}
|
|
|
|
/* ── Mute button ── */
|
|
.short-mute-btn {
|
|
position: absolute;
|
|
top: 14px;
|
|
right: 14px;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: rgba(0,0,0,.45);
|
|
border: none;
|
|
color: #fff;
|
|
font-size: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
z-index: 2;
|
|
backdrop-filter: blur(4px);
|
|
transition: background .2s;
|
|
}
|
|
.short-mute-btn:hover { background: rgba(0,0,0,.7); }
|
|
|
|
/* ── Empty state ── */
|
|
.shorts-empty {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
gap: 16px;
|
|
color: var(--text-secondary);
|
|
text-align: center;
|
|
padding: 32px;
|
|
}
|
|
.shorts-empty i { font-size: 64px; color: #ff0050; }
|
|
.shorts-empty h2 { font-size: 22px; font-weight: 600; color: var(--text-primary); margin: 0; }
|
|
.shorts-empty p { margin: 0; }
|
|
</style>
|
|
@endsection
|
|
|
|
@section('content')
|
|
|
|
@forelse($videos as $video)
|
|
@php
|
|
$src = asset('storage/videos/' . $video->filename);
|
|
$thumb = $video->thumbnail_url;
|
|
$user = $video->user;
|
|
$index = $loop->index;
|
|
@endphp
|
|
|
|
<div class="short-item" data-id="{{ $video->id }}" data-index="{{ $index }}">
|
|
|
|
{{-- Up/Down nav (desktop) --}}
|
|
<div class="short-nav-arrows">
|
|
@if(!$loop->first)
|
|
<button class="short-nav-arrow" onclick="navigateShort(-1, {{ $index }})">
|
|
<i class="bi bi-chevron-up"></i>
|
|
</button>
|
|
@endif
|
|
@if(!$loop->last)
|
|
<button class="short-nav-arrow" onclick="navigateShort(1, {{ $index }})">
|
|
<i class="bi bi-chevron-down"></i>
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Video player wrap. The actual <video> element is a SINGLE shared
|
|
node (defined once at the bottom of the feed) that gets moved
|
|
between slots as the active short changes. Each slot carries its
|
|
own src + poster on data- attributes and the slot's inner div
|
|
shows the poster until the player docks here. --}}
|
|
<div class="short-player-wrap" id="wrap-{{ $index }}"
|
|
data-src="{{ $src }}"
|
|
data-poster="{{ $thumb }}"
|
|
onclick="toggleShortPlay({{ $index }})">
|
|
|
|
{{-- Poster shim: covers the slot before the shared <video> moves in.
|
|
Also stays visible on inactive slots so the viewport doesn't
|
|
go blank when the user is between shorts. --}}
|
|
<div class="short-poster"
|
|
@if($thumb) style="background-image:url('{{ $thumb }}');" @endif></div>
|
|
|
|
{{-- Pause icon --}}
|
|
<div class="short-pause-icon"><i class="bi bi-pause-fill"></i></div>
|
|
|
|
{{-- Info overlay --}}
|
|
<div class="short-info-overlay">
|
|
<div class="short-channel-row">
|
|
@if($user && $user->avatar_url)
|
|
<img src="{{ $user->avatar_url }}" class="short-avatar" alt="{{ $user->name }}">
|
|
@elseif($user)
|
|
<div class="short-avatar-initial">{{ substr($user->name, 0, 1) }}</div>
|
|
@endif
|
|
<span class="short-channel-name">{{ $user->name ?? '' }}</span>
|
|
</div>
|
|
<p class="short-title">{{ $video->title }}</p>
|
|
<div class="short-views"><i class="bi bi-play-fill"></i> {{ number_format($video->view_count) }} views</div>
|
|
</div>
|
|
|
|
{{-- Mute button --}}
|
|
<button class="short-mute-btn" id="mute-{{ $index }}" onclick="event.stopPropagation(); toggleMute({{ $index }})">
|
|
<i class="bi bi-volume-up-fill" id="mute-icon-{{ $index }}"></i>
|
|
</button>
|
|
|
|
{{-- Progress bar --}}
|
|
<div class="short-progress">
|
|
<div class="short-progress-fill" id="prog-{{ $index }}"></div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Action buttons --}}
|
|
<div class="short-actions">
|
|
{{-- Like --}}
|
|
@php $vKey = $video->getRouteKey(); @endphp
|
|
<button class="short-action-btn" id="like-btn-{{ $vKey }}" onclick="shortLike('{{ $vKey }}')">
|
|
<div class="short-action-icon"><i class="bi bi-heart{{ $video->isLikedBy(auth()->user()) ? '-fill' : '' }}" id="like-icon-{{ $vKey }}"></i></div>
|
|
<span class="short-action-label" id="like-count-{{ $vKey }}">{{ number_format($video->like_count) }}</span>
|
|
</button>
|
|
|
|
{{-- Comments — opens the side panel on desktop, bottom sheet on
|
|
mobile (CSS does the breakpoint; the button toggles a shared
|
|
.shorts-comments-pane element populated via fetch). --}}
|
|
<button type="button" class="short-action-btn"
|
|
onclick="shortOpenComments('{{ $video->getRouteKey() }}')">
|
|
<div class="short-action-icon"><i class="bi bi-chat-fill" aria-hidden="true"></i></div>
|
|
<span class="short-action-label">{{ number_format($video->comments()->count()) }}</span>
|
|
</button>
|
|
|
|
{{-- Share --}}
|
|
<button class="short-action-btn" onclick="shortShare('{{ $vKey }}', {{ json_encode($video->title) }})">
|
|
<div class="short-action-icon"><i class="bi bi-share-fill"></i></div>
|
|
<span class="short-action-label">Share</span>
|
|
</button>
|
|
|
|
{{-- Open full page --}}
|
|
<a class="short-action-btn" href="{{ route('videos.show', $video) }}">
|
|
<div class="short-action-icon"><i class="bi bi-box-arrow-up-right"></i></div>
|
|
<span class="short-action-label">Open</span>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
@empty
|
|
|
|
<div class="shorts-empty">
|
|
<i class="bi bi-collection-play"></i>
|
|
<h2>No Shorts yet</h2>
|
|
<p>Shorts are vertical videos under 60 seconds.</p>
|
|
@auth
|
|
<a href="{{ route('videos.create') }}" class="action-btn action-btn-primary">
|
|
<i class="bi bi-plus-lg"></i> <span>Upload Short</span>
|
|
</a>
|
|
@else
|
|
<a href="{{ route('login') }}" class="action-btn action-btn-primary">
|
|
<i class="bi bi-box-arrow-in-right"></i> <span>Login to Upload</span>
|
|
</a>
|
|
@endauth
|
|
</div>
|
|
|
|
@endforelse
|
|
|
|
{{-- Single shared <video> moved between slots as the active short changes.
|
|
Starts out detached (parked here in the DOM); the IntersectionObserver
|
|
relocates it into .short-player-wrap of the active slot. --}}
|
|
<video id="svGlobal"
|
|
loop playsinline
|
|
preload="metadata"
|
|
style="width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0;">
|
|
</video>
|
|
|
|
{{-- Preloaders for the next 1-2 shorts. Hidden; preload="metadata" is
|
|
enough that switching to playback is instant. We assign srcs
|
|
dynamically — defining them here keeps the DOM shape stable. --}}
|
|
<video id="svPre1" class="short-preloader" preload="metadata" muted></video>
|
|
<video id="svPre2" class="short-preloader" preload="metadata" muted></video>
|
|
|
|
{{-- Shared comments pane: side drawer on desktop, bottom sheet on mobile.
|
|
Populated via fetch of the regular watch page's #ytcSection block so
|
|
all the comment features (likes, replies, translate, heart/pin) work
|
|
identically. --}}
|
|
<div id="shortsCommentsPane" class="shorts-comments-pane" aria-hidden="true">
|
|
<div class="shorts-comments-head">
|
|
<span>Comments</span>
|
|
<button type="button" class="shorts-comments-close" onclick="shortCloseComments()" aria-label="Close comments">
|
|
<i class="bi bi-x-lg" aria-hidden="true"></i>
|
|
</button>
|
|
</div>
|
|
<div class="shorts-comments-body" id="shortsCommentsBody">
|
|
<div class="shorts-comments-loading">Loading…</div>
|
|
</div>
|
|
</div>
|
|
<div id="shortsCommentsBackdrop" class="shorts-comments-backdrop" onclick="shortCloseComments()"></div>
|
|
|
|
<style>
|
|
.shorts-comments-backdrop {
|
|
position: fixed; inset: 0; background: rgba(0,0,0,.45);
|
|
z-index: 59; display: none;
|
|
}
|
|
.shorts-comments-backdrop.visible { display: block; }
|
|
.shorts-comments-pane {
|
|
position: fixed;
|
|
right: 0; top: 56px; bottom: 0; width: 420px;
|
|
background: var(--bg-dark); color: var(--text-primary);
|
|
box-shadow: -4px 0 24px rgba(0,0,0,.4);
|
|
z-index: 60; display: none; flex-direction: column;
|
|
border-left: 1px solid var(--border-color);
|
|
}
|
|
.shorts-comments-pane.visible { display: flex; }
|
|
.shorts-comments-head {
|
|
display: flex; justify-content: space-between; align-items: center;
|
|
padding: 12px 16px; border-bottom: 1px solid var(--border-color);
|
|
font-size: 15px; font-weight: 600;
|
|
}
|
|
.shorts-comments-close {
|
|
background: none; border: none; color: var(--text-primary);
|
|
cursor: pointer; font-size: 16px; padding: 6px;
|
|
border-radius: 6px;
|
|
}
|
|
.shorts-comments-close:hover { background: rgba(255,255,255,.08); }
|
|
.shorts-comments-body {
|
|
flex: 1; overflow-y: auto; padding: 12px 16px;
|
|
}
|
|
.shorts-comments-loading {
|
|
text-align: center; padding: 40px 16px; color: var(--text-secondary);
|
|
}
|
|
|
|
/* Mobile: bottom sheet instead of right drawer. */
|
|
@media (max-width: 768px) {
|
|
.shorts-comments-pane {
|
|
left: 0; right: 0; top: auto; bottom: 56px;
|
|
width: 100%; height: 70vh;
|
|
border-left: none; border-top: 1px solid var(--border-color);
|
|
border-radius: 16px 16px 0 0;
|
|
box-shadow: 0 -4px 24px rgba(0,0,0,.4);
|
|
}
|
|
}
|
|
</style>
|
|
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
(function () {
|
|
const main = document.getElementById('main');
|
|
const video = document.getElementById('svGlobal');
|
|
const pre1 = document.getElementById('svPre1');
|
|
const pre2 = document.getElementById('svPre2');
|
|
// Persist the mute state across sessions. Default to muted so autoplay
|
|
// policies don't silently fail on first load; the user can unmute once
|
|
// and we remember it from then on.
|
|
let muted = (localStorage.getItem('shortsMuted') ?? '1') === '1';
|
|
let current = -1;
|
|
|
|
// Build an ordered list of slot wraps so neighbor lookup is a plain
|
|
// array index — we need to know "the slot at position N+1" to know
|
|
// which short to preload next.
|
|
const wraps = Array.from(document.querySelectorAll('.short-player-wrap'));
|
|
|
|
// ── Deep-link to /shorts/{id} — scroll the matching item into view
|
|
// before the observer starts, so autoplay fires on the target short
|
|
// rather than the first in document order. ────────────────────
|
|
@if($startId)
|
|
(function () {
|
|
const target = document.querySelector('.short-item[data-id="{{ (int) $startId }}"]');
|
|
if (target) target.scrollIntoView({ behavior: 'instant' in window ? 'instant' : 'auto', block: 'start' });
|
|
})();
|
|
@endif
|
|
|
|
function _dockVideoIn(wrap) {
|
|
// Move the shared <video> element into the active wrap. The browser
|
|
// keeps the active media context across the move, so playback
|
|
// doesn't restart just because we re-parented the node.
|
|
if (video.parentElement !== wrap) {
|
|
// Append after the poster so the poster acts as background
|
|
// while the video decodes its first frame.
|
|
wrap.appendChild(video);
|
|
}
|
|
}
|
|
|
|
function _primePreloaders(idx) {
|
|
// Preload metadata for the next 1-2 shorts so switching feels
|
|
// instant. preload="metadata" grabs just the moov atom + first
|
|
// keyframe; the browser doesn't fetch the whole file.
|
|
[pre1, pre2].forEach((pre, i) => {
|
|
const target = wraps[idx + 1 + i];
|
|
const nextSrc = target?.dataset.src || '';
|
|
if (pre.src !== nextSrc) pre.src = nextSrc;
|
|
});
|
|
}
|
|
|
|
function pauseShort(idx) {
|
|
const wrap = document.getElementById('wrap-' + idx);
|
|
if (video && video.parentElement === wrap) {
|
|
video.pause();
|
|
video.currentTime = 0;
|
|
}
|
|
if (wrap) wrap.classList.remove('paused');
|
|
const prog = document.getElementById('prog-' + idx);
|
|
if (prog) prog.style.width = '0%';
|
|
}
|
|
|
|
// ── IntersectionObserver — auto-play visible short ─────────
|
|
const observer = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => {
|
|
const item = entry.target;
|
|
const idx = parseInt(item.dataset.index);
|
|
const wrap = document.getElementById('wrap-' + idx);
|
|
if (!wrap) return;
|
|
|
|
if (entry.isIntersecting && entry.intersectionRatio >= 0.6) {
|
|
if (current !== -1 && current !== idx) pauseShort(current);
|
|
current = idx;
|
|
|
|
// ── Reflect the active short in the URL (no history entry) ──
|
|
try {
|
|
const vid = item.dataset.id;
|
|
if (vid) history.replaceState(null, '', '/shorts/' + vid);
|
|
} catch (_) {}
|
|
|
|
_dockVideoIn(wrap);
|
|
const nextSrc = wrap.dataset.src || '';
|
|
if (video.src !== nextSrc) video.src = nextSrc;
|
|
video.poster = wrap.dataset.poster || '';
|
|
|
|
video.muted = muted;
|
|
video.volume = 1;
|
|
video.play().catch(() => {
|
|
// autoplay blocked — fall back to muted
|
|
video.muted = true;
|
|
muted = true;
|
|
localStorage.setItem('shortsMuted', '1');
|
|
updateMuteIcon(idx);
|
|
video.play().catch(() => {});
|
|
});
|
|
wrap.classList.remove('paused');
|
|
|
|
_primePreloaders(idx);
|
|
} else {
|
|
pauseShort(idx);
|
|
}
|
|
});
|
|
}, { root: main, threshold: 0.6 });
|
|
|
|
document.querySelectorAll('.short-item').forEach(el => observer.observe(el));
|
|
|
|
// ── Play / pause on tap ────────────────────────────────────
|
|
window.toggleShortPlay = function(idx) {
|
|
const wrap = document.getElementById('wrap-' + idx);
|
|
if (!wrap || video.parentElement !== wrap) return;
|
|
if (video.paused) {
|
|
video.play().catch(() => {});
|
|
wrap.classList.remove('paused');
|
|
} else {
|
|
video.pause();
|
|
wrap.classList.add('paused');
|
|
}
|
|
};
|
|
|
|
// ── Progress bar — a single listener on the shared video updates the
|
|
// bar in whichever slot it's currently docked. --
|
|
video.addEventListener('timeupdate', () => {
|
|
if (!video.duration) return;
|
|
const wrap = video.parentElement;
|
|
if (!wrap || !wrap.classList.contains('short-player-wrap')) return;
|
|
const idx = wrap.id.replace('wrap-', '');
|
|
const prog = document.getElementById('prog-' + idx);
|
|
if (prog) prog.style.width = ((video.currentTime / video.duration) * 100) + '%';
|
|
});
|
|
|
|
// ── Mute toggle ────────────────────────────────────────────
|
|
window.toggleMute = function(idx) {
|
|
muted = !muted;
|
|
localStorage.setItem('shortsMuted', muted ? '1' : '0');
|
|
// The shared video is the only one playing; mute it directly.
|
|
video.muted = muted;
|
|
updateMuteIcon(idx);
|
|
};
|
|
|
|
function updateMuteIcon(idx) {
|
|
const icon = document.getElementById('mute-icon-' + idx);
|
|
if (icon) icon.className = muted ? 'bi bi-volume-mute-fill' : 'bi bi-volume-up-fill';
|
|
}
|
|
|
|
// ── Desktop nav arrows ─────────────────────────────────────
|
|
window.navigateShort = function(dir, fromIndex) {
|
|
const target = document.querySelector('.short-item[data-index="' + (fromIndex + dir) + '"]');
|
|
if (target) target.scrollIntoView({ behavior: 'smooth' });
|
|
};
|
|
|
|
// ── Keyboard nav ───────────────────────────────────────────
|
|
document.addEventListener('keydown', e => {
|
|
if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
|
|
e.preventDefault();
|
|
const dir = e.key === 'ArrowDown' ? 1 : -1;
|
|
if (current !== -1) navigateShort(dir, current);
|
|
}
|
|
if (e.key === 'm' || e.key === 'M') {
|
|
if (current !== -1) toggleMute(current);
|
|
}
|
|
});
|
|
|
|
// ── Mouse wheel nav (desktop) ──────────────────────────────
|
|
// One wheel event = one short, debounced so a trackpad flick doesn't
|
|
// skip five shorts at once. The main scroll container's own snap would
|
|
// nearly handle this, but a slow scroll leaves the feed mid-snap on
|
|
// some browsers — this makes the step explicit and symmetrical.
|
|
let wheelLock = false;
|
|
main?.addEventListener('wheel', (e) => {
|
|
if (wheelLock) { e.preventDefault(); return; }
|
|
if (Math.abs(e.deltaY) < 10) return; // ignore tiny jogs
|
|
wheelLock = true;
|
|
setTimeout(() => { wheelLock = false; }, 450);
|
|
e.preventDefault();
|
|
const dir = e.deltaY > 0 ? 1 : -1;
|
|
if (current !== -1) navigateShort(dir, current);
|
|
}, { passive: false });
|
|
|
|
// ── Like ───────────────────────────────────────────────────
|
|
window.shortLike = function(videoId) {
|
|
@auth
|
|
fetch('/videos/' + videoId + '/toggle-like', {
|
|
method: 'POST',
|
|
headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Accept': 'application/json' }
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
const btn = document.getElementById('like-btn-' + videoId);
|
|
const icon = document.getElementById('like-icon-' + videoId);
|
|
const count = document.getElementById('like-count-' + videoId);
|
|
if (data.liked !== undefined) {
|
|
icon.className = data.liked ? 'bi bi-heart-fill' : 'bi bi-heart';
|
|
btn.classList.toggle('liked', data.liked);
|
|
}
|
|
if (data.like_count !== undefined) count.textContent = Number(data.like_count).toLocaleString();
|
|
})
|
|
.catch(() => {});
|
|
@else
|
|
window.location.href = '{{ route("login") }}';
|
|
@endauth
|
|
};
|
|
|
|
// ── Comments pane ──────────────────────────────────────
|
|
window.shortOpenComments = function(videoKey) {
|
|
const pane = document.getElementById('shortsCommentsPane');
|
|
const backdrop = document.getElementById('shortsCommentsBackdrop');
|
|
const body = document.getElementById('shortsCommentsBody');
|
|
if (!pane || !body) return;
|
|
body.innerHTML = '<div class="shorts-comments-loading">Loading…</div>';
|
|
pane.classList.add('visible');
|
|
pane.setAttribute('aria-hidden', 'false');
|
|
backdrop?.classList.add('visible');
|
|
fetch('/videos/' + videoKey, {
|
|
headers: { 'X-Requested-With': 'XMLHttpRequest' },
|
|
credentials: 'same-origin'
|
|
})
|
|
.then(r => r.text())
|
|
.then(html => {
|
|
const doc = new DOMParser().parseFromString(html, 'text/html');
|
|
const section = doc.getElementById('ytcSection');
|
|
if (section) { body.innerHTML = ''; body.appendChild(section); }
|
|
else { body.innerHTML = '<div class="shorts-comments-loading">Comments unavailable.</div>'; }
|
|
})
|
|
.catch(() => { body.innerHTML = '<div class="shorts-comments-loading">Could not load comments.</div>'; });
|
|
};
|
|
window.shortCloseComments = function() {
|
|
const pane = document.getElementById('shortsCommentsPane');
|
|
const backdrop = document.getElementById('shortsCommentsBackdrop');
|
|
pane?.classList.remove('visible');
|
|
pane?.setAttribute('aria-hidden', 'true');
|
|
backdrop?.classList.remove('visible');
|
|
};
|
|
|
|
// ── Share ──────────────────────────────────────────────────
|
|
window.shortShare = function(videoKey, title) {
|
|
const url = window.location.origin + '/videos/' + videoKey;
|
|
if (navigator.share) {
|
|
navigator.share({ title: title, url: url }).catch(() => {});
|
|
} else if (typeof openShareModal === 'function') {
|
|
openShareModal(url, title);
|
|
} else {
|
|
navigator.clipboard.writeText(url).then(() => {
|
|
if (typeof showToast === 'function') showToast('Link copied!', 'success');
|
|
}).catch(() => {});
|
|
}
|
|
};
|
|
})();
|
|
</script>
|
|
@endsection
|