232 lines
No EOL
8.9 KiB
HTML
232 lines
No EOL
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Watch History - KV-Stream</title>
|
|
<!-- Preconnect for fonts -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;900&display=swap"
|
|
rel="stylesheet">
|
|
<link rel="stylesheet" href="/styles/index.css">
|
|
<style>
|
|
/* History Specific Styles */
|
|
.history-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 20px 40px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.history-title {
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.clear-btn {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
color: #fff;
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.clear-btn:hover {
|
|
background: rgba(255, 0, 0, 0.2);
|
|
border-color: rgba(255, 0, 0, 0.4);
|
|
}
|
|
|
|
.history-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
padding: 0 40px 40px;
|
|
}
|
|
|
|
.history-card {
|
|
position: relative;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
background: #1a1a1a;
|
|
transition: transform 0.3s ease;
|
|
text-decoration: none;
|
|
color: white;
|
|
}
|
|
|
|
.history-card:hover {
|
|
transform: scale(1.05);
|
|
z-index: 2;
|
|
}
|
|
|
|
.history-thumb {
|
|
width: 100%;
|
|
aspect-ratio: 2/3;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.history-info {
|
|
padding: 12px;
|
|
}
|
|
|
|
.history-progress-bar {
|
|
height: 3px;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.history-progress-fill {
|
|
height: 100%;
|
|
background: var(--color-primary);
|
|
}
|
|
|
|
.history-meta {
|
|
font-size: 0.85rem;
|
|
color: #aaa;
|
|
margin-top: 4px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app" class="app-layout">
|
|
<!-- Sidebar -->
|
|
<aside class="sidebar" id="sidebar">
|
|
<div class="sidebar__logo">
|
|
<a href="/" style="color:white;">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M4 8H2v12c0 1.1.9 2 2 2h12v-2H4V8z" />
|
|
<path
|
|
d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<nav class="sidebar__nav">
|
|
<a href="/" class="sidebar__nav-item" title="Home">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
|
|
</svg>
|
|
</a>
|
|
<!-- History Link (Active) -->
|
|
<a href="/history.html" class="sidebar__nav-item active" title="History">
|
|
<svg viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-7 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" />
|
|
</svg>
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content" style="margin-left: 80px; width: calc(100% - 80px);">
|
|
<div class="history-header">
|
|
<div style="display:flex; gap:20px; align-items:center;">
|
|
<h1 class="history-title" style="margin:0; cursor:pointer;" id="tabHistory">Watch History</h1>
|
|
<h1 class="history-title" style="margin:0; opacity:0.5; cursor:pointer;" id="tabMyList">My List</h1>
|
|
</div>
|
|
<button class="clear-btn" id="clearHistoryBtn">Clear History</button>
|
|
</div>
|
|
|
|
<div class="history-grid" id="historyGrid">
|
|
<!-- Items -->
|
|
</div>
|
|
|
|
<div id="emptyState" style="text-align:center; display:none; padding:50px;">
|
|
<h2 id="emptyTitle">No history yet</h2>
|
|
<p style="color:#aaa;" id="emptyMsg">Movies you watch will appear here.</p>
|
|
<a href="/" class="action-btn action-btn--primary" style="margin-top:20px; display:inline-block;">Browse
|
|
Movies</a>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="/js/history-service.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const grid = document.getElementById('historyGrid');
|
|
const emptyState = document.getElementById('emptyState');
|
|
const clearBtn = document.getElementById('clearHistoryBtn');
|
|
const tabHistory = document.getElementById('tabHistory');
|
|
const tabMyList = document.getElementById('tabMyList');
|
|
const emptyTitle = document.getElementById('emptyTitle');
|
|
const emptyMsg = document.getElementById('emptyMsg');
|
|
|
|
let currentView = 'history'; // history or mylist
|
|
|
|
function updateTabs() {
|
|
if (currentView === 'history') {
|
|
tabHistory.style.opacity = '1';
|
|
tabMyList.style.opacity = '0.5';
|
|
clearBtn.style.display = 'block';
|
|
} else {
|
|
tabHistory.style.opacity = '0.5';
|
|
tabMyList.style.opacity = '1';
|
|
clearBtn.style.display = 'none'; // Don't allow clearing My List via this button
|
|
}
|
|
render();
|
|
}
|
|
|
|
tabHistory.addEventListener('click', () => { currentView = 'history'; updateTabs(); });
|
|
tabMyList.addEventListener('click', () => { currentView = 'mylist'; updateTabs(); });
|
|
|
|
function render() {
|
|
let items = [];
|
|
if (currentView === 'history') {
|
|
items = window.historyService.getHistory();
|
|
emptyTitle.textContent = "No history yet";
|
|
emptyMsg.textContent = "Movies you watch will appear here.";
|
|
} else {
|
|
items = window.historyService.getFavorites();
|
|
emptyTitle.textContent = "My List is empty";
|
|
emptyMsg.textContent = "Add movies to your list to watch later.";
|
|
}
|
|
|
|
if (items.length === 0) {
|
|
grid.style.display = 'none';
|
|
emptyState.style.display = 'block';
|
|
return;
|
|
}
|
|
|
|
grid.style.display = 'grid';
|
|
emptyState.style.display = 'none';
|
|
|
|
grid.innerHTML = items.map(item => `
|
|
<a href="/watch.html?id=${item.id}&slug=${item.slug}&ep=${item.progress?.episode || 1}" class="history-card">
|
|
<img src="${item.thumbnail}" class="history-thumb" loading="lazy" alt="${item.title}">
|
|
<div class="history-info">
|
|
<h3 style="font-size:1rem; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${item.title}</h3>
|
|
<div class="history-meta">${currentView === 'history' ? `Episode ${item.progress.episode}` : (item.year || 'Movie')}</div>
|
|
<div class="history-meta" style="font-size:0.75rem; margin-top:2px;">
|
|
${currentView === 'history' ? new Date(item.timestamp).toLocaleDateString() : 'Added ' + new Date(item.addedAt || Date.now()).toLocaleDateString()}
|
|
</div>
|
|
</div>
|
|
${currentView === 'history' ? `
|
|
<div class="history-progress-bar">
|
|
<div class="history-progress-fill" style="width: ${item.progress.percentage || 0}%"></div>
|
|
</div>` : ''}
|
|
</a>
|
|
`).join('');
|
|
}
|
|
|
|
clearBtn.addEventListener('click', () => {
|
|
if (confirm('Are you sure you want to clear your watch history?')) {
|
|
window.historyService.clearHistory();
|
|
render();
|
|
}
|
|
});
|
|
|
|
updateTabs();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |