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

latest update

Browse Source
This commit is contained in:
ghassan committed 2026-04-05 03:30:22 +03:00
1 parent 64eadfaf56
commit 2a562b99f1
25 files changed
+2617 -2337
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

resources/views/videos/partials/comment.blade.php
+44 -95
View File
@@ -1,68 +1,78 @@
<div class="comment-item" style="display: flex; gap: 12px; margin-bottom: 16px;" id="comment-{{ $comment->id }}">
<img src="{{ $comment->user->avatar_url }}" class="channel-avatar" style="width: 36px; height: 36px; flex-shrink: 0;"
<div class="_comment-item" style="display: flex; gap: 12px; margin-bottom: 16px;" id="comment-{{ $comment->id }}">
<img src="{{ $comment->user->avatar_url }}" class="_comment-avatar" style="width: 36px; height: 36px; flex-shrink: 0;"
alt="{{ $comment->user->name }}">
<div style="flex: 1;">
<div style="display: flex; align-items: center; gap: 8px; margin-bottom: 4px;">
<span style="font-weight: 600; font-size: 14px;">{{ $comment->user->name }}</span>
<span
style="color: var(--text-secondary); font-size: 12px;">{{ $comment->created_at->diffForHumans() }}</span>
style="color: var(--text-secondary, #6b7280); font-size: 12px;">{{ $comment->created_at->diffForHumans() }}</span>
</div>
<div class="comment-body" style="font-size: 14px; line-height: 1.5; word-wrap: break-word;">
{{-- ✅ Comment Body - Prefixed class --}}
<div class="_comment-body" style="font-size: 14px; line-height: 1.5; word-wrap: break-word;"
data-_comment-enhanced="0">
{{ $comment->body }}
</div>
{{-- ✅ Edit Form (only for comment owner) --}}
@auth
@if (Auth::id() === $comment->user_id)
<div id="commentEditWrap{{ $comment->id }}" style="display:none; margin-top:8px;">
<textarea id="commentEditInput{{ $comment->id }}" class="form-control" rows="3"
style="background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 8px; padding: 8px; width: 100%; resize: vertical; font-size: 14px;">{{ $comment->body }}</textarea>
<div id="commentEditWrap{{ $comment->id }}" class="_comment-edit-wrap" style="display:none;">
<textarea id="commentEditInput{{ $comment->id }}" class="_comment-edit-textarea" rows="3">{{ $comment->body }}</textarea>
<div style="display:flex; gap:8px; justify-content:flex-end; margin-top:8px;">
<button type="button" class="yt-action-btn" style="font-size: 12px; padding: 6px 12px;"
onclick="cancelEditComment({{ $comment->id }})">Cancel</button>
<button type="button" class="yt-action-btn"
style="background: var(--brand-red); color: white; font-size: 12px; padding: 6px 12px;"
onclick="saveEditComment({{ $comment->id }})">Save</button>
<button type="button" class="_comment-btn _comment-btn-primary"
onclick="_comment.saveEditComment({{ $comment->id }})">
<i class="bi bi-chat-dots"></i>
<span>Send</span>
</button>
<button type="button" class="_comment-btn _comment-btn-secondary"
onclick="_comment.cancelEditComment({{ $comment->id }})">
Cancel
</button>
</div>
</div>
@endif
@endauth
{{-- ✅ Action Buttons --}}
<div style="display: flex; gap: 12px; margin-top: 8px;">
@auth
<button onclick="toggleReplyForm({{ $comment->id }})"
style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
<button onclick="_comment.toggleReplyForm({{ $comment->id }})" class="_comment-btn _comment-btn-link">
Reply
</button>
@if (Auth::id() === $comment->user_id)
<button onclick="startEditComment({{ $comment->id }})"
style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
<button onclick="_comment.startEditComment({{ $comment->id }})"
class="_comment-btn _comment-btn-link">
Edit
</button>
<button onclick="deleteComment({{ $comment->id }})"
style="background: none; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0;">
<button onclick="window._commentDelete({{ $comment->id }})" class="_comment-btn _comment-btn-link">
Delete
</button>
@endif
@endauth
</div>
<!-- Reply Form -->
<div id="replyForm{{ $comment->id }}" style="display: none; margin-top: 12px;">
<div style="display: flex; gap: 8px;">
<textarea class="form-control" placeholder="Write a reply..." rows="2"
style="background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 8px; padding: 8px; width: 100%; resize: none; font-size: 14px;"></textarea>
</div>
<div style="display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end;">
<button type="button" class="yt-action-btn" style="font-size: 12px; padding: 6px 12px;"
onclick="toggleReplyForm({{ $comment->id }})">Cancel</button>
<button type="button" class="yt-action-btn"
style="background: var(--brand-red); color: white; font-size: 12px; padding: 6px 12px;"
onclick="submitReply({{ $video->id ?? $comment->video_id }}, {{ $comment->id }})">Reply</button>
{{-- ✅ Reply Form --}}
<div id="replyForm{{ $comment->id }}" class="_comment-reply-form" style="display: none; margin-top: 12px;">
<textarea id="replyBody{{ $comment->id }}" class="_comment-reply-textarea" placeholder="Write a reply..."
rows="2" style="margin-bottom: 8px;"></textarea>
<div style="display: flex; gap: 8px; justify-content: flex-end;">
<button type="button" class="_comment-btn _comment-btn-primary"
onclick="_comment.submitReply({{ $video->id ?? $comment->video_id }}, {{ $comment->id }})">
<i class="bi bi-chat-dots"></i>
<span>Send</span>
</button>
<button type="button" class="_comment-btn _comment-btn-secondary"
onclick="_comment.toggleReplyForm({{ $comment->id }})">
Cancel
</button>
</div>
</div>
<!-- Replies -->
{{-- ✅ Nested Replies --}}
@if ($comment->replies && $comment->replies->count() > 0)
<div
style="margin-left: 24px; margin-top: 12px; border-left: 2px solid var(--border-color); padding-left: 12px;">
<div class="_comment-reply-wrapper"
style="margin-left: 24px; margin-top: 12px; border-left: 2px solid var(--border-color, #e5e7eb); padding-left: 12px;">
@foreach ($comment->replies as $reply)
@include('videos.partials.comment', ['comment' => $reply, 'video' => $video ?? null])
@endforeach
@@ -71,65 +81,4 @@
</div>
</div>
<script>
function toggleReplyForm(commentId) {
const form = document.getElementById('replyForm' + commentId);
form.style.display = form.style.display === 'none' ? 'block' : 'none';
}
function startEditComment(commentId) {
const wrap = document.getElementById('commentEditWrap' + commentId);
const body = document.querySelector('#comment-' + commentId + ' .comment-body');
const input = document.getElementById('commentEditInput' + commentId);
if (!wrap || !body || !input) return;
input.value = body.textContent.trim();
wrap.style.display = 'block';
body.style.display = 'none';
}
function cancelEditComment(commentId) {
const wrap = document.getElementById('commentEditWrap' + commentId);
const body = document.querySelector('#comment-' + commentId + ' .comment-body');
if (wrap) wrap.style.display = 'none';
if (body) body.style.display = 'block';
}
async function saveEditComment(commentId) {
const input = document.getElementById('commentEditInput' + commentId);
const bodyEl = document.querySelector('#comment-' + commentId + ' .comment-body');
const wrap = document.getElementById('commentEditWrap' + commentId);
if (!input || !bodyEl || !wrap) return;
const body = input.value.trim();
if (!body) return;
try {
const res = await fetch(`/comments/${commentId}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
'X-CSRF-TOKEN': '{{ csrf_token() }}'
},
body: JSON.stringify({
body
})
});
const data = await res.json();
if (res.ok) {
bodyEl.textContent = data.body || body;
bodyEl.dataset.timeEnhanced = '';
if (typeof enhanceCommentBodyWithTimeBadges === 'function') {
enhanceCommentBodyWithTimeBadges(document.getElementById('comment-' + commentId));
}
wrap.style.display = 'none';
bodyEl.style.display = 'block';
} else {
alert(data.error || 'Failed to update comment');
}
} catch (e) {
alert('Failed to update comment: ' + e.message);
}
}
</script>
{{-- ✅ NO <script> TAGS - All JavaScript is in video-comments.blade.php --}}