354 lines
8.1 KiB
PHP
354 lines
8.1 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Shorts - ' . config('app.name'))
|
|
|
|
@section('content')
|
|
<div class="yt-main">
|
|
<div class="yt-content">
|
|
<!-- Shorts Header -->
|
|
<div class="shorts-header">
|
|
<div class="shorts-brand">
|
|
<div class="shorts-logo-icon">
|
|
<i class="bi bi-play-fill"></i>
|
|
</div>
|
|
<h1>Shorts</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Shorts Grid - YouTube Style -->
|
|
<div class="shorts-container">
|
|
@forelse($videos as $video)
|
|
<div class="shorts-card">
|
|
<a href="{{ route('videos.show', $video->id) }}" class="shorts-link">
|
|
<div class="shorts-thumbnail-wrapper">
|
|
<img src="{{ $video->thumbnail_url }}" alt="{{ $video->title }}" class="shorts-thumb">
|
|
<div class="shorts-overlay">
|
|
<span class="shorts-views">
|
|
<i class="bi bi-play-fill"></i> {{ number_format($video->view_count) }}
|
|
</span>
|
|
</div>
|
|
@if($video->duration)
|
|
<span class="shorts-time">{{ gmdate('i:s', $video->duration) }}</span>
|
|
@endif
|
|
</div>
|
|
<div class="shorts-details">
|
|
<h3 class="shorts-title">{{ $video->title }}</h3>
|
|
<div class="shorts-channel-info">
|
|
@if($video->user)
|
|
<div class="shorts-channel-row">
|
|
@if($video->user->avatar_url)
|
|
<img src="{{ $video->user->avatar_url }}" class="shorts-avatar" alt="{{ $video->user->name }}">
|
|
@else
|
|
<div class="shorts-avatar-placeholder">{{ substr($video->user->name, 0, 1) }}</div>
|
|
@endif
|
|
<span class="shorts-channel-name">{{ $video->user->name }}</span>
|
|
</div>
|
|
@endif
|
|
<span class="shorts-ago">{{ $video->created_at->diffForHumans() }}</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
@empty
|
|
<div class="shorts-empty-state">
|
|
<div class="shorts-empty-icon">
|
|
<i class="bi bi-collection-play"></i>
|
|
</div>
|
|
<h2>No Shorts yet</h2>
|
|
<p>Be the first to upload a Short!</p>
|
|
@auth
|
|
<a href="{{ route('videos.create') }}" class="shorts-upload-btn">
|
|
<i class="bi bi-plus-lg"></i> Upload Short
|
|
</a>
|
|
@else
|
|
<a href="{{ route('login') }}" class="shorts-upload-btn">
|
|
<i class="bi bi-box-arrow-in-right"></i> Login to Upload
|
|
</a>
|
|
@endauth
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
@if($videos->hasPages())
|
|
<div class="shorts-pagination">
|
|
{{ $videos->links() }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Shorts Page - YouTube Shorts Style */
|
|
.shorts-header {
|
|
margin-bottom: 20px;
|
|
padding: 12px 0;
|
|
}
|
|
|
|
.shorts-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.shorts-logo-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: linear-gradient(135deg, #ff0050, #ff6b6b);
|
|
border-radius: 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.shorts-brand h1 {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
margin: 0;
|
|
}
|
|
|
|
/* Shorts Grid - 4 columns on desktop */
|
|
.shorts-container {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 16px;
|
|
}
|
|
|
|
/* Shorts Card */
|
|
.shorts-card {
|
|
background: transparent;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
transition: transform 0.2s;
|
|
}
|
|
|
|
.shorts-card:hover {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
.shorts-link {
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: block;
|
|
}
|
|
|
|
.shorts-thumbnail-wrapper {
|
|
position: relative;
|
|
aspect-ratio: 9/16;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: #1a1a1a;
|
|
}
|
|
|
|
.shorts-thumb {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.shorts-overlay {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 8px;
|
|
background: linear-gradient(transparent, rgba(0,0,0,0.7));
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
}
|
|
|
|
.shorts-card:hover .shorts-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.shorts-views {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: white;
|
|
}
|
|
|
|
.shorts-time {
|
|
position: absolute;
|
|
bottom: 8px;
|
|
right: 8px;
|
|
background: rgba(0,0,0,0.8);
|
|
color: white;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.shorts-details {
|
|
padding: 10px 4px;
|
|
}
|
|
|
|
.shorts-title {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: var(--text-primary);
|
|
margin: 0 0 8px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.shorts-channel-info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
}
|
|
|
|
.shorts-channel-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.shorts-avatar, .shorts-avatar-placeholder {
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.shorts-avatar-placeholder {
|
|
background: #666;
|
|
color: white;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.shorts-channel-name {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.shorts-ago {
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Empty State */
|
|
.shorts-empty-state {
|
|
grid-column: 1 / -1;
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
background: var(--bg-secondary);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.shorts-empty-icon {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin: 0 auto 20px;
|
|
background: linear-gradient(135deg, #ff0050, #ff6b6b);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.shorts-empty-icon i {
|
|
font-size: 36px;
|
|
color: white;
|
|
}
|
|
|
|
.shorts-empty-state h2 {
|
|
font-size: 20px;
|
|
color: var(--text-primary);
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.shorts-empty-state p {
|
|
color: var(--text-secondary);
|
|
margin: 0 0 20px;
|
|
}
|
|
|
|
.shorts-upload-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 20px;
|
|
background: #ff0050;
|
|
color: white;
|
|
border-radius: 20px;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
font-size: 14px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.shorts-upload-btn:hover {
|
|
background: #e60048;
|
|
}
|
|
|
|
/* Pagination */
|
|
.shorts-pagination {
|
|
margin-top: 30px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.shorts-pagination .pagination {
|
|
gap: 4px;
|
|
}
|
|
|
|
.shorts-pagination .page-link {
|
|
background: var(--bg-secondary);
|
|
border-color: var(--border-color);
|
|
color: var(--text-primary);
|
|
padding: 6px 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.shorts-pagination .page-item.active .page-link {
|
|
background: #ff0050;
|
|
border-color: #ff0050;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 1200px) {
|
|
.shorts-container {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.shorts-container {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 12px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.shorts-container {
|
|
grid-template-columns: 1fr;
|
|
max-width: 320px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.shorts-header {
|
|
text-align: center;
|
|
}
|
|
|
|
.shorts-brand {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
</style>
|
|
@endsection
|
|
|