admin panel added and comments are working and likes are working
This commit is contained in:
ghassan committed
1 parent
72e9439727
commit
a28023c29b
32 files changed
+5077
-2999
No files matched your search
@@ -1,9 +1,167 @@
|
||||
@extends('layouts.app')
|
||||
|
||||
@section('body_class', 'upload-page-only')
|
||||
|
||||
@section('title', 'Upload Video | ' . config('app.name'))
|
||||
|
||||
@section('extra_styles')
|
||||
<style>
|
||||
/* Mobile: Full page view */
|
||||
@media (max-width: 991px) {
|
||||
.upload-page-only .yt-header,
|
||||
.upload-page-only .yt-sidebar {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.upload-page-only .yt-main {
|
||||
display: block !important;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.upload-page-only.upload-page-responsive {
|
||||
display: block;
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.upload-page-only.upload-page-responsive .upload-modal-standalone {
|
||||
max-width: 100%;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.upload-page-only.upload-page-responsive .upload-modal-header {
|
||||
border-radius: 0;
|
||||
margin: -16px -16px 16px -16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.upload-page-only.upload-page-responsive .upload-modal-body {
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.upload-page-only.upload-page-responsive .form-input,
|
||||
.upload-page-only.upload-page-responsive .form-textarea {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.upload-page-only.upload-page-responsive .form-label {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.upload-page-only.upload-page-responsive .visibility-content-modal {
|
||||
background: var(--bg-secondary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.upload-page-only.upload-page-responsive .visibility-title {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.upload-page-only.upload-page-responsive .visibility-desc {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop: Modal view */
|
||||
@media (min-width: 992px) {
|
||||
.upload-page-only .yt-header,
|
||||
.upload-page-only .yt-sidebar,
|
||||
.upload-page-only .yt-main {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.upload-page-only {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
/* Common Modal Styles */
|
||||
.upload-modal-standalone {
|
||||
background: linear-gradient(145deg, #1e1e1e 0%, #252525 100%);
|
||||
border: 1px solid #3a3a3a;
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(230, 30, 30, 0.1);
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
max-width: 520px;
|
||||
animation: modalPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
|
||||
@keyframes modalPopIn {
|
||||
0% {
|
||||
transform: scale(0.8) translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
60% {
|
||||
transform: scale(1.02) translateY(-5px);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-modal-header {
|
||||
background: linear-gradient(135deg, #e63030 0%, #ff4d4d 100%);
|
||||
border-bottom: none;
|
||||
padding: 20px 24px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.upload-modal-header::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 100%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.upload-icon-wrapper {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
color: white;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.upload-modal-header .modal-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.upload-subtitle {
|
||||
font-size: 13px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.upload-modal-body {
|
||||
padding: 24px;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
/* Container for mobile */
|
||||
.upload-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
@@ -244,140 +402,503 @@
|
||||
margin-left: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop Modal Form Styles */
|
||||
@media (min-width: 992px) {
|
||||
.upload-modal-body .form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.upload-modal-body .form-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #e5e5e5;
|
||||
}
|
||||
|
||||
.upload-modal-body .form-label i {
|
||||
color: #e63030;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.upload-modal-body .form-input,
|
||||
.upload-modal-body .form-textarea {
|
||||
width: 100%;
|
||||
background: #121212;
|
||||
border: 1px solid #333;
|
||||
border-radius: 12px;
|
||||
padding: 14px 16px;
|
||||
color: #f1f1f1;
|
||||
font-size: 14px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.upload-modal-body .form-input:focus,
|
||||
.upload-modal-body .form-textarea:focus {
|
||||
outline: none;
|
||||
border-color: #e63030;
|
||||
box-shadow: 0 0 0 3px rgba(230, 30, 30, 0.15);
|
||||
}
|
||||
|
||||
.upload-modal-body .dropzone-modal {
|
||||
border: 2px dashed #404040;
|
||||
border-radius: 12px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
position: relative;
|
||||
background: #151515;
|
||||
}
|
||||
|
||||
.upload-modal-body .dropzone-modal:hover {
|
||||
border-color: #e63030;
|
||||
background: rgba(230, 30, 30, 0.05);
|
||||
}
|
||||
|
||||
.upload-modal-body .dropzone-modal.dragover {
|
||||
border-color: #e63030;
|
||||
background: rgba(230, 30, 30, 0.1);
|
||||
}
|
||||
|
||||
.upload-modal-body .dropzone-modal input[type="file"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-modal-body .dropzone-icon {
|
||||
font-size: 36px;
|
||||
color: #e63030;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.upload-modal-body .dropzone-title {
|
||||
color: #e5e5e5;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.upload-modal-body .dropzone-hint {
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-options-modal {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-option-modal {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-option-modal input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-content-modal {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 14px;
|
||||
background: #1a1a1a;
|
||||
border: 2px solid #333;
|
||||
border-radius: 12px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-option-modal:hover .visibility-content-modal {
|
||||
border-color: #555;
|
||||
background: #1f1f1f;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-option-modal.active .visibility-content-modal {
|
||||
border-color: #e63030;
|
||||
background: rgba(230, 30, 30, 0.1);
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-content-modal i {
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
width: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-option-modal.active .visibility-content-modal i {
|
||||
color: #e63030;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-title {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
color: #e5e5e5;
|
||||
}
|
||||
|
||||
.upload-modal-body .visibility-desc {
|
||||
color: #777;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.upload-modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
margin-top: 24px;
|
||||
padding-top: 20px;
|
||||
border-top: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.upload-modal-actions .btn-cancel,
|
||||
.upload-modal-actions .btn-submit {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 20px;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.upload-modal-actions .btn-cancel {
|
||||
background: transparent;
|
||||
border: 1px solid #404040;
|
||||
color: #aaa;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.upload-modal-actions .btn-cancel:hover {
|
||||
border-color: #666;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.upload-modal-actions .btn-submit {
|
||||
background: linear-gradient(135deg, #e63030 0%, #ff4d4d 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 15px rgba(230, 30, 30, 0.3);
|
||||
}
|
||||
|
||||
.upload-modal-actions .btn-submit:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(230, 30, 30, 0.4);
|
||||
}
|
||||
|
||||
.upload-modal-actions .btn-submit:disabled {
|
||||
background: #555;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@section('content')
|
||||
<div class="upload-container">
|
||||
<h1 style="font-size: 24px; font-weight: 500; margin-bottom: 24px;">Upload Video</h1>
|
||||
<div class="upload-modal-standalone">
|
||||
<!-- Header -->
|
||||
<div class="upload-modal-header">
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<div class="upload-icon-wrapper">
|
||||
<i class="bi bi-cloud-arrow-up-fill"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="modal-title">Upload Video</h5>
|
||||
<span class="upload-subtitle">Share your creativity</span>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ route('videos.index') }}" class="btn-close btn-close-white" style="position: relative; z-index: 1; text-decoration: none;">×</a>
|
||||
</div>
|
||||
|
||||
<form id="upload-form" enctype="multipart/form-data">
|
||||
@csrf
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Title *</label>
|
||||
<input type="text" name="title" required
|
||||
class="form-input"
|
||||
placeholder="Enter video title">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Description</label>
|
||||
<textarea name="description" rows="4"
|
||||
class="form-textarea"
|
||||
placeholder="Tell viewers about your video"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="upload-row">
|
||||
<!-- Body -->
|
||||
<div class="upload-modal-body">
|
||||
<form id="upload-form" enctype="multipart/form-data">
|
||||
@csrf
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Video File *</label>
|
||||
<div id="dropzone">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-card-heading"></i> Title *
|
||||
</label>
|
||||
<input type="text" name="title" required
|
||||
class="form-input"
|
||||
placeholder="Enter video title">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-text-paragraph"></i> Description
|
||||
</label>
|
||||
<textarea name="description" rows="3"
|
||||
class="form-textarea"
|
||||
placeholder="Tell viewers about your video"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-camera-video"></i> Video File *
|
||||
</label>
|
||||
<div id="dropzone" class="dropzone-modal">
|
||||
<input type="file" name="video" id="video" accept="video/*" required>
|
||||
<div id="dropzone-default">
|
||||
<i class="bi bi-camera-video icon"></i>
|
||||
<p>Click to select or drag video here</p>
|
||||
<p class="hint">MP4, MOV, AVI, WebM up to 512MB</p>
|
||||
<div class="dropzone-icon">
|
||||
<i class="bi bi-cloud-arrow-up"></i>
|
||||
</div>
|
||||
<p class="dropzone-title">Click to select or drag video here</p>
|
||||
<p class="dropzone-hint">MP4, MOV, AVI, WebM up to 512MB</p>
|
||||
</div>
|
||||
<div id="file-info">
|
||||
<p class="filename" id="filename"></p>
|
||||
<p id="filesize"></p>
|
||||
<div class="file-preview">
|
||||
<i class="bi bi-film"></i>
|
||||
</div>
|
||||
<div class="file-details">
|
||||
<p class="filename" id="filename"></p>
|
||||
<p id="filesize"></p>
|
||||
</div>
|
||||
<button type="button" class="btn-remove-file" onclick="removeVideo(event)">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Thumbnail (optional)</label>
|
||||
<div id="thumbnail-dropzone">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-image"></i> Thumbnail (optional)
|
||||
</label>
|
||||
<div id="thumbnail-dropzone" class="dropzone-modal">
|
||||
<input type="file" name="thumbnail" id="thumbnail" accept="image/*">
|
||||
<div id="thumbnail-default">
|
||||
<i class="bi bi-image icon"></i>
|
||||
<p>Click to select or drag thumbnail</p>
|
||||
<p class="hint">JPG, PNG, WebP up to 5MB</p>
|
||||
<div class="dropzone-icon">
|
||||
<i class="bi bi-card-image"></i>
|
||||
</div>
|
||||
<p class="dropzone-title">Click to select or drag thumbnail</p>
|
||||
<p class="dropzone-hint">JPG, PNG, WebP up to 5MB</p>
|
||||
</div>
|
||||
<div id="thumbnail-info">
|
||||
<p class="filename" id="thumbnail-filename"></p>
|
||||
<p id="thumbnail-filesize"></p>
|
||||
<div class="file-preview thumbnail-preview">
|
||||
<img id="thumbnail-preview-img" src="" alt="Thumbnail preview">
|
||||
</div>
|
||||
<div class="file-details">
|
||||
<p class="filename" id="thumbnail-filename"></p>
|
||||
<p id="thumbnail-filesize"></p>
|
||||
</div>
|
||||
<button type="button" class="btn-remove-file" onclick="removeThumbnail(event)">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</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>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-collection-play"></i> Video Type
|
||||
</label>
|
||||
<div class="visibility-options-modal" id="type-options">
|
||||
<label class="visibility-option-modal active">
|
||||
<input type="radio" name="type" value="generic" checked>
|
||||
<div class="visibility-content-modal">
|
||||
<i class="bi bi-film"></i>
|
||||
<div class="visibility-text">
|
||||
<span class="visibility-title">Generic</span>
|
||||
<span class="visibility-desc">Standard video</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="visibility-option-modal">
|
||||
<input type="radio" name="type" value="music">
|
||||
<div class="visibility-content-modal">
|
||||
<i class="bi bi-music-note"></i>
|
||||
<div class="visibility-text">
|
||||
<span class="visibility-title">Music</span>
|
||||
<span class="visibility-desc">Music video or song</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="visibility-option-modal">
|
||||
<input type="radio" name="type" value="match">
|
||||
<div class="visibility-content-modal">
|
||||
<i class="bi bi-trophy"></i>
|
||||
<div class="visibility-text">
|
||||
<span class="visibility-title">Match</span>
|
||||
<span class="visibility-desc">Sports match or competition</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">Privacy</label>
|
||||
<div class="visibility-options">
|
||||
<label class="visibility-option active">
|
||||
<input type="radio" name="visibility" value="public" checked>
|
||||
<div class="visibility-content">
|
||||
<i class="bi bi-globe"></i>
|
||||
<span class="visibility-title">Public</span>
|
||||
<span class="visibility-desc">Everyone can see this video</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="visibility-option">
|
||||
<input type="radio" name="visibility" value="unlisted">
|
||||
<div class="visibility-content">
|
||||
<i class="bi bi-link-45deg"></i>
|
||||
<span class="visibility-title">Unlisted</span>
|
||||
<span class="visibility-desc">Only people with the link can see</span>
|
||||
</div>
|
||||
</label>
|
||||
<label class="visibility-option">
|
||||
<input type="radio" name="visibility" value="private">
|
||||
<div class="visibility-content">
|
||||
<i class="bi bi-lock"></i>
|
||||
<span class="visibility-title">Private</span>
|
||||
<span class="visibility-desc">Only you can see this video</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
<i class="bi bi-shield-lock"></i> Privacy Setting
|
||||
</label>
|
||||
<div class="visibility-options-modal" id="visibility-options">
|
||||
<label class="visibility-option-modal active">
|
||||
<input type="radio" name="visibility" value="public" checked>
|
||||
<div class="visibility-content-modal">
|
||||
<i class="bi bi-globe"></i>
|
||||
<div class="visibility-text">
|
||||
<span class="visibility-title">Public</span>
|
||||
<span class="visibility-desc">Everyone can see this video</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="visibility-option-modal">
|
||||
<input type="radio" name="visibility" value="unlisted">
|
||||
<div class="visibility-content-modal">
|
||||
<i class="bi bi-link-45deg"></i>
|
||||
<div class="visibility-text">
|
||||
<span class="visibility-title">Unlisted</span>
|
||||
<span class="visibility-desc">Only people with the link</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="visibility-option-modal">
|
||||
<input type="radio" name="visibility" value="private">
|
||||
<div class="visibility-content-modal">
|
||||
<i class="bi bi-lock"></i>
|
||||
<div class="visibility-text">
|
||||
<span class="visibility-title">Private</span>
|
||||
<span class="visibility-desc">Only you can see</span>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div id="progress-container">
|
||||
<div class="progress-bar-wrapper">
|
||||
<div id="progress-bar" class="progress-bar-fill"></div>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div id="progress-container">
|
||||
<div class="progress-bar-wrapper">
|
||||
<div id="progress-bar" class="progress-bar-fill"></div>
|
||||
</div>
|
||||
<p id="progress-text" class="progress-text">Uploading... 0%</p>
|
||||
</div>
|
||||
<p id="progress-text" class="progress-text">Uploading... 0%</p>
|
||||
</div>
|
||||
|
||||
<!-- Status Message -->
|
||||
<div id="status-message"></div>
|
||||
|
||||
<button type="submit" id="submit-btn" class="btn-submit">
|
||||
Upload Video
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Status Message -->
|
||||
<div id="status-message"></div>
|
||||
|
||||
<div class="upload-modal-actions">
|
||||
<a href="{{ route('videos.index') }}" class="btn-cancel">
|
||||
Cancel
|
||||
</a>
|
||||
<button type="submit" id="submit-btn" class="btn-submit">
|
||||
<i class="bi bi-cloud-arrow-up-fill"></i> Upload Video
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop only: modal overlay styles -->
|
||||
<style>
|
||||
@media (min-width: 992px) {
|
||||
.file-preview {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: linear-gradient(135deg, #e63030 0%, #ff6b6b 100%);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.file-preview.thumbnail-preview {
|
||||
background: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.file-preview.thumbnail-preview img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.file-details {
|
||||
flex: 1;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.file-details .filename {
|
||||
color: #e5e5e5;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
margin: 0 0 4px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.file-details p {
|
||||
color: #888;
|
||||
font-size: 13px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.btn-remove-file {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: #333;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.btn-remove-file:hover {
|
||||
background: #e63030;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#file-info, #thumbnail-info {
|
||||
display: none;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px;
|
||||
background: #1f1f1f;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
#file-info.active, #thumbnail-info.active {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#dropzone, #thumbnail-dropzone {
|
||||
padding: 0;
|
||||
border: 2px dashed #404040;
|
||||
}
|
||||
|
||||
#dropzone-default, #thumbnail-default {
|
||||
padding: 32px 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@section('scripts')
|
||||
@@ -386,12 +907,14 @@
|
||||
const dropzone = document.getElementById('dropzone');
|
||||
const fileInput = document.getElementById('video');
|
||||
|
||||
// Add change event listener for video file selection
|
||||
fileInput.addEventListener('change', function() {
|
||||
handleFileSelect(this);
|
||||
});
|
||||
|
||||
dropzone.addEventListener('click', () => fileInput.click());
|
||||
dropzone.addEventListener('click', function(e) {
|
||||
if (e.target.classList.contains('btn-remove-file')) return;
|
||||
fileInput.click();
|
||||
});
|
||||
|
||||
dropzone.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
@@ -414,9 +937,8 @@
|
||||
function handleFileSelect(input) {
|
||||
if (input.files && input.files[0]) {
|
||||
const file = input.files[0];
|
||||
const maxSize = 512 * 1024 * 1024; // 512MB in bytes
|
||||
const maxSize = 512 * 1024 * 1024;
|
||||
|
||||
// Validate file type
|
||||
const validTypes = ['video/mp4', 'video/webm', 'video/ogg', 'video/quicktime', 'video/x-msvideo', 'video/x-flv', 'video/x-matroska'];
|
||||
const validExtensions = ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.wmv', '.flv', '.mkv'];
|
||||
|
||||
@@ -429,16 +951,12 @@
|
||||
if (!isValidType) {
|
||||
alert('Invalid video format. Please select a valid video file (MP4, MOV, AVI, WebM, OGG, WMV, FLV, MKV).');
|
||||
input.value = '';
|
||||
document.getElementById('dropzone-default').style.display = 'block';
|
||||
document.getElementById('file-info').classList.remove('active');
|
||||
return;
|
||||
}
|
||||
|
||||
if (file.size > maxSize) {
|
||||
alert('File size exceeds 512MB limit. Please select a smaller video file.');
|
||||
input.value = ''; // Clear the input
|
||||
document.getElementById('dropzone-default').style.display = 'block';
|
||||
document.getElementById('file-info').classList.remove('active');
|
||||
input.value = '';
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -449,11 +967,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
function removeVideo(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
fileInput.value = '';
|
||||
document.getElementById('dropzone-default').style.display = 'block';
|
||||
document.getElementById('file-info').classList.remove('active');
|
||||
}
|
||||
|
||||
// Thumbnail Dropzone
|
||||
const thumbnailDropzone = document.getElementById('thumbnail-dropzone');
|
||||
const thumbnailInput = document.getElementById('thumbnail');
|
||||
|
||||
thumbnailDropzone.addEventListener('click', () => thumbnailInput.click());
|
||||
thumbnailDropzone.addEventListener('click', function(e) {
|
||||
if (e.target.classList.contains('btn-remove-file')) return;
|
||||
thumbnailInput.click();
|
||||
});
|
||||
|
||||
thumbnailDropzone.addEventListener('dragover', (e) => {
|
||||
e.preventDefault();
|
||||
@@ -482,13 +1011,37 @@
|
||||
const file = input.files[0];
|
||||
document.getElementById('thumbnail-filename').textContent = file.name;
|
||||
document.getElementById('thumbnail-filesize').textContent = (file.size / 1024 / 1024).toFixed(2) + ' MB';
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = function(e) {
|
||||
document.getElementById('thumbnail-preview-img').src = e.target.result;
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
document.getElementById('thumbnail-default').style.display = 'none';
|
||||
document.getElementById('thumbnail-info').classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
function removeThumbnail(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
thumbnailInput.value = '';
|
||||
document.getElementById('thumbnail-default').style.display = 'block';
|
||||
document.getElementById('thumbnail-info').classList.remove('active');
|
||||
}
|
||||
|
||||
// Visibility option handling
|
||||
const visibilityOptions = document.querySelectorAll('.visibility-option');
|
||||
const typeOptions = document.querySelectorAll('#type-options .visibility-option-modal');
|
||||
typeOptions.forEach(option => {
|
||||
const radio = option.querySelector('input[type="radio"]');
|
||||
radio.addEventListener('change', function() {
|
||||
typeOptions.forEach(opt => opt.classList.remove('active'));
|
||||
option.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
const visibilityOptions = document.querySelectorAll('#visibility-options .visibility-option-modal');
|
||||
visibilityOptions.forEach(option => {
|
||||
const radio = option.querySelector('input[type="radio"]');
|
||||
radio.addEventListener('change', function() {
|
||||
@@ -505,7 +1058,7 @@
|
||||
|
||||
document.getElementById('progress-container').classList.add('active');
|
||||
document.getElementById('submit-btn').disabled = true;
|
||||
document.getElementById('submit-btn').textContent = 'Uploading...';
|
||||
document.getElementById('submit-btn').innerHTML = '<i class="bi bi-arrow-repeat"></i> Uploading...';
|
||||
document.getElementById('status-message').className = '';
|
||||
|
||||
xhr.upload.addEventListener('progress', function(e) {
|
||||
@@ -544,11 +1097,10 @@
|
||||
|
||||
function showError(message) {
|
||||
const status = document.getElementById('status-message');
|
||||
status.textContent = message;
|
||||
status.innerHTML = '<i class="bi bi-exclamation-circle-fill"></i> ' + message;
|
||||
status.className = 'error';
|
||||
document.getElementById('submit-btn').disabled = false;
|
||||
document.getElementById('submit-btn').textContent = 'Upload Video';
|
||||
document.getElementById('submit-btn').innerHTML = '<i class="bi bi-cloud-arrow-up-fill"></i> Upload Video';
|
||||
}
|
||||
</script>
|
||||
@endsection
|
||||
|
||||
Reference in new issue
Block a user