92 lines
No EOL
4.6 KiB
HTML
92 lines
No EOL
4.6 KiB
HTML
{% extends "layout.html" %}
|
|
|
|
{% block content %}
|
|
<div class="yt-container" style="padding-top: 20px;">
|
|
<div class="library-header"
|
|
style="margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between;">
|
|
<h1 style="font-size: 1.5rem;">My Library</h1>
|
|
<div class="tabs"
|
|
style="display: flex; gap: 0.5rem; background: var(--yt-bg-hover); padding: 0.3rem; border-radius: 100px;">
|
|
<a href="/my-videos?type=saved" class="yt-btn {% if filter_type == 'saved' %}yt-btn-active{% endif %}"
|
|
style="border-radius: 100px; font-size: 0.9rem; padding: 0.5rem 1.5rem; {% if filter_type == 'saved' %}background:var(--yt-text-primary);color:var(--yt-bg-primary);{% endif %}">Saved</a>
|
|
<a href="/my-videos?type=history" class="yt-btn {% if filter_type == 'history' %}yt-btn-active{% endif %}"
|
|
style="border-radius: 100px; font-size: 0.9rem; padding: 0.5rem 1.5rem; {% if filter_type == 'history' %}background:var(--yt-text-primary);color:var(--yt-bg-primary);{% endif %}">History</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="libraryGrid" class="yt-video-grid">
|
|
{% if videos %}
|
|
{% for video in videos %}
|
|
<div class="yt-video-card" onclick="window.location.href='/watch?v={{ video.video_id }}'">
|
|
<div class="yt-thumbnail-container">
|
|
<img src="{{ video.thumbnail }}" class="yt-thumbnail" loading="lazy">
|
|
</div>
|
|
<div class="yt-video-details">
|
|
<div class="yt-video-meta">
|
|
<h3 class="yt-video-title">{{ video.title }}</h3>
|
|
<p class="yt-video-stats">{{ video.timestamp }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div id="emptyState"
|
|
style="text-align: center; padding: 4rem; color: var(--yt-text-secondary); display: {% if videos %}none{% else %}none{% endif %};">
|
|
<i class="fas fa-folder-open fa-3x" style="margin-bottom: 1rem; opacity: 0.5;"></i>
|
|
<h3>Nothing here yet</h3>
|
|
<p>Go watch some videos to fill this up!</p>
|
|
<a href="/" class="yt-btn"
|
|
style="margin-top: 1rem; background: var(--yt-text-primary); color: var(--yt-bg-primary);">Browse
|
|
Content</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const loggedIn = {{ 'true' if logged_in else 'false' }};
|
|
const filterType = '{{ filter_type }}';
|
|
|
|
if (!loggedIn && filterType === 'history') {
|
|
// Load from Local Storage
|
|
const history = JSON.parse(localStorage.getItem('kv_history') || '[]');
|
|
const grid = document.getElementById('libraryGrid');
|
|
const empty = document.getElementById('emptyState');
|
|
|
|
if (history.length > 0) {
|
|
grid.innerHTML = history.map(video => `
|
|
<div class="yt-video-card" onclick="window.location.href='/watch?v=${video.id}'">
|
|
<div class="yt-thumbnail-container">
|
|
<img src="${video.thumbnail}" class="yt-thumbnail" loading="lazy">
|
|
</div>
|
|
<div class="yt-video-details">
|
|
<div class="yt-video-meta">
|
|
<h3 class="yt-video-title">${video.title}</h3>
|
|
<p class="yt-video-stats">Watched on ${new Date(video.timestamp).toLocaleDateString()}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`).join('');
|
|
empty.style.display = 'none';
|
|
} else {
|
|
grid.innerHTML = '';
|
|
empty.style.display = 'block';
|
|
}
|
|
} else if (!loggedIn && filterType === 'saved') {
|
|
// Anon user can't save remotely yet, maybe valid TODO, but for now show empty with login prompt
|
|
document.getElementById('libraryGrid').innerHTML = '';
|
|
document.getElementById('emptyState').innerHTML = `
|
|
<i class="fas fa-lock fa-3x" style="margin-bottom: 1rem; opacity: 0.5;"></i>
|
|
<h3>Sign in to save videos</h3>
|
|
<p>Save videos to watch later.</p>
|
|
<a href="/login" class="yt-btn" style="margin-top: 1rem; background: var(--yt-text-primary); color: var(--yt-bg-primary);">Sign In</a>
|
|
`;
|
|
document.getElementById('emptyState').style.display = 'block';
|
|
} else {
|
|
// Logged in or Server side handled it
|
|
if (document.getElementById('libraryGrid').children.length === 0) {
|
|
document.getElementById('emptyState').style.display = 'block';
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %} |