Fix double audio playback and add UID handling for personal stream
- Fixed double playback issue on stream page by properly scoping event delegation in streams-ui.js - Added init-personal-stream.js to handle UID for personal stream playback - Improved error handling and logging for audio playback - Added proper event propagation control to prevent duplicate event handling
This commit is contained in:
oib
@ -1,18 +1,24 @@
|
||||
/* Desktop-specific styles for screens 960px and wider */
|
||||
@media (min-width: 960px) {
|
||||
:root {
|
||||
--content-max-width: 800px;
|
||||
--content-padding: 1.25rem;
|
||||
--section-spacing: 1.5rem;
|
||||
}
|
||||
|
||||
html {
|
||||
background-color: #111 !important;
|
||||
background-image:
|
||||
repeating-linear-gradient(
|
||||
45deg,
|
||||
rgba(188, 183, 107, 0.1) 0, /* Olive color */
|
||||
rgba(188, 183, 107, 0.1) 0,
|
||||
rgba(188, 183, 107, 0.1) 1px,
|
||||
transparent 1px,
|
||||
transparent 20px
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
-45deg,
|
||||
rgba(188, 183, 107, 0.1) 0, /* Olive color */
|
||||
rgba(188, 183, 107, 0.1) 0,
|
||||
rgba(188, 183, 107, 0.1) 1px,
|
||||
transparent 1px,
|
||||
transparent 20px
|
||||
@ -26,72 +32,200 @@
|
||||
body {
|
||||
background: transparent !important;
|
||||
min-height: 100vh !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Main content container */
|
||||
main {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: var(--content-max-width);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--content-padding);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Ensure h2 in legal pages matches other pages */
|
||||
#privacy-page > article > h2:first-child,
|
||||
#imprint-page > article > h2:first-child {
|
||||
margin-top: 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* Streams Page Specific Styles */
|
||||
#streams-page section {
|
||||
width: 100%;
|
||||
max-width: var(--content-max-width);
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.stream-card {
|
||||
margin-bottom: 1rem;
|
||||
background: var(--surface);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.stream-card:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.stream-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.stream-card .card-content {
|
||||
padding: 1.25rem 1.5rem;
|
||||
}
|
||||
|
||||
/* Section styles */
|
||||
section {
|
||||
width: 100%;
|
||||
max-width: var(--content-max-width);
|
||||
margin: 0 auto var(--section-spacing);
|
||||
background: rgba(26, 26, 26, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 10px;
|
||||
padding: 2rem;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
section:hover {
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
nav.dashboard-nav {
|
||||
padding: 1rem 0;
|
||||
margin-bottom: 2rem;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(5px);
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Desktop navigation visibility */
|
||||
nav.dashboard-nav {
|
||||
display: block;
|
||||
}
|
||||
/* Section styles are now handled in style.css */
|
||||
|
||||
/* Show desktop navigation */
|
||||
section#links {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Hide mobile navigation elements */
|
||||
#burger-label,
|
||||
#burger-toggle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* Dashboard navigation */
|
||||
#guest-dashboard,
|
||||
#user-dashboard {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
|
||||
nav.dashboard-nav a {
|
||||
padding: 5px;
|
||||
padding: 0.5rem 1rem;
|
||||
margin: 0 0.5em;
|
||||
border-radius: 3px;
|
||||
border-radius: 4px;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
/* Reset mobile-specific styles for desktop */
|
||||
.dashboard-nav {
|
||||
padding: 0.5em;
|
||||
max-width: none;
|
||||
justify-content: center;
|
||||
|
||||
nav.dashboard-nav a:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.dashboard-nav a {
|
||||
min-width: auto;
|
||||
font-size: 1rem;
|
||||
|
||||
/* Form elements */
|
||||
input[type="email"],
|
||||
input[type="text"],
|
||||
input[type="password"] {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
background: #2a2a2a;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
button,
|
||||
.button {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
background: #4a6fa5;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s ease;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
.button:hover {
|
||||
background: #5a8ad4;
|
||||
}
|
||||
|
||||
/* Global article styles */
|
||||
main > section > article,
|
||||
#stream-page > article {
|
||||
#stream-page > article,
|
||||
#stream-page #stream-list > li .stream-player {
|
||||
max-width: 600px;
|
||||
margin: 0 auto 2em auto;
|
||||
margin: 2em auto 2em auto;
|
||||
padding: 2em;
|
||||
background: #1e1e1e;
|
||||
border: 1px solid #333;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Add top margin to all stream players except the first one */
|
||||
#stream-page #stream-list > li:not(:first-child) .stream-player {
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Stream player styles */
|
||||
#stream-page #stream-list > li {
|
||||
list-style: none;
|
||||
margin-bottom: 1.5em;
|
||||
}
|
||||
|
||||
#stream-page #stream-list > li .stream-player {
|
||||
padding: 1.5em;
|
||||
background: #1e1e1e;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
transition: all 0.2s ease;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* Hover states - only apply to direct article children of sections */
|
||||
main > section > article:hover {
|
||||
transform: translateY(-2px);
|
||||
background: linear-gradient(45deg, rgba(255, 102, 0, 0.05), rgba(255, 102, 0, 0.02));
|
||||
border: 1px solid #ff6600;
|
||||
#stream-page #stream-list {
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Stream player specific overrides can be added here if needed in the future */
|
||||
|
||||
/* Hover states moved to style.css for consistency */
|
||||
|
||||
/* Stream list desktop styles */
|
||||
#stream-list {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
/* User upload area desktop styles */
|
||||
/* User upload area - matches article styling */
|
||||
#user-upload-area {
|
||||
max-width: 600px !important;
|
||||
width: 100% !important;
|
||||
margin: 1.5rem auto !important;
|
||||
box-sizing: border-box !important;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
margin: 2rem auto;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user