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

update latest

Browse Source
This commit is contained in:
ghassan 2026-02-25 02:12:56 +00:00
parent b38f1a93bb
commit eb707c1ee1
7 changed files with 202 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
TODO.md
View File

@ -1,9 +1,33 @@
# TODO: Convert Edit Video Page to Modal
# TODO: Add Delete and Edit options to channel video 3-dot menu
## Steps:
- [x] 1. Create edit-video-modal.blade.php partial with cute design
- [x] 2. Modify VideoController's edit() method to support AJAX
- [x] 3. Modify VideoController's update() method for AJAX response
- [x] 4. Add Edit button and modal include to video show page
- [x] 5. Test the modal functionality
## Task
In `https://video.innovator.bh/channel/2`, the 3-dot menu must have Delete and Edit options.
## Requirements
- `/videos` (public area) - NO edit/delete options
- `/channel/{id}` (user channel page) - Edit and Delete options for the channel owner only
## Plan
### Step 1: Modify app.blade.php
- Add include for edit-video-modal partial
### Step 2: Modify channel.blade.php
- Add conditional check for video ownership
- Add Edit button that calls openEditVideoModal()
- Add Delete button with confirmation
- Add separator before owner-only options
### Step 3: Add JavaScript for delete functionality
- Add deleteVideo() function with AJAX call
### Step 4: Update VideoController
- Add ownership check to destroy method
- Return JSON for AJAX requests
## Status: Completed
## Files Modified
1. `resources/views/layouts/app.blade.php` - Added edit-video-modal include
2. `resources/views/user/channel.blade.php` - Added Edit/Delete in dropdown
3. `app/Http/Controllers/VideoController.php` - Updated destroy method

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

@ -274,13 +274,29 @@ class VideoController extends Controller
return redirect()->route('videos.show', $video)->with('success', 'Video updated!');
}
public function destroy(Video $video)
public function destroy(Request $request, Video $video)
{
// Check if user owns the video
if (Auth::id() !== $video->user_id) {
abort(403, 'You do not have permission to delete this video.');
}
$videoTitle = $video->title;
Storage::delete('public/videos/' . $video->filename);
if ($video->thumbnail) {
Storage::delete('public/thumbnails/' . $video->thumbnail);
}
$video->delete();
// Return JSON for AJAX requests
if ($request->expectsJson() || $request->ajax()) {
return response()->json([
'success' => true,
'message' => 'Video deleted successfully!',
]);
}
return redirect()->route('videos.index')->with('success', 'Video deleted!');
}
@ -347,4 +363,22 @@ class VideoController extends Controller
exit;
}
}
public function download(Video $video)
{
// Check if user can view this video
if (!$video->canView(Auth::user())) {
abort(404, 'Video not found');
}
$path = storage_path('app/public/videos/' . $video->filename);
if (!file_exists($path)) {
abort(404, 'Video file not found');
}
$filename = $video->title . '.' . pathinfo($video->filename, PATHINFO_EXTENSION);
return response()->download($path, $filename);
}
}

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

@ -345,6 +345,7 @@
<!-- Upload Modal -->
@auth
@include('layouts.partials.upload-modal')
@include('layouts.partials.edit-video-modal')
@endauth
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

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

@ -317,6 +317,41 @@
<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) }}')">
@ -324,14 +359,21 @@
</button>
</li>
@endif
<li><a class="yt-more-dropdown-item" href="{{ route('videos.edit', $video->id) }}"><i class="bi bi-pencil"></i> Edit</a></li>
<li><a class="yt-more-dropdown-item" href="{{ route('videos.show', $video->id) }}"><i class="bi bi-play"></i> Play</a></li>
<li><hr class="dropdown-divider"></li>
<li>
<form action="{{ route('videos.destroy', $video->id) }}" method="POST" onsubmit="return confirm('Delete this video?');" class="m-0">
@csrf @method('DELETE')
<button type="submit" class="yt-more-dropdown-item text-danger"><i class="bi bi-trash"></i> Delete</button>
</form>
<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>
@ -367,6 +409,32 @@ function stopVideo(card) {
video.classList.remove('active');
}
}
function deleteVideo(videoId, videoTitle) {
if (confirm('Are you sure you want to delete "' + videoTitle + '"? This action cannot be undone.')) {
fetch(`/videos/${videoId}`, {
method: 'DELETE',
headers: {
'X-CSRF-TOKEN': '{{ csrf_token() }}',
'Accept': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(response => response.json())
.then(data => {
if (data.success || data.redirect) {
// Reload the page to show updated video list
window.location.reload();
} else {
alert('Failed to delete video. Please try again.');
}
})
.catch(error => {
console.error('Error:', error);
alert('Failed to delete video. Please try again.');
});
}
}
</script>
@endsection

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

@ -269,6 +269,26 @@
<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) }}')">
@ -276,14 +296,21 @@
</button>
</li>
@endif
<li><a class="yt-more-dropdown-item" href="{{ route('videos.edit', $video->id) }}"><i class="bi bi-pencil"></i> Edit</a></li>
<li><a class="yt-more-dropdown-item" href="{{ route('videos.show', $video->id) }}"><i class="bi bi-play"></i> Play</a></li>
<li><hr class="dropdown-divider"></li>
<li>
<form action="{{ route('videos.destroy', $video->id) }}" method="POST" onsubmit="return confirm('Delete this video?');" class="m-0">
@csrf @method('DELETE')
<button type="submit" class="yt-more-dropdown-item text-danger"><i class="bi bi-trash"></i> Delete</button>
</form>
<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>

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

@ -187,8 +187,8 @@
<!-- 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">
<video controls playsinline preload="metadata">
<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">
<source src="{{ route('videos.stream', $video->id) }}" type="video/mp4">
</video>
</div>
@ -279,5 +279,30 @@
</script>
@endauth
@endif
<script>
// Auto-play video with sound when page loads
document.addEventListener('DOMContentLoaded', function() {
var videoPlayer = document.getElementById('videoPlayer');
if (videoPlayer) {
// Try to autoplay with sound (works because user just clicked on the video)
var playPromise = videoPlayer.play();
if (playPromise !== undefined) {
playPromise.then(function() {
// Autoplay started successfully
console.log('Video autoplayed with sound');
}).catch(function(error) {
// Autoplay was prevented, try muted
console.log('Autoplay blocked, attempting muted autoplay');
videoPlayer.muted = true;
videoPlayer.play().catch(function(e) {
console.log('Muted autoplay also blocked');
});
});
}
}
});
</script>
@endsection

1
routes/web.php
View File

@ -15,6 +15,7 @@ Route::get('/videos/search', [VideoController::class, 'search'])->name('videos.s
Route::get('/videos/create', [VideoController::class, 'create'])->name('videos.create');
Route::get('/videos/{video}', [VideoController::class, 'show'])->name('videos.show');
Route::get('/videos/{video}/stream', [VideoController::class, 'stream'])->name('videos.stream');
Route::get('/videos/{video}/download', [VideoController::class, 'download'])->name('videos.download');
// Video routes - auth required
Route::middleware('auth')->group(function () {