ghassan/takeone-youtube-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made the video cards components

Browse Source
This commit is contained in:
ghassan 2026-03-02 02:16:28 +03:00
parent 3aa49d638d
commit 72e9439727
16 changed files with 3973 additions and 250 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/Http/Controllers/VideoController.php
View File

@ -58,6 +58,7 @@ class VideoController extends Controller
'video' => 'required|file|mimes:mp4,webm,ogg,mov,avi,wmv,flv,mkv|max:512000',
'thumbnail' => 'nullable|image|mimes:jpg,jpeg,png,webp|max:5120',
'visibility' => 'nullable|in:public,unlisted,private',
'type' => 'nullable|in:generic,music,match',
]);
$videoFile = $request->file('video');
@ -148,6 +149,7 @@ class VideoController extends Controller
'height' => $height,
'status' => 'processing',
'visibility' => $request->visibility ?? 'public',
'type' => $request->type ?? 'generic',
]);
// Dispatch compression job in the background
@ -221,6 +223,7 @@ class VideoController extends Controller
'thumbnail' => $video->thumbnail,
'thumbnail_url' => $video->thumbnail ? asset('storage/thumbnails/' . $video->thumbnail) : null,
'visibility' => $video->visibility ?? 'public',
'type' => $video->type ?? 'generic',
]
]);
}
@ -237,9 +240,10 @@ class VideoController extends Controller
'description' => 'nullable|string',
'thumbnail' => 'nullable|image|mimes:jpg,jpeg,png,webp|max:5120',
'visibility' => 'nullable|in:public,unlisted,private',
'type' => 'nullable|in:generic,music,match',
]);
$data = $request->only(['title', 'description', 'visibility']);
$data = $request->only(['title', 'description', 'visibility', 'type']);
if ($request->hasFile('thumbnail')) {
if ($video->thumbnail) {

26
app/Models/Video.php
View File

@ -21,6 +21,7 @@ class Video extends Model
'height',
'status',
'visibility',
'type',
];
protected $casts = [
@ -137,5 +138,30 @@ class Video extends Model
}
return $query->where('visibility', '!=', 'private');
}
// Video type helpers
public function getTypeIconAttribute()
{
return match($this->type) {
'music' => 'bi-music-note',
'match' => 'bi-trophy',
default => 'bi-film',
};
}
public function isGeneric()
{
return $this->type === 'generic';
}
public function isMusic()
{
return $this->type === 'music';
}
public function isMatch()
{
return $this->type === 'match';
}
}

22
database/migrations/2026_02_25_000000_add_type_to_videos_table.php Normal file
View File

@ -0,0 +1,22 @@
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up()
{
Schema::table('videos', function (Blueprint $table) {
$table->enum('type', ['generic', 'music', 'match'])->default('generic')->after('visibility');
});
}
public function down()
{
Schema::table('videos', function (Blueprint $table) {
$table->dropColumn('type');
});
}
};

817
resources/views/components/video-card.blade.php Normal file
View File

@ -0,0 +1,817 @@
@props(['video' => null, 'size' => 'medium'])
@php
$videoUrl = $video ? asset('storage/videos/' . $video->filename) : null;
$thumbnailUrl = $video && $video->thumbnail
? asset('storage/thumbnails/' . $video->thumbnail)
: ($video ? 'https://picsum.photos/seed/' . $video->id . '/640/360' : 'https://picsum.photos/seed/random/640/360');
$typeIcon = $video ? match($video->type) {
'music' => 'bi-music-note',
'match' => 'bi-trophy',
default => 'bi-film',
} : 'bi-film';
// Check if current user is the owner of the video
$isOwner = $video && auth()->check() && auth()->id() == $video->user_id;
// Size classes
$sizeClasses = match($size) {
'small' => 'yt-video-card-sm',
default => '',
};
@endphp
<div class="yt-video-card {{ $sizeClasses }}" data-video-url="{{ $videoUrl }}">
<a href="{{ $video ? route('videos.show', $video->id) : '#' }}">
<div class="yt-video-thumb" onmouseenter="playVideo(this)" onmouseleave="stopVideo(this)">
<img src="{{ $thumbnailUrl }}" alt="{{ $video->title ?? 'Video' }}">
@if($videoUrl)
<video preload="none">
<source src="{{ $videoUrl }}" type="{{ $video->mime_type ?? 'video/mp4' }}">
</video>
@endif
@if($video && $video->duration)
<span class="yt-video-duration">{{ gmdate('i:s', $video->duration) }}</span>
@endif
</div>
</a>
<div class="yt-video-info">
<div class="yt-channel-icon">
@if($video && $video->user && $video->user->avatar_url)
<img src="{{ $video->user->avatar_url }}" alt="{{ $video->user->name }}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
@endif
</div>
<div class="yt-video-details">
<h3 class="yt-video-title">
<a href="{{ $video ? route('videos.show', $video->id) : '#' }}">
<i class="bi {{ $typeIcon }}" style="color: #ef4444; margin-right: 6px;"></i>
{{ $video->title ?? 'Untitled Video' }}
</a>
</h3>
@if($video && $video->user)
<div class="yt-channel-name">{{ $video->user->name }}</div>
@endif
@if($video)
<div class="yt-video-meta">
{{ number_format($video->view_count) }} views • {{ $video->created_at->diffForHumans() }}
</div>
@endif
</div>
@if($video)
<div class="position-relative">
<button class="yt-more-btn" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
<i class="bi bi-three-dots-vertical"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark">
@if($isOwner)
<li>
<a class="dropdown-item" href="javascript:void(0)" onclick="openEditVideoModal('{{ $video->id }}')">
<i class="bi bi-pencil"></i> Edit
</a>
</li>
<li>
<button type="button" class="dropdown-item text-danger" onclick="showDeleteModal('{{ $video->id }}', '{{ addslashes($video->title) }}')">
<i class="bi bi-trash"></i> Delete
</button>
</li>
<li><hr class="dropdown-divider"></li>
@endif
<li>
<a class="dropdown-item" href="javascript:void(0)" onclick="addToQueue('{{ $video->id }}')">
<i class="bi bi-list-nested"></i> Add to queue
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)" onclick="saveToWatchLater('{{ $video->id }}')">
<i class="bi bi-clock"></i> Save to Watch later
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)" onclick="openPlaylistModal('{{ $video->id }}')">
<i class="bi bi-bookmark"></i> Save to playlist
</a>
</li>
<li>
<a class="dropdown-item" href="{{ route('videos.download', $video->id) }}">
<i class="bi bi-download"></i> Download
</a>
</li>
@if($video->isShareable())
<li>
<a class="dropdown-item" href="javascript:void(0)" onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')">
<i class="bi bi-share"></i> Share
</a>
</li>
@endif
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item" href="javascript:void(0)" onclick="notInterested('{{ $video->id }}')">
<i class="bi bi-dash-circle"></i> Not interested
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)" onclick="dontRecommendChannel('{{ $video->user_id }}')">
<i class="bi bi-x-circle"></i> Don't recommend channel
</a>
</li>
<li>
<a class="dropdown-item" href="javascript:void(0)" onclick="reportVideo('{{ $video->id }}')">
<i class="bi bi-flag"></i> Report
</a>
</li>
</ul>
</div>
@endif
</div>
</div>
<!-- Cute Edit Video Modal -->
<div class="modal fade" id="editVideoModal{{ $video->id ?? '' }}" tabindex="-1" aria-labelledby="editVideoModalLabel{{ $video->id ?? '' }}" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered cute-edit-modal">
<div class="modal-content cute-edit-content">
<div class="cute-edit-header">
<span class="cute-edit-icon">✏️</span>
<h5>Edit Video</h5>
<button type="button" class="btn-close-cute" onclick="closeEditVideoModal('{{ $video->id ?? '' }}')">×</button>
</div>
<div class="cute-edit-body">
<form id="edit-video-form-{{ $video->id ?? '' }}" enctype="multipart/form-data">
@csrf
@method('PUT')
<!-- Title -->
<div class="cute-form-group">
<label><i class="bi bi-card-heading"></i> Title</label>
<input type="text" name="title" id="edit-title-{{ $video->id ?? '' }}" class="cute-input" placeholder="Video title">
</div>
<!-- Description -->
<div class="cute-form-group">
<label><i class="bi bi-text-paragraph"></i> Description</label>
<textarea name="description" id="edit-description-{{ $video->id ?? '' }}" class="cute-textarea" rows="2" placeholder="Tell viewers about your video"></textarea>
</div>
<!-- Video Type -->
<div class="cute-form-group">
<label><i class="bi bi-collection-play"></i> Type</label>
<div class="cute-type-options">
<label class="cute-type-option active" data-type="generic">
<input type="radio" name="type" value="generic" checked>
<span>🎬 Generic</span>
</label>
<label class="cute-type-option" data-type="music">
<input type="radio" name="type" value="music">
<span>🎵 Music</span>
</label>
<label class="cute-type-option" data-type="match">
<input type="radio" name="type" value="match">
<span>🏆 Match</span>
</label>
</div>
</div>
<!-- Thumbnail -->
<div class="cute-form-group">
<label><i class="bi bi-image"></i> Thumbnail</label>
<div class="cute-thumbnail-upload" onclick="document.getElementById('edit-thumbnail-{{ $video->id ?? '' }}').click()">
<input type="file" name="thumbnail" id="edit-thumbnail-{{ $video->id ?? '' }}" accept="image/*" hidden>
<div class="cute-thumbnail-preview" id="thumbnail-preview-{{ $video->id ?? '' }}">
<i class="bi bi-camera"></i>
<span>Click to change</span>
</div>
</div>
</div>
<!-- Privacy -->
<div class="cute-form-group">
<label><i class="bi bi-shield-lock"></i> Privacy</label>
<div class="cute-privacy-options">
<label class="cute-privacy-option active" data-privacy="public">
<input type="radio" name="visibility" value="public" checked>
<span>🌐 Public</span>
</label>
<label class="cute-privacy-option" data-privacy="unlisted">
<input type="radio" name="visibility" value="unlisted">
<span>🔗 Unlisted</span>
</label>
<label class="cute-privacy-option" data-privacy="private">
<input type="radio" name="visibility" value="private">
<span>🔒 Private</span>
</label>
</div>
</div>
<!-- Status -->
<div class="cute-status" id="edit-status-{{ $video->id ?? '' }}"></div>
<!-- Buttons -->
<div class="cute-edit-actions">
<button type="button" class="cute-btn-cancel" onclick="closeEditVideoModal('{{ $video->id ?? '' }}')">Cancel</button>
<button type="submit" class="cute-btn-save">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<style>
/* Base styles for video card */
.yt-video-card {
cursor: pointer;
}
.yt-video-card .yt-video-thumb {
position: relative;
aspect-ratio: 16/9;
border-radius: 12px;
overflow: hidden;
background: #1a1a1a;
}
.yt-video-card .yt-video-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.yt-video-card .yt-video-thumb video {
width: 100%;
height: 100%;
object-fit: contain;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s ease;
background: #000;
}
.yt-video-card .yt-video-thumb video.active {
opacity: 1;
}
.yt-video-card .yt-video-duration {
position: absolute;
bottom: 8px;
right: 8px;
background: rgba(0,0,0,0.8);
color: white;
padding: 3px 6px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.yt-video-card .yt-video-info {
display: flex;
margin-top: 12px;
gap: 12px;
}
.yt-video-card .yt-channel-icon {
width: 36px;
height: 36px;
border-radius: 50%;
background: #555;
flex-shrink: 0;
overflow: hidden;
}
.yt-video-card .yt-video-details {
flex: 1;
min-width: 0;
}
.yt-video-card .yt-video-title {
font-size: 16px;
font-weight: 500;
color: #fff;
margin: 0 0 4px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.3;
}
.yt-video-card .yt-video-title a {
color: inherit;
text-decoration: none;
}
.yt-video-card .yt-channel-name,
.yt-video-card .yt-video-meta {
color: #aaa;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* More button */
.yt-video-card .yt-more-btn {
background: transparent;
border: none;
color: #fff;
cursor: pointer;
padding: 4px;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
flex-shrink: 0;
}
.yt-video-card .yt-more-btn:hover {
background: #3f3f3f;
}
/* Dropdown menu styles - use Bootstrap defaults */
.yt-video-card .dropdown-menu-dark {
background: #282828;
border: 1px solid #3f3f3f;
border-radius: 12px;
padding: 8px 0;
min-width: 200px;
}
.yt-video-card .dropdown-item {
color: #fff;
padding: 10px 16px;
font-size: 14px;
display: flex;
align-items: center;
gap: 16px;
}
.yt-video-card .dropdown-item:hover {
background: #3f3f3f;
color: #fff;
}
.yt-video-card .dropdown-item.text-danger {
color: #ef4444 !important;
}
.yt-video-card .dropdown-item.text-danger:hover {
background: #3f3f3f;
color: #ef4444 !important;
}
.yt-video-card .dropdown-item i {
width: 20px;
text-align: center;
}
.yt-video-card .dropdown-divider {
border-color: #3f3f3f;
margin: 8px 0;
}
/* Small size styles */
.yt-video-card-sm .yt-video-thumb {
border-radius: 8px;
}
.yt-video-card-sm .yt-video-info {
margin-top: 8px;
gap: 8px;
}
.yt-video-card-sm .yt-channel-icon {
width: 28px;
height: 28px;
}
.yt-video-card-sm .yt-video-title {
font-size: 13px;
}
.yt-video-card-sm .yt-channel-name,
.yt-video-card-sm .yt-video-meta {
font-size: 12px;
}
.yt-video-card-sm .yt-more-btn {
width: 24px;
height: 24px;
}
/* Cute Edit Modal Styles */
.cute-edit-modal {
max-width: 380px;
margin: auto;
}
.cute-edit-content {
background: linear-gradient(145deg, #1f1f1f 0%, #2a2a2a 100%);
border: 1px solid #3a3a3a;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.cute-edit-header {
background: linear-gradient(135deg, #ff6b8a 0%, #ff8fa3 100%);
padding: 16px 20px;
display: flex;
align-items: center;
gap: 10px;
position: relative;
}
.cute-edit-icon {
font-size: 20px;
}
.cute-edit-header h5 {
margin: 0;
color: white;
font-size: 16px;
font-weight: 600;
}
.btn-close-cute {
position: absolute;
right: 12px;
background: rgba(255,255,255,0.2);
border: none;
color: white;
width: 26px;
height: 26px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.btn-close-cute:hover {
background: rgba(255,255,255,0.3);
}
.cute-edit-body {
padding: 20px;
}
.cute-form-group {
margin-bottom: 16px;
}
.cute-form-group label {
display: flex;
align-items: center;
gap: 6px;
color: #ccc;
font-size: 13px;
margin-bottom: 8px;
font-weight: 500;
}
.cute-form-group label i {
color: #ff6b8a;
font-size: 14px;
}
.cute-input, .cute-textarea {
width: 100%;
background: #151515;
border: 1px solid #333;
border-radius: 10px;
padding: 10px 12px;
color: #fff;
font-size: 13px;
transition: all 0.2s;
}
.cute-input:focus, .cute-textarea:focus {
outline: none;
border-color: #ff6b8a;
box-shadow: 0 0 0 3px rgba(255, 107, 138, 0.15);
}
.cute-input::placeholder, .cute-textarea::placeholder {
color: #555;
}
/* Type Options */
.cute-type-options, .cute-privacy-options {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.cute-type-option, .cute-privacy-option {
flex: 1;
min-width: 80px;
cursor: pointer;
}
.cute-type-option input, .cute-privacy-option input {
display: none;
}
.cute-type-option span, .cute-privacy-option span {
display: block;
padding: 8px 10px;
background: #151515;
border: 1px solid #333;
border-radius: 8px;
font-size: 12px;
color: #aaa;
text-align: center;
transition: all 0.2s;
}
.cute-type-option:hover span, .cute-privacy-option:hover span {
border-color: #555;
background: #1a1a1a;
}
.cute-type-option.active span, .cute-privacy-option.active span {
background: rgba(255, 107, 138, 0.15);
border-color: #ff6b8a;
color: #ff6b8a;
}
/* Thumbnail Upload */
.cute-thumbnail-upload {
border: 2px dashed #444;
border-radius: 10px;
padding: 16px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
background: #151515;
}
.cute-thumbnail-upload:hover {
border-color: #ff6b8a;
background: rgba(255, 107, 138, 0.05);
}
.cute-thumbnail-preview {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: #666;
}
.cute-thumbnail-preview i {
font-size: 24px;
color: #ff6b8a;
}
.cute-thumbnail-preview span {
font-size: 12px;
}
/* Status */
.cute-status {
padding: 10px;
border-radius: 8px;
font-size: 13px;
margin-bottom: 16px;
display: none;
}
.cute-status.success {
display: block;
background: rgba(34, 197, 94, 0.15);
color: #4ade80;
border: 1px solid rgba(34, 197, 94, 0.3);
}
.cute-status.error {
display: block;
background: rgba(239, 68, 68, 0.15);
color: #f87171;
border: 1px solid rgba(239, 68, 68, 0.3);
}
/* Actions */
.cute-edit-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
}
.cute-btn-cancel, .cute-btn-save {
padding: 10px 20px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border: none;
}
.cute-btn-cancel {
background: #333;
color: #aaa;
}
.cute-btn-cancel:hover {
background: #444;
color: #fff;
}
.cute-btn-save {
background: linear-gradient(135deg, #ff6b8a 0%, #ff8fa3 100%);
color: white;
box-shadow: 0 4px 15px rgba(255, 107, 138, 0.3);
}
.cute-btn-save:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(255, 107, 138, 0.4);
}
.cute-btn-save:disabled {
background: #444;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
@media (max-width: 420px) {
.cute-edit-modal {
max-width: 320px;
margin: 10px;
}
.cute-type-options, .cute-privacy-options {
flex-direction: column;
}
}
</style>
<script>
function playVideo(element) {
const video = element.querySelector('video');
if (video) {
video.currentTime = 0;
video.volume = 0.10;
video.play().catch(function(e) {});
video.classList.add('active');
}
}
function stopVideo(element) {
const video = element.querySelector('video');
if (video) {
video.pause();
video.currentTime = 0;
video.classList.remove('active');
}
}
// Edit Modal Functions
let currentEditVideoId = null;
function openEditVideoModal(videoId) {
currentEditVideoId = videoId;
const modalId = 'editVideoModal' + (videoId || '');
const modal = new bootstrap.Modal(document.getElementById(modalId));
modal.show();
// Fetch video data
fetch(`/videos/${videoId}/edit`, {
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}',
'Accept': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
const video = data.video;
document.getElementById('edit-title-' + videoId).value = video.title || '';
document.getElementById('edit-description-' + videoId).value = video.description || '';
// Set type
const typeOptions = document.querySelectorAll('#' + modalId + ' .cute-type-option');
typeOptions.forEach(opt => {
opt.classList.remove('active');
if (opt.dataset.type === (video.type || 'generic')) {
opt.classList.add('active');
opt.querySelector('input').checked = true;
}
});
// Set privacy
const privacyOptions = document.querySelectorAll('#' + modalId + ' .cute-privacy-option');
privacyOptions.forEach(opt => {
opt.classList.remove('active');
if (opt.dataset.privacy === (video.visibility || 'public')) {
opt.classList.add('active');
opt.querySelector('input').checked = true;
}
});
// Clear status
const statusEl = document.getElementById('edit-status-' + videoId);
statusEl.className = 'cute-status';
statusEl.textContent = '';
}
})
.catch(error => {
console.error('Error:', error);
});
}
function closeEditVideoModal(videoId) {
const modalId = 'editVideoModal' + (videoId || '');
const modalEl = document.getElementById(modalId);
const modal = bootstrap.Modal.getInstance(modalEl);
if (modal) {
modal.hide();
}
}
// Type option click handlers
document.addEventListener('click', function(e) {
if (e.target.closest('.cute-type-option')) {
const option = e.target.closest('.cute-type-option');
const parent = option.parentElement;
parent.querySelectorAll('.cute-type-option').forEach(opt => opt.classList.remove('active'));
option.classList.add('active');
option.querySelector('input').checked = true;
}
if (e.target.closest('.cute-privacy-option')) {
const option = e.target.closest('.cute-privacy-option');
const parent = option.parentElement;
parent.querySelectorAll('.cute-privacy-option').forEach(opt => opt.classList.remove('active'));
option.classList.add('active');
option.querySelector('input').checked = true;
}
});
// Thumbnail preview
document.addEventListener('change', function(e) {
if (e.target.id && e.target.id.startsWith('edit-thumbnail-')) {
const file = e.target.files[0];
if (file) {
const videoId = e.target.id.replace('edit-thumbnail-', '');
const preview = document.getElementById('thumbnail-preview-' + videoId);
preview.innerHTML = `<span>${file.name}</span>`;
}
}
});
// Form submission
document.addEventListener('submit', function(e) {
const form = e.target;
if (form.id && form.id.startsWith('edit-video-form-')) {
e.preventDefault();
const videoId = form.id.replace('edit-video-form-', '');
const formData = new FormData(form);
const statusEl = document.getElementById('edit-status-' + videoId);
const submitBtn = form.querySelector('.cute-btn-save');
submitBtn.disabled = true;
submitBtn.textContent = 'Saving...';
fetch(`/videos/${videoId}`, {
method: 'POST',
body: formData,
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}',
'Accept': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(data => {
if (data.success) {
statusEl.className = 'cute-status success';
statusEl.textContent = '✓ Saved successfully!';
setTimeout(() => {
closeEditVideoModal(videoId);
window.location.reload();
}, 1000);
} else {
throw new Error(data.message || 'Update failed');
}
})
.catch(error => {
statusEl.className = 'cute-status error';
statusEl.textContent = '✗ ' + error.message;
submitBtn.disabled = false;
submitBtn.textContent = 'Save';
});
}
});
</script>

142
resources/views/layouts/app.blade.php
View File

@ -398,6 +398,13 @@
background: var(--border-color);
color: var(--text-primary);
}
/* Modal input focus */
#deleteVideoInput:focus {
outline: none;
border-color: #ef4444 !important;
box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}
</style>
@yield('extra_styles')
@ -431,6 +438,54 @@
@auth
@include('layouts.partials.upload-modal')
@include('layouts.partials.edit-video-modal')
<!-- Delete Video Modal -->
<div class="modal fade" id="deleteVideoModal" tabindex="-1" aria-labelledby="deleteVideoModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content" style="background: #1a1a1a; border: 1px solid #3f3f3f; border-radius: 12px;">
<div class="modal-header" style="border-bottom: 1px solid #3f3f3f; padding: 20px 24px;">
<h5 class="modal-title" id="deleteVideoModalLabel" style="color: #fff; font-weight: 600; display: flex; align-items: center; gap: 10px;">
<i class="bi bi-exclamation-triangle-fill" style="color: #ef4444;"></i>
Delete Video
</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" style="padding: 24px;">
<div style="background: #282828; border-radius: 8px; padding: 16px; margin-bottom: 20px;">
<p style="color: #fff; margin: 0; font-size: 14px; line-height: 1.6;">
<strong style="color: #ef4444;">Warning:</strong> This action is permanent and cannot be undone.
All data associated with this video will be lost, including:
</p>
<ul style="color: #aaa; margin: 12px 0 0; padding-left: 20px; font-size: 14px; line-height: 1.8;">
<li>View count</li>
<li>Comments</li>
<li>Likes</li>
<li>Thumbnail</li>
<li>Video file</li>
</ul>
</div>
<div>
<label for="deleteVideoInput" style="color: #aaa; font-size: 14px; margin-bottom: 8px; display: block;">
To confirm deletion, type <strong style="color: #fff;">"<span id="deleteVideoName"></span>"</strong> below:
</label>
<input type="text"
id="deleteVideoInput"
class="form-control"
style="background: #282828; border: 1px solid #3f3f3f; color: #fff; padding: 12px 16px; border-radius: 8px; font-size: 14px;"
placeholder="Enter video name">
</div>
</div>
<div class="modal-footer" style="border-top: 1px solid #3f3f3f; padding: 16px 24px; gap: 12px;">
<button type="button" class="btn" style="background: #3f3f3f; color: #fff; padding: 10px 20px; border-radius: 8px; font-weight: 500; border: none;" data-bs-dismiss="modal">
Cancel
</button>
<button type="button" id="confirmDeleteBtn" class="btn" style="background: #ef4444; color: #fff; padding: 10px 20px; border-radius: 8px; font-weight: 500; border: none; opacity: 0.5; cursor: not-allowed;" disabled onclick="confirmDeleteVideo()">
Delete Video
</button>
</div>
</div>
</div>
</div>
@endauth
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
@ -531,9 +586,94 @@
restoreSidebarState();
}
});
// Delete video modal functions
let currentDeleteVideoId = null;
let currentDeleteVideoTitle = '';
function showDeleteModal(videoId, videoTitle) {
currentDeleteVideoId = videoId;
currentDeleteVideoTitle = videoTitle;
document.getElementById('deleteVideoName').textContent = videoTitle;
document.getElementById('deleteVideoInput').value = '';
const deleteBtn = document.getElementById('confirmDeleteBtn');
deleteBtn.disabled = true;
deleteBtn.style.opacity = '0.5';
deleteBtn.style.cursor = 'not-allowed';
// Close the dropdown first
const dropdown = document.querySelector('.dropdown-menu.show');
if (dropdown) {
dropdown.classList.remove('show');
}
// Show the modal
const modalElement = document.getElementById('deleteVideoModal');
const modal = new bootstrap.Modal(modalElement);
modal.show();
}
document.getElementById('deleteVideoInput').addEventListener('input', function(e) {
const deleteBtn = document.getElementById('confirmDeleteBtn');
if (e.target.value === currentDeleteVideoTitle) {
deleteBtn.disabled = false;
deleteBtn.style.opacity = '1';
deleteBtn.style.cursor = 'pointer';
} else {
deleteBtn.disabled = true;
deleteBtn.style.opacity = '0.5';
deleteBtn.style.cursor = 'not-allowed';
}
});
function confirmDeleteVideo() {
if (!currentDeleteVideoId || !currentDeleteVideoTitle) return;
const inputValue = document.getElementById('deleteVideoInput').value;
if (inputValue !== currentDeleteVideoTitle) {
alert('Video name does not match. Please try again.');
return;
}
fetch(`/videos/${currentDeleteVideoId}`, {
method: 'DELETE',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}',
'Accept': 'application/json'
}
})
.then(response => {
// Check for successful response
if (response.status === 200 || response.status === 302 || response.redirected) {
// Close modal first
const modalElement = document.getElementById('deleteVideoModal');
const modal = bootstrap.Modal.getInstance(modalElement);
if (modal) {
modal.hide();
}
// Reload the page
window.location.reload();
} else if (response.status === 403) {
alert('You do not have permission to delete this video.');
} else if (response.status === 404) {
alert('Video not found.');
} else {
response.json().then(data => {
alert(data.message || 'Failed to delete video. Please try again.');
}).catch(() => {
alert('Failed to delete video. Please try again.');
});
}
})
.catch(error => {
console.error('Error:', error);
alert('An error occurred while deleting the video.');
});
}
</script>
@yield('scripts')
</body>
</html>

112
resources/views/layouts/partials/edit-video-modal.blade.php
View File

@ -83,6 +83,35 @@
class="form-textarea"
placeholder="Tell viewers about your video"></textarea>
</div>
<div class="form-group">
<label class="form-label">
<i class="bi bi-collection-play"></i> Video Type
</label>
<div class="video-type-options">
<label class="video-type-option" id="type-generic">
<input type="radio" name="type" value="generic" checked>
<div class="video-type-content">
<i class="bi bi-film"></i>
<span>Generic</span>
</div>
</label>
<label class="video-type-option" id="type-music">
<input type="radio" name="type" value="music">
<div class="video-type-content">
<i class="bi bi-music-note"></i>
<span>Music</span>
</div>
</label>
<label class="video-type-option" id="type-match">
<input type="radio" name="type" value="match">
<div class="video-type-content">
<i class="bi bi-trophy"></i>
<span>Match</span>
</div>
</label>
</div>
</div>
<div class="step-navigation">
<div></div>
@ -486,6 +515,63 @@
color: #666;
}
/* Video Type Options */
.video-type-options {
display: flex;
gap: 12px;
}
.video-type-option {
flex: 1;
cursor: pointer;
}
.video-type-option input {
display: none;
}
.video-type-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 12px;
background: #1a1a1a;
border: 2px solid #333;
border-radius: 12px;
transition: all 0.2s;
}
.video-type-option:hover .video-type-content {
border-color: #555;
background: #1f1f1f;
}
.video-type-option.active .video-type-content {
border-color: #e61e1e;
background: rgba(230, 30, 30, 0.1);
}
.video-type-content i {
font-size: 24px;
color: #666;
transition: color 0.2s;
}
.video-type-option.active .video-type-content i {
color: #e61e1e;
}
.video-type-content span {
font-size: 13px;
font-weight: 500;
color: #aaa;
}
.video-type-option.active .video-type-content span {
color: #e5e5e5;
}
/* Dropzone */
.dropzone-modal {
border: 2px dashed #404040;
@ -777,6 +863,10 @@
width: 30px;
}
.video-type-options {
flex-direction: column;
}
.step-navigation {
flex-direction: column-reverse;
gap: 12px;
@ -826,6 +916,17 @@ function openEditVideoModal(videoId) {
thumbnailWrapper.classList.remove('has-thumbnail');
}
// Set video type
const videoType = video.type || 'generic';
document.querySelectorAll('.video-type-option').forEach(opt => {
opt.classList.remove('active');
const radio = opt.querySelector('input[type="radio"]');
if (radio.value === videoType) {
radio.checked = true;
opt.classList.add('active');
}
});
// Set visibility
const visibility = video.visibility || 'public';
document.querySelectorAll('.visibility-option-modal').forEach(opt => {
@ -987,6 +1088,16 @@ function removeEditThumbnail(e) {
document.getElementById('edit-thumbnail-info').classList.remove('active');
}
// Video type options
const videoTypeOptions = document.querySelectorAll('.video-type-option');
videoTypeOptions.forEach(option => {
const radio = option.querySelector('input[type="radio"]');
radio.addEventListener('change', function() {
videoTypeOptions.forEach(opt => opt.classList.remove('active'));
option.classList.add('active');
});
});
// Visibility options
const editVisibilityOptions = document.querySelectorAll('.visibility-option-modal');
editVisibilityOptions.forEach(option => {
@ -1048,4 +1159,3 @@ document.getElementById('edit-video-form-modal').addEventListener('submit', func
});
});
</script>

102
resources/views/user/channel.blade.php
View File

@ -571,107 +571,7 @@
@else
<div class="yt-video-grid">
@foreach($videos as $video)
<div class="yt-video-card"
data-video-url="{{ asset('storage/videos/' . $video->filename) }}"
onmouseenter="playVideo(this)"
onmouseleave="stopVideo(this)">
<a href="{{ route('videos.show', $video->id) }}">
<div class="yt-video-thumb">
@if($video->thumbnail)
<img src="{{ asset('storage/thumbnails/' . $video->thumbnail) }}" alt="{{ $video->title }}">
@else
<img src="https://picsum.photos/seed/{{ $video->id }}/640/360" alt="{{ $video->title }}">
@endif
<video preload="none">
<source src="{{ asset('storage/videos/' . $video->filename) }}" type="{{ $video->mime_type ?? 'video/mp4' }}">
</video>
@if($video->duration)
<span class="yt-video-duration">{{ gmdate('i:s', $video->duration) }}</span>
@endif
</div>
</a>
<div class="yt-video-info">
<div class="yt-channel-icon">
@if($video->user && $video->user->avatar_url)
<img src="{{ $video->user->avatar_url }}" alt="{{ $video->user->name }}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
@endif
</div>
<div class="yt-video-details">
<h3 class="yt-video-title">
<a href="{{ route('videos.show', $video->id) }}">{{ $video->title }}</a>
</h3>
<div class="yt-channel-name">{{ $video->user->name ?? 'Unknown' }}</div>
<div class="yt-video-meta">
{{ number_format($video->size / 1024 / 1024, 0) }} MB • {{ $video->created_at->diffForHumans() }}
</div>
</div>
<div class="position-relative">
<button class="yt-more-btn" data-bs-toggle="dropdown">
<i class="bi bi-three-dots-vertical"></i>
</button>
<ul class="dropdown-menu dropdown-menu-dark yt-more-dropdown dropdown-menu-end">
@auth
@if(Auth::user()->id === $video->user_id)
<li>
<button class="yt-more-dropdown-item" onclick="openEditVideoModal('{{ $video->id }}')">
<i class="bi bi-pencil"></i> Edit
</button>
</li>
<li>
<button class="yt-more-dropdown-item text-danger" onclick="deleteVideo('{{ $video->id }}', '{{ addslashes($video->title) }}')">
<i class="bi bi-trash"></i> Delete
</button>
</li>
<li><hr class="dropdown-divider"></li>
@endif
@endauth
<li>
<button class="yt-more-dropdown-item" onclick="addToQueue('{{ $video->id }}')">
<i class="bi bi-list-nested"></i> Add to queue
</button>
</li>
<li>
<button class="yt-more-dropdown-item" onclick="saveToWatchLater('{{ $video->id }}')">
<i class="bi bi-clock"></i> Save to Watch later
</button>
</li>
<li>
<button class="yt-more-dropdown-item" onclick="openPlaylistModal('{{ $video->id }}')">
<i class="bi bi-bookmark"></i> Save to playlist
</button>
</li>
<li>
<a class="yt-more-dropdown-item" href="{{ route('videos.download', $video->id) }}">
<i class="bi bi-download"></i> Download
</a>
</li>
@if($video->isShareable())
<li>
<button class="yt-more-dropdown-item" onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')">
<i class="bi bi-share"></i> Share
</button>
</li>
@endif
<li><hr class="dropdown-divider"></li>
<li>
<button class="yt-more-dropdown-item" onclick="notInterested('{{ $video->id }}')">
<i class="bi bi-dash-circle"></i> Not interested
</button>
</li>
<li>
<button class="yt-more-dropdown-item" onclick="dontRecommendChannel('{{ $video->user_id }}')">
<i class="bi bi-x-circle"></i> Don't recommend channel
</button>
</li>
<li>
<button class="yt-more-dropdown-item" onclick="reportVideo('{{ $video->id }}')">
<i class="bi bi-flag"></i> Report
</button>
</li>
</ul>
</div>
</div>
</div>
<x-video-card :video="$video" size="small" />
@endforeach
</div>

30
resources/views/user/history.blade.php
View File

@ -142,35 +142,7 @@
@else
<div class="yt-video-grid">
@foreach($videos as $video)
<div class="yt-video-card">
<a href="{{ route('videos.show', $video->id) }}">
<div class="yt-video-thumb">
@if($video->thumbnail)
<img src="{{ asset('storage/thumbnails/' . $video->thumbnail) }}" alt="{{ $video->title }}">
@else
<img src="https://picsum.photos/seed/{{ $video->id }}/640/360" alt="{{ $video->title }}">
@endif
@if($video->duration)
<span class="yt-video-duration">{{ gmdate('i:s', $video->duration) }}</span>
@endif
</div>
</a>
<div class="yt-video-info">
<div class="yt-channel-icon">
@if($video->user && $video->user->avatar_url)
<img src="{{ $video->user->avatar_url }}" alt="{{ $video->user->name }}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
@endif
</div>
<div class="yt-video-details">
<h3 class="yt-video-title">
<a href="{{ route('videos.show', $video->id) }}">{{ $video->title }}</a>
</h3>
<div class="yt-video-meta">
{{ $video->user->name ?? 'Unknown' }} • {{ number_format($video->size / 1024 / 1024, 0) }} MB
</div>
</div>
</div>
</div>
<x-video-card :video="$video" size="small" />
@endforeach
</div>
@endif

30
resources/views/user/liked.blade.php
View File

@ -142,35 +142,7 @@
@else
<div class="yt-video-grid">
@foreach($videos as $video)
<div class="yt-video-card">
<a href="{{ route('videos.show', $video->id) }}">
<div class="yt-video-thumb">
@if($video->thumbnail)
<img src="{{ asset('storage/thumbnails/' . $video->thumbnail) }}" alt="{{ $video->title }}">
@else
<img src="https://picsum.photos/seed/{{ $video->id }}/640/360" alt="{{ $video->title }}">
@endif
@if($video->duration)
<span class="yt-video-duration">{{ gmdate('i:s', $video->duration) }}</span>
@endif
</div>
</a>
<div class="yt-video-info">
<div class="yt-channel-icon">
@if($video->user && $video->user->avatar_url)
<img src="{{ $video->user->avatar_url }}" alt="{{ $video->user->name }}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
@endif
</div>
<div class="yt-video-details">
<h3 class="yt-video-title">
<a href="{{ route('videos.show', $video->id) }}">{{ $video->title }}</a>
</h3>
<div class="yt-video-meta">
{{ $video->user->name ?? 'Unknown' }} • {{ number_format($video->size / 1024 / 1024, 0) }} MB
</div>
</div>
</div>
</div>
<x-video-card :video="$video" size="small" />
@endforeach
</div>

30
resources/views/videos/create.blade.php
View File

@ -302,6 +302,36 @@
</div>
</div>
<div class="form-group">
<label class="form-label">Video Type</label>
<div class="visibility-options">
<label class="visibility-option active">
<input type="radio" name="type" value="generic" checked>
<div class="visibility-content">
<i class="bi bi-film"></i>
<span class="visibility-title">Generic</span>
<span class="visibility-desc">Standard video</span>
</div>
</label>
<label class="visibility-option">
<input type="radio" name="type" value="music">
<div class="visibility-content">
<i class="bi bi-music-note"></i>
<span class="visibility-title">Music</span>
<span class="visibility-desc">Music video or song</span>
</div>
</label>
<label class="visibility-option">
<input type="radio" name="type" value="match">
<div class="visibility-content">
<i class="bi bi-trophy"></i>
<span class="visibility-title">Match</span>
<span class="visibility-desc">Sports match or competition</span>
</div>
</label>
</div>
</div>
<div class="form-group">
<label class="form-label">Privacy</label>
<div class="visibility-options">

87
resources/views/videos/index.blade.php
View File

@ -230,92 +230,7 @@
@else
<div class="yt-video-grid">
@foreach($videos as $video)
<div class="yt-video-card"
data-video-url="{{ asset('storage/videos/' . $video->filename) }}"
onmouseenter="playVideo(this)"
onmouseleave="stopVideo(this)">
<a href="{{ route('videos.show', $video->id) }}">
<div class="yt-video-thumb">
@if($video->thumbnail)
<img src="{{ asset('storage/thumbnails/' . $video->thumbnail) }}" alt="{{ $video->title }}">
@else
<img src="https://picsum.photos/seed/{{ $video->id }}/640/360" alt="{{ $video->title }}">
@endif
<video preload="none">
<source src="{{ asset('storage/videos/' . $video->filename) }}" type="{{ $video->mime_type ?? 'video/mp4' }}">
</video>
@if($video->duration)
<span class="yt-video-duration">{{ gmdate('i:s', $video->duration) }}</span>
@endif
</div>
</a>
<div class="yt-video-info">
<div class="yt-channel-icon">
@if($video->user && $video->user->avatar_url)
<img src="{{ $video->user->avatar_url }}" alt="{{ $video->user->name }}" style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%;">
@endif
</div>
<div class="yt-video-details">
<h3 class="yt-video-title">
<a href="{{ route('videos.show', $video->id) }}">{{ $video->title }}</a>
</h3>
<div class="yt-channel-name">{{ $video->user->name ?? 'Unknown' }}</div>
<div class="yt-video-meta">
{{ number_format($video->size / 1024 / 1024, 0) }} MB • {{ $video->created_at->diffForHumans() }}
</div>
</div>
<div class="position-relative">
<button class="yt-more-btn" data-bs-toggle="dropdown">
<i class="bi bi-three-dots-vertical"></i>
</button>
<ul class="dropdown-menu dropdown-menu-dark yt-more-dropdown dropdown-menu-end">
<li>
<button class="yt-more-dropdown-item" onclick="addToQueue('{{ $video->id }}')">
<i class="bi bi-list-nested"></i> Add to queue
</button>
</li>
<li>
<button class="yt-more-dropdown-item" onclick="saveToWatchLater('{{ $video->id }}')">
<i class="bi bi-clock"></i> Save to Watch later
</button>
</li>
<li>
<button class="yt-more-dropdown-item" onclick="openPlaylistModal('{{ $video->id }}')">
<i class="bi bi-bookmark"></i> Save to playlist
</button>
</li>
<li>
<a class="yt-more-dropdown-item" href="{{ route('videos.download', $video->id) }}">
<i class="bi bi-download"></i> Download
</a>
</li>
@if($video->isShareable())
<li>
<button class="yt-more-dropdown-item" onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')">
<i class="bi bi-share"></i> Share
</button>
</li>
@endif
<li><hr class="dropdown-divider"></li>
<li>
<button class="yt-more-dropdown-item" onclick="notInterested('{{ $video->id }}')">
<i class="bi bi-dash-circle"></i> Not interested
</button>
</li>
<li>
<button class="yt-more-dropdown-item" onclick="dontRecommendChannel('{{ $video->user_id }}')">
<i class="bi bi-x-circle"></i> Don't recommend channel
</button>
</li>
<li>
<button class="yt-more-dropdown-item" onclick="reportVideo('{{ $video->id }}')">
<i class="bi bi-flag"></i> Report
</button>
</li>
</ul>
</div>
</div>
</div>
<x-video-card :video="$video" />
@endforeach
</div>

4
resources/views/videos/show.blade.php
View File

@ -246,8 +246,10 @@
@endsection
@section('content')
<!-- Video Layout Container -->
<div class="video-layout-container" style="display: flex; gap: 24px; max-width: 1800px; margin: 0 auto;">
<!-- Video Section -->
<div class="yt-video-section">
<!-- Video Player -->
@ -328,6 +330,7 @@
<!-- Placeholder for recommended videos - would be dynamic in full implementation -->
<div class="text-secondary">More videos coming soon...</div>
</div>
</div>
@include('layouts.partials.share-modal')
@ -368,4 +371,3 @@
});
</script>
@endsection

1
resources/views/videos/test.txt
View File

@ -1 +0,0 @@
test

123
resources/views/videos/types/generic.blade.php Normal file
View File

@ -0,0 +1,123 @@
<!-- Video Layout Container -->
<div class="video-layout-container" style="display: flex; gap: 24px; max-width: 1800px; margin: 0 auto;">
<!-- Video Section -->
<div class="yt-video-section">
<!-- Video Player -->
<div class="video-container @if($video->orientation === 'portrait') portrait @elseif($video->orientation === 'square') square @elseif($video->orientation === 'ultrawide') ultrawide @endif" id="videoContainer">
<video id="videoPlayer" controls playsinline preload="metadata" autoplay>
<source src="{{ route('videos.stream', $video->id) }}" type="video/mp4">
</video>
</div>
<!-- Video Title -->
<h1 class="video-title">{{ $video->title }}</h1>
<!-- Stats Row -->
<div class="video-stats-row">
<div class="video-stats-left">
<span>{{ number_format($video->size / 1024 / 1024, 0) }} MB</span>
<span>•</span>
<span>{{ $video->created_at->format('M d, Y') }}</span>
@if($video->width && $video->height)
<span>•</span>
<span>{{ $video->width }}x{{ $video->height }}</span>
@endif
</div>
<div class="video-actions">
@auth
<!-- Like Button -->
<form method="POST" action="{{ $video->isLikedBy(Auth::user()) ? route('videos.unlike', $video->id) : route('videos.like', $video->id) }}" class="d-inline">
@csrf
<button type="submit" class="yt-action-btn {{ $video->isLikedBy(Auth::user()) ? 'liked' : '' }}">
<i class="bi {{ $video->isLikedBy(Auth::user()) ? 'bi-hand-thumbs-up-fill' : 'bi-hand-thumbs-up' }}"></i>
{{ $video->like_count > 0 ? $video->like_count : 'Like' }}
</button>
</form>
<!-- Edit Button - Only for video owner -->
@if(Auth::id() === $video->user_id)
<button class="yt-action-btn" onclick="openEditVideoModal({{ $video->id }})">
<i class="bi bi-pencil"></i> Edit
</button>
@endif
@else
<a href="{{ route('login') }}" class="yt-action-btn">
<i class="bi bi-hand-thumbs-up"></i> Like
</a>
@endauth
@if($video->isShareable())
<button class="yt-action-btn" onclick="openShareModal('{{ $video->share_url }}', '{{ addslashes($video->title) }}')"><i class="bi bi-share"></i> Share</button>
@endif
</div>
</div>
<!-- Channel Row -->
<div class="channel-row">
<a href="{{ route('channel', $video->user_id) }}" class="channel-info text-decoration-none" style="color: inherit;">
@if($video->user)
<img src="{{ $video->user->avatar_url }}" class="channel-avatar" alt="{{ $video->user->name }}">
@else
<div class="channel-avatar"></div>
@endif
<div>
<div class="channel-name">{{ $video->user->name ?? 'Unknown' }}</div>
<div class="channel-subs">Video Creator</div>
</div>
</a>
</div>
<!-- Description -->
@if($video->description)
<div class="video-description">
<p class="description-text">{{ $video->description }}</p>
</div>
@endif
</div>
<!-- Sidebar -->
<div class="yt-sidebar-container">
<h3 style="font-size: 16px; font-weight: 500; margin-bottom: 12px;">Up Next</h3>
<!-- Placeholder for recommended videos - would be dynamic in full implementation -->
<div class="text-secondary">More videos coming soon...</div>
</div>
</div>
@include('layouts.partials.share-modal')
@include('layouts.partials.edit-video-modal')
@if(Session::has('openEditModal') && Session::get('openEditModal'))
@auth
<script>
document.addEventListener('DOMContentLoaded', function() {
// Auto-open edit modal when redirected from /videos/{id}/edit
openEditVideoModal({{ $video->id }});
});
</script>
@endauth
@endif
<script>
// Auto-play video with sound when page loads
document.addEventListener('DOMContentLoaded', function() {
var videoPlayer = document.getElementById('videoPlayer');
if (videoPlayer) {
// Set volume to 50%
videoPlayer.volume = 0.5;
// Try to autoplay with sound
var playPromise = videoPlayer.play();
if (playPromise !== undefined) {
playPromise.then(function() {
// Autoplay started successfully
console.log('Video autoplayed with sound at 50% volume');
}).catch(function(error) {
// Autoplay was prevented
console.log('Autoplay blocked');
});
}
}
});
</script>

2691
resources/views/videos/types/match.blade.php Normal file
View File

File diff suppressed because it is too large Load Diff

0
resources/views/videos/types/music.blade.php Normal file
View File