66fd78c10f
Introduce per-video language support and multiple audio tracks (VideoAudioTrack model + migrations for language, description, title), a reusable language-select component, and a track-editor form. Bundle the self-hosted flag-icons v7.2.3 library and a NAS auto-sync command. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
717 lines
32 KiB
PHP
717 lines
32 KiB
PHP
@props(['video'])
|
|
|
|
<style>
|
|
.action-btn {
|
|
border: none;
|
|
border-radius: 8px;
|
|
padding: 0 14px;
|
|
height: 36px;
|
|
font-size: 0.82rem;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-primary);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
transition: all 0.2s ease;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
line-height: 1;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.action-btn i,
|
|
.action-btn svg {
|
|
font-size: 14px;
|
|
width: 14px;
|
|
height: 14px;
|
|
flex-shrink: 0;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
background: var(--border-color);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.action-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.action-btn svg,
|
|
.action-btn i {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.action-btn.comment-btn {
|
|
background: var(--brand-red);
|
|
color: white;
|
|
border-color: var(--brand-red);
|
|
}
|
|
|
|
.action-btn.liked {
|
|
color: var(--brand-red) !important;
|
|
}
|
|
|
|
.mobile-action-dropdown .dropdown-item.liked {
|
|
color: var(--brand-red) !important;
|
|
}
|
|
|
|
.action-btn.subscribed {
|
|
background: var(--brand-red);
|
|
border-color: var(--brand-red);
|
|
color: #fff !important;
|
|
}
|
|
|
|
.mobile-action-dropdown .dropdown-item.subscribed {
|
|
color: var(--brand-red) !important;
|
|
}
|
|
|
|
.mobile-action-dropdown {
|
|
display: none;
|
|
position: relative;
|
|
}
|
|
|
|
.mobile-action-dropdown .dropdown-menu {
|
|
right: 0;
|
|
left: auto;
|
|
min-width: 200px;
|
|
background: var(--bg-secondary);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 10px;
|
|
padding: 6px 0;
|
|
z-index: 1200;
|
|
}
|
|
|
|
.mobile-action-dropdown .dropdown-item {
|
|
color: var(--text-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
padding: 8px 12px;
|
|
background: transparent;
|
|
border: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.mobile-action-dropdown .dropdown-item:hover {
|
|
background: var(--border-color);
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.video-actions>.desktop-action {
|
|
display: none !important;
|
|
}
|
|
|
|
.mobile-action-dropdown {
|
|
display: block;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.action-btn {
|
|
width: 100%;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="video-actions" style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap; overflow: visible;">
|
|
@auth
|
|
@if (Auth::id() === $video->user_id)
|
|
<button class="action-btn desktop-action" onclick="openEditVideoModal('{{ $video->getRouteKey() }}')">
|
|
<i class="bi bi-pencil"></i>
|
|
<span>Edit</span>
|
|
</button>
|
|
<button class="action-btn desktop-action" onclick="showDeleteModal('{{ $video->getRouteKey() }}', {{ json_encode($video->title) }})"
|
|
style="color:#ef4444;border-color:rgba(239,68,68,.35);">
|
|
<i class="bi bi-trash"></i>
|
|
<span>Delete</span>
|
|
</button>
|
|
@elseif (Auth::id() !== $video->user_id)
|
|
@php $isSubscribed = Auth::user()->isSubscribedTo($video->user); @endphp
|
|
<button type="button"
|
|
class="action-btn desktop-action subscribe-toggle-btn {{ $isSubscribed ? 'subscribed' : '' }}"
|
|
data-channel-id="{{ $video->user_id }}"
|
|
data-subscribe-url="{{ route('channel.subscribe', $video->user_id) }}"
|
|
data-subscribed="{{ $isSubscribed ? 'true' : 'false' }}">
|
|
<i class="bi {{ $isSubscribed ? 'bi-bell-fill' : 'bi-bell' }}"></i>
|
|
<span class="subscribe-label">{{ $isSubscribed ? 'Subscribed' : 'Subscribe' }}</span>
|
|
</button>
|
|
@endif
|
|
@else
|
|
<button onclick="window.location.href='{{ route('login') }}'" class="action-btn desktop-action">
|
|
<i class="bi bi-bell"></i><span>Subscribe</span>
|
|
</button>
|
|
@endauth
|
|
|
|
@auth
|
|
<button type="button"
|
|
class="action-btn desktop-action like-toggle-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}"
|
|
data-video-id="{{ $video->id }}"
|
|
data-toggle-url="{{ route('videos.toggleLike', $video) }}"
|
|
data-liked="{{ $video->isLikedBy(Auth::user()) ? 'true' : 'false' }}">
|
|
<i class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
|
|
<span class="like-count-label">{{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}</span>
|
|
</button>
|
|
@else
|
|
<button onclick="window.location.href='{{ route('login') }}'" class="action-btn desktop-action">
|
|
<i class="bi bi-hand-thumbs-up"></i>
|
|
{{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
|
|
</button>
|
|
@endauth
|
|
|
|
@if ($video->isShareable())
|
|
<button class="action-btn desktop-action"
|
|
onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}', '{{ route('videos.recordShare', $video) }}')">
|
|
<i class="bi bi-share"></i><span>Share</span>
|
|
</button>
|
|
@endif
|
|
|
|
<!-- Save to Playlist Button -->
|
|
<button class="action-btn desktop-action" onclick="openAddToPlaylistModal({{ $video->id }})">
|
|
<i class="bi bi-bookmark"></i>
|
|
<span>Save</span>
|
|
</button>
|
|
|
|
@php
|
|
$dlAccess = $video->download_access ?? 'disabled';
|
|
$dlUser = Auth::user();
|
|
$showDl = match($dlAccess) {
|
|
'everyone' => true,
|
|
'registered' => (bool) $dlUser,
|
|
'subscribers' => $dlUser && ($dlUser->id === $video->user_id || $dlUser->isSubscribedTo($video->user)),
|
|
default => false,
|
|
};
|
|
@endphp
|
|
@if($showDl)
|
|
@php $isAudioDl = $video->isAudioOnly(); @endphp
|
|
<!-- Download Dropdown -->
|
|
<div class="dropdown desktop-action" style="display:inline-flex;">
|
|
<button class="action-btn dropdown-toggle" type="button" id="downloadDropdown{{ $video->id }}"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="bi bi-download"></i>
|
|
<span>Download</span>
|
|
</button>
|
|
<ul class="dropdown-menu" aria-labelledby="downloadDropdown{{ $video->id }}"
|
|
style="background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:10px;padding:6px 0;min-width:160px;">
|
|
<li>
|
|
@if($isAudioDl)
|
|
<a class="dropdown-item" href="#"
|
|
onclick="startSlideshowDownload('{{ $video->getRouteKey() }}'); return false;"
|
|
style="color:var(--text-primary);display:flex;align-items:center;gap:8px;font-size:14px;padding:8px 14px;text-decoration:none;">
|
|
<i class="bi bi-film"></i> Download Video
|
|
</a>
|
|
@else
|
|
<a class="dropdown-item" href="{{ route('videos.download', $video) }}"
|
|
style="color:var(--text-primary);display:flex;align-items:center;gap:8px;font-size:14px;padding:8px 14px;text-decoration:none;">
|
|
<i class="bi bi-film"></i> Download Video
|
|
</a>
|
|
@endif
|
|
</li>
|
|
<li>
|
|
<a class="dropdown-item ytp-mp3-dl-link" href="{{ route('videos.downloadMp3', $video) }}"
|
|
style="color:var(--text-primary);display:flex;align-items:center;gap:8px;font-size:14px;padding:8px 14px;text-decoration:none;">
|
|
<i class="bi bi-music-note-beamed"></i> Download MP3
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="dropdown mobile-action-dropdown">
|
|
<button class="action-btn dropdown-toggle" type="button" id="dropdownMenuLinkMusic{{ $video->id }}"
|
|
data-bs-toggle="dropdown" aria-expanded="false">
|
|
<i class="bi bi-lightning-charge-fill"></i>
|
|
<span>Action</span>
|
|
</button>
|
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuLinkMusic{{ $video->id }}">
|
|
@auth
|
|
@if (Auth::id() !== $video->user_id)
|
|
@php $isSubscribed = Auth::user()->isSubscribedTo($video->user); @endphp
|
|
<button type="button"
|
|
class="dropdown-item subscribe-toggle-btn {{ $isSubscribed ? 'subscribed' : '' }}"
|
|
data-channel-id="{{ $video->user_id }}"
|
|
data-subscribe-url="{{ route('channel.subscribe', $video->user_id) }}"
|
|
data-subscribed="{{ $isSubscribed ? 'true' : 'false' }}">
|
|
<i class="bi {{ $isSubscribed ? 'bi-bell-fill' : 'bi-bell' }}"></i>
|
|
<span class="subscribe-label">{{ $isSubscribed ? 'Subscribed' : 'Subscribe' }}</span>
|
|
</button>
|
|
@else
|
|
<button type="button" class="dropdown-item" onclick="openEditVideoModal('{{ $video->getRouteKey() }}')">
|
|
<i class="bi bi-pencil"></i> Edit
|
|
</button>
|
|
@endif
|
|
@else
|
|
<button class="dropdown-item" onclick="window.location.href='{{ route('login') }}'">
|
|
<i class="bi bi-bell"></i> Subscribe
|
|
</button>
|
|
@endauth
|
|
|
|
@auth
|
|
<button type="button"
|
|
class="dropdown-item like-toggle-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}"
|
|
data-video-id="{{ $video->id }}"
|
|
data-toggle-url="{{ route('videos.toggleLike', $video) }}"
|
|
data-liked="{{ $video->isLikedBy(Auth::user()) ? 'true' : 'false' }}">
|
|
<i class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
|
|
<span class="like-count-label">{{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}</span>
|
|
</button>
|
|
@else
|
|
<button class="dropdown-item" onclick="window.location.href='{{ route('login') }}'">
|
|
<i class="bi bi-hand-thumbs-up"></i>
|
|
{{ $video->like_count > 0 ? number_format($video->like_count) : 'Like' }}
|
|
</button>
|
|
@endauth
|
|
|
|
@if ($video->isShareable())
|
|
<button class="dropdown-item"
|
|
onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}', '{{ route('videos.recordShare', $video) }}')">
|
|
<i class="bi bi-share"></i> Share
|
|
</button>
|
|
@endif
|
|
|
|
<button class="dropdown-item" onclick="openAddToPlaylistModal({{ $video->id }})">
|
|
<i class="bi bi-bookmark"></i> Save
|
|
</button>
|
|
@if($showDl)
|
|
@if($isAudioDl)
|
|
<a class="dropdown-item" href="#"
|
|
onclick="startSlideshowDownload('{{ $video->getRouteKey() }}'); return false;"
|
|
style="color:var(--text-primary);display:flex;align-items:center;gap:8px;">
|
|
<i class="bi bi-film"></i> Download Video
|
|
</a>
|
|
@else
|
|
<a class="dropdown-item" href="{{ route('videos.download', $video) }}"
|
|
style="color:var(--text-primary);display:flex;align-items:center;gap:8px;">
|
|
<i class="bi bi-film"></i> Download Video
|
|
</a>
|
|
@endif
|
|
<a class="dropdown-item ytp-mp3-dl-link" href="{{ route('videos.downloadMp3', $video) }}"
|
|
style="color:var(--text-primary);display:flex;align-items:center;gap:8px;">
|
|
<i class="bi bi-music-note-beamed"></i> Download MP3
|
|
</a>
|
|
@endif
|
|
@if(Auth::check() && Auth::id() === $video->user_id)
|
|
<button type="button" class="dropdown-item text-danger" onclick="showDeleteModal('{{ $video->getRouteKey() }}', {{ json_encode($video->title) }})">
|
|
<i class="bi bi-trash"></i> Delete
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
var csrfToken = '{{ csrf_token() }}';
|
|
|
|
// ── Subscribe toggle ─────────────────────────────────────────
|
|
document.addEventListener('click', function (e) {
|
|
var btn = e.target.closest('.subscribe-toggle-btn');
|
|
if (!btn) return;
|
|
|
|
var url = btn.dataset.subscribeUrl;
|
|
var subscribed = btn.dataset.subscribed === 'true';
|
|
var channelId = btn.dataset.channelId;
|
|
var nowSub = !subscribed;
|
|
|
|
// Optimistic update on all matching buttons (desktop + mobile)
|
|
document.querySelectorAll('.subscribe-toggle-btn[data-channel-id="' + channelId + '"]').forEach(function (b) {
|
|
b.dataset.subscribed = nowSub ? 'true' : 'false';
|
|
b.classList.toggle('subscribed', nowSub);
|
|
var icon = b.querySelector('i');
|
|
var label = b.querySelector('.subscribe-label');
|
|
if (icon) icon.className = 'bi ' + (nowSub ? 'bi-bell-fill' : 'bi-bell');
|
|
if (label) label.textContent = nowSub ? 'Subscribed' : 'Subscribe';
|
|
});
|
|
|
|
// Also update channel-row subscriber counts on the page
|
|
document.querySelectorAll('.channel-subs[data-channel-id="' + channelId + '"]').forEach(function (el) {
|
|
var n = parseInt(el.dataset.count || 0);
|
|
el.dataset.count = nowSub ? n + 1 : Math.max(0, n - 1);
|
|
el.textContent = Number(el.dataset.count).toLocaleString() + ' subscribers';
|
|
});
|
|
|
|
fetch(url, {
|
|
method: 'POST',
|
|
headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
|
|
credentials: 'same-origin',
|
|
})
|
|
.then(function (r) {
|
|
if (!r.ok) throw new Error(r.status);
|
|
return r.json();
|
|
})
|
|
.then(function (data) {
|
|
document.querySelectorAll('.subscribe-toggle-btn[data-channel-id="' + channelId + '"]').forEach(function (b) {
|
|
b.dataset.subscribed = data.subscribed ? 'true' : 'false';
|
|
b.classList.toggle('subscribed', data.subscribed);
|
|
var icon = b.querySelector('i');
|
|
var label = b.querySelector('.subscribe-label');
|
|
if (icon) icon.className = 'bi ' + (data.subscribed ? 'bi-bell-fill' : 'bi-bell');
|
|
if (label) label.textContent = data.subscribed ? 'Subscribed' : 'Subscribe';
|
|
});
|
|
document.querySelectorAll('.channel-subs[data-channel-id="' + channelId + '"]').forEach(function (el) {
|
|
el.dataset.count = data.subscriber_count;
|
|
el.textContent = Number(data.subscriber_count).toLocaleString() + ' subscribers';
|
|
});
|
|
})
|
|
.catch(function (err) {
|
|
// Revert optimistic update
|
|
document.querySelectorAll('.subscribe-toggle-btn[data-channel-id="' + channelId + '"]').forEach(function (b) {
|
|
b.dataset.subscribed = subscribed ? 'true' : 'false';
|
|
b.classList.toggle('subscribed', subscribed);
|
|
var icon = b.querySelector('i');
|
|
var label = b.querySelector('.subscribe-label');
|
|
if (icon) icon.className = 'bi ' + (subscribed ? 'bi-bell-fill' : 'bi-bell');
|
|
if (label) label.textContent = subscribed ? 'Subscribed' : 'Subscribe';
|
|
});
|
|
if (typeof showToast === 'function') showToast('Could not update subscription. Please try again.', 'error');
|
|
});
|
|
});
|
|
|
|
document.addEventListener('click', function (e) {
|
|
var btn = e.target.closest('.like-toggle-btn');
|
|
if (!btn) return;
|
|
|
|
var url = btn.dataset.toggleUrl;
|
|
var liked = btn.dataset.liked === 'true';
|
|
|
|
// Optimistic UI update
|
|
var allBtns = document.querySelectorAll('.like-toggle-btn[data-video-id="' + btn.dataset.videoId + '"]');
|
|
allBtns.forEach(function (b) {
|
|
var icon = b.querySelector('i');
|
|
var label = b.querySelector('.like-count-label');
|
|
var nowLiked = !liked;
|
|
b.dataset.liked = nowLiked ? 'true' : 'false';
|
|
b.classList.toggle('liked', nowLiked);
|
|
if (icon) {
|
|
icon.className = 'bi ' + (nowLiked ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up');
|
|
}
|
|
if (label) {
|
|
var current = parseInt(label.textContent.replace(/,/g, '')) || 0;
|
|
var next = nowLiked ? current + 1 : Math.max(0, current - 1);
|
|
label.textContent = next > 0 ? next.toLocaleString() : 'Like';
|
|
}
|
|
});
|
|
|
|
fetch(url, {
|
|
method: 'POST',
|
|
headers: { 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
|
|
})
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (data) {
|
|
// Reconcile with server truth
|
|
allBtns.forEach(function (b) {
|
|
var icon = b.querySelector('i');
|
|
var label = b.querySelector('.like-count-label');
|
|
b.dataset.liked = data.liked ? 'true' : 'false';
|
|
b.classList.toggle('liked', data.liked);
|
|
if (icon) icon.className = 'bi ' + (data.liked ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up');
|
|
if (label) label.textContent = data.like_count > 0 ? data.like_count.toLocaleString() : 'Like';
|
|
});
|
|
})
|
|
.catch(function () {
|
|
// Revert optimistic update on failure
|
|
allBtns.forEach(function (b) {
|
|
var icon = b.querySelector('i');
|
|
b.dataset.liked = liked ? 'true' : 'false';
|
|
b.classList.toggle('liked', liked);
|
|
if (icon) icon.className = 'bi ' + (liked ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up');
|
|
});
|
|
if (typeof toast === 'function') toast('Could not update like. Try again.', 'error');
|
|
});
|
|
});
|
|
})();
|
|
|
|
// ── Slideshow video generation progress ──────────────────────────────
|
|
if (!window._slideshowDlInit) {
|
|
window._slideshowDlInit = true;
|
|
|
|
// Inject progress overlay once
|
|
var _overlay = document.createElement('div');
|
|
_overlay.id = 'sl-dl-overlay';
|
|
_overlay.innerHTML = `
|
|
<div id="sl-dl-box">
|
|
<div id="sl-dl-icon"><i class="bi bi-film"></i></div>
|
|
<h5 id="sl-dl-title">Generating Video</h5>
|
|
<p id="sl-dl-status">Starting...</p>
|
|
<div id="sl-dl-track">
|
|
<div id="sl-dl-bar"></div>
|
|
</div>
|
|
<div id="sl-dl-pct">0%</div>
|
|
<p id="sl-dl-hint">This may take a minute for long tracks</p>
|
|
<button id="sl-dl-cancel" onclick="window._slideshowDlCancel()">Cancel</button>
|
|
</div>`;
|
|
document.body.appendChild(_overlay);
|
|
|
|
// Styles
|
|
var _style = document.createElement('style');
|
|
_style.textContent = `
|
|
#sl-dl-overlay {
|
|
display: none; position: fixed; inset: 0; z-index: 99999;
|
|
background: rgba(0,0,0,.85); align-items: center; justify-content: center;
|
|
}
|
|
#sl-dl-overlay.active { display: flex; }
|
|
#sl-dl-box {
|
|
background: #1e1e1e; border: 1px solid #333; border-radius: 18px;
|
|
padding: 36px 32px; width: 90%; max-width: 400px; text-align: center;
|
|
box-shadow: 0 24px 80px rgba(0,0,0,.7);
|
|
}
|
|
#sl-dl-icon { font-size: 44px; color: #e61e1e; margin-bottom: 14px; }
|
|
#sl-dl-title { color: #fff; font-size: 18px; font-weight: 600; margin: 0 0 6px; }
|
|
#sl-dl-status { color: #aaa; font-size: 13px; margin: 0 0 20px; min-height: 18px; }
|
|
#sl-dl-track {
|
|
background: #2a2a2a; border-radius: 6px; height: 10px;
|
|
overflow: hidden; margin-bottom: 10px;
|
|
}
|
|
#sl-dl-bar {
|
|
background: linear-gradient(90deg, #e61e1e, #ff4757);
|
|
height: 100%; width: 0%; border-radius: 6px;
|
|
transition: width .6s ease;
|
|
}
|
|
#sl-dl-pct { color: #e61e1e; font-size: 22px; font-weight: 700; margin-bottom: 4px; }
|
|
#sl-dl-hint { color: #555; font-size: 11px; margin: 8px 0 16px; }
|
|
#sl-dl-cancel {
|
|
background: none; border: 1px solid #444; color: #888;
|
|
border-radius: 8px; padding: 6px 18px; font-size: 13px; cursor: pointer;
|
|
}
|
|
#sl-dl-cancel:hover { border-color: #e61e1e; color: #e61e1e; }
|
|
`;
|
|
document.head.appendChild(_style);
|
|
|
|
var _pollTimer = null;
|
|
var _currentKey = null;
|
|
var _maxPct = 0; // progress only ever moves forward
|
|
|
|
window._slideshowDlCancel = function () {
|
|
clearInterval(_pollTimer);
|
|
_pollTimer = null;
|
|
_currentKey = null;
|
|
_maxPct = 0;
|
|
document.getElementById('sl-dl-overlay').classList.remove('active');
|
|
};
|
|
|
|
function _setProgress(pct, status) {
|
|
// Never decrease the bar — only move forward (unless resetting to 0 on error/cancel)
|
|
pct = Math.max(pct, _maxPct);
|
|
_maxPct = pct;
|
|
document.getElementById('sl-dl-bar').style.width = pct + '%';
|
|
document.getElementById('sl-dl-pct').textContent = pct + '%';
|
|
document.getElementById('sl-dl-status').textContent = status;
|
|
}
|
|
|
|
function _setError(msg) {
|
|
_maxPct = 0;
|
|
document.getElementById('sl-dl-bar').style.width = '0%';
|
|
document.getElementById('sl-dl-bar').style.background = '#e61e1e';
|
|
document.getElementById('sl-dl-pct').textContent = '✕';
|
|
document.getElementById('sl-dl-status').textContent = msg || 'Generation failed. Please try again.';
|
|
document.getElementById('sl-dl-cancel').textContent = 'Close';
|
|
}
|
|
|
|
window.startSlideshowDownload = function (routeKey) {
|
|
if (_currentKey && _currentKey !== routeKey) {
|
|
// Different video — reset
|
|
clearInterval(_pollTimer);
|
|
_pollTimer = null;
|
|
}
|
|
_currentKey = routeKey;
|
|
_maxPct = 0;
|
|
document.getElementById('sl-dl-bar').style.background = ''; // restore gradient
|
|
document.getElementById('sl-dl-cancel').textContent = 'Cancel';
|
|
_setProgress(0, 'Starting...');
|
|
document.getElementById('sl-dl-overlay').classList.add('active');
|
|
document.getElementById('sl-dl-cancel').style.display = '';
|
|
|
|
// Use the global csrf variable set by the layout, with meta tag as fallback
|
|
var csrfMeta = document.querySelector('meta[name="csrf-token"]');
|
|
var token = (typeof csrf !== 'undefined' ? csrf : '') || (csrfMeta ? csrfMeta.getAttribute('content') : '');
|
|
|
|
fetch('/videos/' + routeKey + '/slideshow/generate', {
|
|
method: 'POST',
|
|
headers: { 'X-CSRF-TOKEN': token, 'Accept': 'application/json' }
|
|
})
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (data) {
|
|
if (data.status === 'ready') {
|
|
_maxPct = 100;
|
|
document.getElementById('sl-dl-bar').style.width = '100%';
|
|
document.getElementById('sl-dl-pct').textContent = '100%';
|
|
document.getElementById('sl-dl-status').textContent = 'Ready! Starting download...';
|
|
document.getElementById('sl-dl-cancel').style.display = 'none';
|
|
setTimeout(function () {
|
|
window._slideshowDlCancel();
|
|
window.location.href = '/videos/' + routeKey + '/download';
|
|
}, 600);
|
|
return;
|
|
}
|
|
if (data.error) {
|
|
_setError('Error: ' + data.error);
|
|
return;
|
|
}
|
|
|
|
var duration = data.duration || 0;
|
|
_setProgress(2, 'Generating video...');
|
|
|
|
_pollTimer = setInterval(function () {
|
|
fetch('/videos/' + routeKey + '/slideshow/progress?duration=' + duration, {
|
|
headers: { 'Accept': 'application/json' }
|
|
})
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (prog) {
|
|
if (prog.status === 'error') {
|
|
clearInterval(_pollTimer);
|
|
_pollTimer = null;
|
|
_setError(prog.message || null);
|
|
return;
|
|
}
|
|
|
|
if (prog.status === 'ready') {
|
|
clearInterval(_pollTimer);
|
|
_pollTimer = null;
|
|
_maxPct = 100;
|
|
document.getElementById('sl-dl-bar').style.width = '100%';
|
|
document.getElementById('sl-dl-pct').textContent = '100%';
|
|
document.getElementById('sl-dl-status').textContent = 'Ready! Starting download...';
|
|
document.getElementById('sl-dl-cancel').style.display = 'none';
|
|
setTimeout(function () {
|
|
window._slideshowDlCancel();
|
|
window.location.href = '/videos/' + routeKey + '/download';
|
|
}, 600);
|
|
return;
|
|
}
|
|
|
|
// 'waiting' means the process just started — keep the current bar position
|
|
if (prog.status === 'waiting') return;
|
|
|
|
var pct = prog.percent || 0;
|
|
var remaining = '';
|
|
if (duration > 0 && pct > 2) {
|
|
var secs = Math.round(duration * (100 - pct) / pct);
|
|
remaining = secs > 60
|
|
? ' (~' + Math.ceil(secs / 60) + ' min left)'
|
|
: ' (~' + secs + 's left)';
|
|
}
|
|
_setProgress(pct, 'Generating video...' + remaining);
|
|
})
|
|
.catch(function () { /* ignore transient poll errors */ });
|
|
}, 1500);
|
|
})
|
|
.catch(function () {
|
|
_setProgress(0, 'Failed to start. Please try again.');
|
|
});
|
|
};
|
|
}
|
|
|
|
// ── Video delete dialog ──────────────────────────────────────────────
|
|
@auth
|
|
@if(Auth::id() === $video->user_id)
|
|
(function () {
|
|
var _videoDeleteUrl = '{{ route('videos.destroy', $video) }}';
|
|
var _videoCsrf = '{{ csrf_token() }}';
|
|
var _owner2fa = {{ (Auth::user()->two_factor_enabled && Auth::user()->two_factor_secret) ? 'true' : 'false' }};
|
|
var _dlgId = 'vaDlg_{{ $video->id }}';
|
|
var _dlgHtml = '<div id="' + _dlgId + '" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.75);backdrop-filter:blur(4px);align-items:center;justify-content:center;padding:16px;" onclick="if(event.target===this)_closeVaDlg()">'
|
|
+ '<div style="background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:16px;width:100%;max-width:420px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.6);">'
|
|
+ '<div style="padding:20px 24px 16px;border-bottom:1px solid var(--border-color);display:flex;align-items:center;justify-content:space-between;">'
|
|
+ '<div style="display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:#ef4444;"><i class="bi bi-trash"></i> Delete Video</div>'
|
|
+ '<button onclick="_closeVaDlg()" style="background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:18px;line-height:1;padding:4px;"><i class="bi bi-x-lg"></i></button>'
|
|
+ '</div>'
|
|
+ '<div style="padding:20px 24px;">'
|
|
+ '<p id="' + _dlgId + '_title" style="margin:0 0 12px;font-size:14px;color:var(--text-primary);"></p>'
|
|
+ '<div style="background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);border-radius:8px;padding:10px 14px;font-size:13px;color:#fca5a5;display:flex;gap:8px;align-items:flex-start;">'
|
|
+ '<i class="bi bi-exclamation-triangle-fill" style="flex-shrink:0;margin-top:1px;"></i>'
|
|
+ '<span>All views, likes, comments and HLS files will be deleted. This cannot be undone.</span>'
|
|
+ '</div>'
|
|
+ (_owner2fa ? '<div style="margin-top:16px;"><label style="font-size:13px;color:var(--text-secondary);display:flex;align-items:center;gap:6px;margin-bottom:8px;"><i class="bi bi-shield-lock-fill" style="color:#a78bfa;"></i>Enter your <strong style=\'color:var(--text-primary);\'>2FA code</strong> to confirm</label>'
|
|
+ '<input type="text" id="' + _dlgId + '_otp" inputmode="numeric" pattern="[0-9]*" maxlength="6" autocomplete="one-time-code" placeholder="000000"'
|
|
+ ' style="width:100%;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;padding:10px 14px;color:#fff;font-size:22px;letter-spacing:.3em;text-align:center;box-sizing:border-box;"></div>' : '')
|
|
+ '<div id="' + _dlgId + '_err" style="display:none;margin-top:12px;padding:8px 12px;background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3);border-radius:6px;color:#f87171;font-size:13px;"></div>'
|
|
+ '</div>'
|
|
+ '<div style="padding:12px 24px 20px;display:flex;gap:10px;justify-content:flex-end;">'
|
|
+ '<button onclick="_closeVaDlg()" class="action-btn">Cancel</button>'
|
|
+ '<button id="' + _dlgId + '_btn" onclick="_confirmVaDlg()" class="action-btn" style="background:#ef4444;color:#fff;border-color:#ef4444;"><i class="bi bi-trash"></i> Delete</button>'
|
|
+ '</div>'
|
|
+ '</div></div>';
|
|
|
|
var _dlgInserted = false;
|
|
function _ensureDlg() {
|
|
if (_dlgInserted) return;
|
|
document.body.insertAdjacentHTML('beforeend', _dlgHtml);
|
|
_dlgInserted = true;
|
|
}
|
|
|
|
window.showDeleteModal = function (routeKey, title) {
|
|
_ensureDlg();
|
|
var dlg = document.getElementById(_dlgId);
|
|
document.getElementById(_dlgId + '_title').textContent = 'You are about to permanently delete "' + title + '".';
|
|
document.getElementById(_dlgId + '_err').style.display = 'none';
|
|
if (_owner2fa) { document.getElementById(_dlgId + '_otp').value = ''; }
|
|
dlg.style.display = 'flex';
|
|
dlg.style.alignItems = 'center';
|
|
dlg.style.justifyContent = 'center';
|
|
if (_owner2fa) setTimeout(function () { document.getElementById(_dlgId + '_otp').focus(); }, 100);
|
|
document.addEventListener('keydown', _escHandler);
|
|
};
|
|
|
|
window._closeVaDlg = function () {
|
|
var dlg = document.getElementById(_dlgId);
|
|
if (dlg) dlg.style.display = 'none';
|
|
document.removeEventListener('keydown', _escHandler);
|
|
};
|
|
|
|
function _escHandler(e) { if (e.key === 'Escape') _closeVaDlg(); }
|
|
|
|
window._confirmVaDlg = function () {
|
|
var btn = document.getElementById(_dlgId + '_btn');
|
|
var errEl = document.getElementById(_dlgId + '_err');
|
|
var otp = _owner2fa ? document.getElementById(_dlgId + '_otp').value.replace(/\s/g, '') : '';
|
|
|
|
if (_owner2fa && otp.length !== 6) {
|
|
errEl.textContent = 'Please enter your 6-digit 2FA code.';
|
|
errEl.style.display = 'block';
|
|
document.getElementById(_dlgId + '_otp').focus();
|
|
return;
|
|
}
|
|
|
|
btn.disabled = true;
|
|
btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Deleting…';
|
|
errEl.style.display = 'none';
|
|
|
|
var body = new URLSearchParams({ '_token': _videoCsrf, '_method': 'DELETE' });
|
|
if (_owner2fa) body.append('otp_code', otp);
|
|
|
|
fetch(_videoDeleteUrl, {
|
|
method: 'POST',
|
|
headers: { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: body.toString()
|
|
})
|
|
.then(function (r) { return r.json(); })
|
|
.then(function (data) {
|
|
if (data.success) {
|
|
window.location.href = '/';
|
|
} else {
|
|
errEl.textContent = data.message || 'Delete failed.';
|
|
errEl.style.display = 'block';
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<i class="bi bi-trash"></i> Delete';
|
|
if (_owner2fa) { document.getElementById(_dlgId + '_otp').value = ''; document.getElementById(_dlgId + '_otp').focus(); }
|
|
}
|
|
})
|
|
.catch(function () {
|
|
errEl.textContent = 'An error occurred. Please try again.';
|
|
errEl.style.display = 'block';
|
|
btn.disabled = false;
|
|
btn.innerHTML = '<i class="bi bi-trash"></i> Delete';
|
|
});
|
|
};
|
|
})();
|
|
@endif
|
|
@endauth
|
|
</script>
|