nu
This commit is contained in:
doomtube
parent
4c23ab840a
commit
e8864cc853
15 changed files with 4004 additions and 1593 deletions
|
|
@ -407,6 +407,22 @@
|
|||
overflow: hidden;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.player-wrapper::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 4px;
|
||||
background: linear-gradient(90deg,
|
||||
var(--user-color, var(--primary)) 0%,
|
||||
var(--user-color, var(--primary)) 50%,
|
||||
rgba(255, 255, 255, 0.1) 100%
|
||||
);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.player-area {
|
||||
|
|
@ -438,10 +454,24 @@
|
|||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.stream-info-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: var(--user-color, var(--primary));
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.stream-header {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
|
||||
.stream-header h1 {
|
||||
|
|
@ -462,11 +492,38 @@
|
|||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: var(--gray);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border: 2px solid var(--border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
color: var(--white);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.streamer-avatar.has-color {
|
||||
background: var(--user-color);
|
||||
border-color: var(--user-color);
|
||||
border-width: 3px;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.streamer-avatar.has-color.with-image {
|
||||
border-width: 3px;
|
||||
}
|
||||
|
||||
.streamer-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.streamer-name {
|
||||
font-weight: 600;
|
||||
color: var(--white);
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.viewer-count {
|
||||
|
|
@ -566,6 +623,39 @@
|
|||
padding: 4rem 2rem;
|
||||
color: var(--gray);
|
||||
}
|
||||
|
||||
/* Color accent for chat/info sections */
|
||||
.color-accent-bar {
|
||||
height: 3px;
|
||||
background: var(--user-color, var(--primary));
|
||||
margin: 0 0 1rem 0;
|
||||
border-radius: 2px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Pulse animation for live indicator */
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.status-indicator.active::before {
|
||||
content: '';
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #ff0000;
|
||||
border-radius: 50%;
|
||||
margin-right: 0.5rem;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if loading}
|
||||
|
|
@ -581,7 +671,7 @@
|
|||
{:else if realm}
|
||||
<div class="stream-container">
|
||||
<div class="player-section">
|
||||
<div class="player-wrapper">
|
||||
<div class="player-wrapper" style="--user-color: {realm.colorCode || '#561D5E'}">
|
||||
<div class="player-area">
|
||||
<div class="dummy-player"></div>
|
||||
<div class="player-container">
|
||||
|
|
@ -590,15 +680,22 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stream-info-section">
|
||||
<div class="stream-info-section" style="--user-color: {realm.colorCode || '#561D5E'}">
|
||||
<div class="stream-header">
|
||||
<h1>{realm.name}</h1>
|
||||
<div class="streamer-info">
|
||||
{#if realm.avatarUrl}
|
||||
<img src={realm.avatarUrl} alt={realm.username} class="streamer-avatar" />
|
||||
{:else}
|
||||
<div class="streamer-avatar"></div>
|
||||
{/if}
|
||||
<div
|
||||
class="streamer-avatar"
|
||||
class:has-color={realm.colorCode}
|
||||
class:with-image={realm.avatarUrl}
|
||||
style="--user-color: {realm.colorCode || '#561D5E'}"
|
||||
>
|
||||
{#if realm.avatarUrl}
|
||||
<img src={realm.avatarUrl} alt={realm.username} />
|
||||
{:else}
|
||||
{realm.username?.charAt(0).toUpperCase() || '?'}
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<div class="streamer-name">{realm.username}</div>
|
||||
<div class="viewer-count">
|
||||
|
|
@ -612,13 +709,14 @@
|
|||
|
||||
<div class="sidebar">
|
||||
<div class="stats-section">
|
||||
<div class="color-accent-bar" style="--user-color: {realm.colorCode || '#561D5E'}"></div>
|
||||
<h3>Stream Stats</h3>
|
||||
|
||||
<div class="status-indicator" class:active={stats.isLive} class:inactive={!stats.isLive}>
|
||||
{#if stats.isLive}
|
||||
<span>●</span> Live
|
||||
Live
|
||||
{:else}
|
||||
<span>●</span> Offline
|
||||
Offline
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
|
@ -644,7 +742,7 @@
|
|||
<span class="stat-value">{stats.fps.toFixed(1)} fps</span>
|
||||
</div>
|
||||
{/if}
|
||||
{#if stats.codec}
|
||||
{#if stats.codec && stats.codec !== 'N/A'}
|
||||
<div class="stat-item">
|
||||
<span class="stat-label">Codec</span>
|
||||
<span class="stat-value">{stats.codec}</span>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue