made the video cards components
This commit is contained in:
ghassan
parent
3aa49d638d
commit
72e9439727
@ -58,6 +58,7 @@ class VideoController extends Controller
|
|||||||
'video' => 'required|file|mimes:mp4,webm,ogg,mov,avi,wmv,flv,mkv|max:512000',
|
'video' => 'required|file|mimes:mp4,webm,ogg,mov,avi,wmv,flv,mkv|max:512000',
|
||||||
'thumbnail' => 'nullable|image|mimes:jpg,jpeg,png,webp|max:5120',
|
'thumbnail' => 'nullable|image|mimes:jpg,jpeg,png,webp|max:5120',
|
||||||
'visibility' => 'nullable|in:public,unlisted,private',
|
'visibility' => 'nullable|in:public,unlisted,private',
|
||||||
|
'type' => 'nullable|in:generic,music,match',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
$videoFile = $request->file('video');
|
$videoFile = $request->file('video');
|
||||||
@ -148,6 +149,7 @@ class VideoController extends Controller
|
|||||||
'height' => $height,
|
'height' => $height,
|
||||||
'status' => 'processing',
|
'status' => 'processing',
|
||||||
'visibility' => $request->visibility ?? 'public',
|
'visibility' => $request->visibility ?? 'public',
|
||||||
|
'type' => $request->type ?? 'generic',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
// Dispatch compression job in the background
|
// Dispatch compression job in the background
|
||||||
@ -221,6 +223,7 @@ class VideoController extends Controller
|
|||||||
'thumbnail' => $video->thumbnail,
|
'thumbnail' => $video->thumbnail,
|
||||||
'thumbnail_url' => $video->thumbnail ? asset('storage/thumbnails/' . $video->thumbnail) : null,
|
'thumbnail_url' => $video->thumbnail ? asset('storage/thumbnails/' . $video->thumbnail) : null,
|
||||||
'visibility' => $video->visibility ?? 'public',
|
'visibility' => $video->visibility ?? 'public',
|
||||||
|
'type' => $video->type ?? 'generic',
|
||||||
]
|
]
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
@ -237,9 +240,10 @@ class VideoController extends Controller
|
|||||||
'description' => 'nullable|string',
|
'description' => 'nullable|string',
|
||||||
'thumbnail' => 'nullable|image|mimes:jpg,jpeg,png,webp|max:5120',
|
'thumbnail' => 'nullable|image|mimes:jpg,jpeg,png,webp|max:5120',
|
||||||
'visibility' => 'nullable|in:public,unlisted,private',
|
'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 ($request->hasFile('thumbnail')) {
|
||||||
if ($video->thumbnail) {
|
if ($video->thumbnail) {
|
||||||
|
|||||||
@ -21,6 +21,7 @@ class Video extends Model
|
|||||||
'height',
|
'height',
|
||||||
'status',
|
'status',
|
||||||
'visibility',
|
'visibility',
|
||||||
|
'type',
|
||||||
];
|
];
|
||||||
|
|
||||||
protected $casts = [
|
protected $casts = [
|
||||||
@ -137,5 +138,30 @@ class Video extends Model
|
|||||||
}
|
}
|
||||||
return $query->where('visibility', '!=', 'private');
|
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';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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
817
resources/views/components/video-card.blade.php
Normal 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>
|
||||||
@ -398,6 +398,13 @@
|
|||||||
background: var(--border-color);
|
background: var(--border-color);
|
||||||
color: var(--text-primary);
|
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>
|
</style>
|
||||||
|
|
||||||
@yield('extra_styles')
|
@yield('extra_styles')
|
||||||
@ -431,6 +438,54 @@
|
|||||||
@auth
|
@auth
|
||||||
@include('layouts.partials.upload-modal')
|
@include('layouts.partials.upload-modal')
|
||||||
@include('layouts.partials.edit-video-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
|
@endauth
|
||||||
|
|
||||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
@ -531,9 +586,94 @@
|
|||||||
restoreSidebarState();
|
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>
|
</script>
|
||||||
|
|
||||||
@yield('scripts')
|
@yield('scripts')
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
@ -83,6 +83,35 @@
|
|||||||
class="form-textarea"
|
class="form-textarea"
|
||||||
placeholder="Tell viewers about your video"></textarea>
|
placeholder="Tell viewers about your video"></textarea>
|
||||||
</div>
|
</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 class="step-navigation">
|
||||||
<div></div>
|
<div></div>
|
||||||
@ -486,6 +515,63 @@
|
|||||||
color: #666;
|
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 */
|
||||||
.dropzone-modal {
|
.dropzone-modal {
|
||||||
border: 2px dashed #404040;
|
border: 2px dashed #404040;
|
||||||
@ -777,6 +863,10 @@
|
|||||||
width: 30px;
|
width: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.video-type-options {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
.step-navigation {
|
.step-navigation {
|
||||||
flex-direction: column-reverse;
|
flex-direction: column-reverse;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
@ -826,6 +916,17 @@ function openEditVideoModal(videoId) {
|
|||||||
thumbnailWrapper.classList.remove('has-thumbnail');
|
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
|
// Set visibility
|
||||||
const visibility = video.visibility || 'public';
|
const visibility = video.visibility || 'public';
|
||||||
document.querySelectorAll('.visibility-option-modal').forEach(opt => {
|
document.querySelectorAll('.visibility-option-modal').forEach(opt => {
|
||||||
@ -987,6 +1088,16 @@ function removeEditThumbnail(e) {
|
|||||||
document.getElementById('edit-thumbnail-info').classList.remove('active');
|
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
|
// Visibility options
|
||||||
const editVisibilityOptions = document.querySelectorAll('.visibility-option-modal');
|
const editVisibilityOptions = document.querySelectorAll('.visibility-option-modal');
|
||||||
editVisibilityOptions.forEach(option => {
|
editVisibilityOptions.forEach(option => {
|
||||||
@ -1048,4 +1159,3 @@ document.getElementById('edit-video-form-modal').addEventListener('submit', func
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@ -571,107 +571,7 @@
|
|||||||
@else
|
@else
|
||||||
<div class="yt-video-grid">
|
<div class="yt-video-grid">
|
||||||
@foreach($videos as $video)
|
@foreach($videos as $video)
|
||||||
<div class="yt-video-card"
|
<x-video-card :video="$video" size="small" />
|
||||||
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>
|
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -142,35 +142,7 @@
|
|||||||
@else
|
@else
|
||||||
<div class="yt-video-grid">
|
<div class="yt-video-grid">
|
||||||
@foreach($videos as $video)
|
@foreach($videos as $video)
|
||||||
<div class="yt-video-card">
|
<x-video-card :video="$video" size="small" />
|
||||||
<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>
|
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
@endif
|
@endif
|
||||||
|
|||||||
@ -142,35 +142,7 @@
|
|||||||
@else
|
@else
|
||||||
<div class="yt-video-grid">
|
<div class="yt-video-grid">
|
||||||
@foreach($videos as $video)
|
@foreach($videos as $video)
|
||||||
<div class="yt-video-card">
|
<x-video-card :video="$video" size="small" />
|
||||||
<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>
|
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -302,6 +302,36 @@
|
|||||||
</div>
|
</div>
|
||||||
</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">
|
<div class="form-group">
|
||||||
<label class="form-label">Privacy</label>
|
<label class="form-label">Privacy</label>
|
||||||
<div class="visibility-options">
|
<div class="visibility-options">
|
||||||
|
|||||||
@ -230,92 +230,7 @@
|
|||||||
@else
|
@else
|
||||||
<div class="yt-video-grid">
|
<div class="yt-video-grid">
|
||||||
@foreach($videos as $video)
|
@foreach($videos as $video)
|
||||||
<div class="yt-video-card"
|
<x-video-card :video="$video" />
|
||||||
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>
|
|
||||||
@endforeach
|
@endforeach
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -246,8 +246,10 @@
|
|||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
@section('content')
|
@section('content')
|
||||||
|
|
||||||
<!-- Video Layout Container -->
|
<!-- Video Layout Container -->
|
||||||
<div class="video-layout-container" style="display: flex; gap: 24px; max-width: 1800px; margin: 0 auto;">
|
<div class="video-layout-container" style="display: flex; gap: 24px; max-width: 1800px; margin: 0 auto;">
|
||||||
|
|
||||||
<!-- Video Section -->
|
<!-- Video Section -->
|
||||||
<div class="yt-video-section">
|
<div class="yt-video-section">
|
||||||
<!-- Video Player -->
|
<!-- Video Player -->
|
||||||
@ -328,6 +330,7 @@
|
|||||||
<!-- Placeholder for recommended videos - would be dynamic in full implementation -->
|
<!-- Placeholder for recommended videos - would be dynamic in full implementation -->
|
||||||
<div class="text-secondary">More videos coming soon...</div>
|
<div class="text-secondary">More videos coming soon...</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@include('layouts.partials.share-modal')
|
@include('layouts.partials.share-modal')
|
||||||
@ -368,4 +371,3 @@
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
@endsection
|
@endsection
|
||||||
|
|
||||||
|
|||||||
@ -1 +0,0 @@
|
|||||||
test
|
|
||||||
123
resources/views/videos/types/generic.blade.php
Normal file
123
resources/views/videos/types/generic.blade.php
Normal 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
2691
resources/views/videos/types/match.blade.php
Normal file
File diff suppressed because it is too large
Load Diff
0
resources/views/videos/types/music.blade.php
Normal file
0
resources/views/videos/types/music.blade.php
Normal file
Loading…
x
Reference in New Issue
Block a user