PLAYER: Added users media editor
Build and Publish / Build and Publish Docker Image (push) Successful in 2m57s

This commit is contained in:
2026-05-28 17:34:37 +03:00
parent 072c00a48e
commit d1113effa5
10 changed files with 4053 additions and 69 deletions
+796 -31
View File
@@ -744,18 +744,6 @@ button.user-stat:hover {
align-items: center;
gap: 2px;
opacity: 1;
transition: opacity 0.15s;
}
.track-actions > :not(.popularity-info-btn) {
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
}
.track-row:hover .track-actions > * {
opacity: 1;
pointer-events: auto;
}
.track-action-btn {
@@ -1055,21 +1043,9 @@ button.user-stat:hover {
align-items: center;
gap: 2px;
opacity: 1;
transition: opacity 0.15s;
flex-shrink: 0;
}
.queue-track-actions > :not(.popularity-info-btn) {
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
}
.queue-track:hover .queue-track-actions > * {
opacity: 1;
pointer-events: auto;
}
.queue-track-remove {
background: none;
border: none;
@@ -1107,11 +1083,9 @@ button.user-stat:hover {
display: flex;
align-items: center;
flex-shrink: 0;
opacity: 0;
transition: opacity 0.15s;
opacity: 1;
}
.queue-track:hover .queue-drag-handle { opacity: 1; }
.queue-drag-handle:active { cursor: grabbing; }
.queue-drag-handle svg { width: 14px; height: 14px; }
@@ -1412,6 +1386,14 @@ button.user-stat:hover {
color: var(--text-primary);
}
.device-row.current-device {
background: rgba(255,255,255,0.035);
}
.device-row.current-device:hover {
background: rgba(255,255,255,0.055);
}
.device-row.active {
color: var(--accent);
}
@@ -1460,6 +1442,123 @@ button.user-stat:hover {
white-space: nowrap;
}
.device-section-label {
padding: 8px 8px 4px;
color: var(--text-subdued);
font-size: 11px;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.jam-section-label,
.jam-row,
.start-jam-row,
.jam-create-panel {
background: rgba(82,145,255,0.045);
}
.jam-row:hover,
.start-jam-row:hover {
background: rgba(82,145,255,0.075);
}
.jam-row.active {
background: rgba(82,145,255,0.105);
color: #9bbcff;
}
.jam-row.pending .device-row-name {
color: var(--text-primary);
}
.start-jam-row {
margin-top: 4px;
border-top: 1px solid rgba(82,145,255,0.16);
}
.jam-create-panel {
margin: 6px 2px 2px;
padding: 8px;
border: 1px solid rgba(82,145,255,0.18);
border-radius: 6px;
}
.jam-selected-users {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-bottom: 7px;
}
.jam-user-chip {
border: 1px solid rgba(82,145,255,0.2);
border-radius: 4px;
background: rgba(82,145,255,0.07);
color: var(--text-secondary);
display: inline-flex;
align-items: center;
gap: 5px;
max-width: 100%;
padding: 3px 6px;
font-size: 12px;
cursor: pointer;
}
.jam-user-search {
width: 100%;
height: 30px;
border: 1px solid rgba(82,145,255,0.2);
border-radius: 4px;
background: rgba(82,145,255,0.045);
color: var(--text-primary);
padding: 0 8px;
font-size: 13px;
}
.jam-search-results {
margin-top: 6px;
display: grid;
gap: 2px;
}
.jam-search-row {
border: 0;
border-radius: 4px;
background: rgba(82,145,255,0.035);
color: var(--text-secondary);
display: grid;
gap: 1px;
padding: 6px;
text-align: left;
cursor: pointer;
}
.jam-search-row:hover {
background: rgba(82,145,255,0.075);
color: var(--text-primary);
}
.jam-search-row small {
color: var(--text-subdued);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.jam-create-btn {
width: 100%;
height: 30px;
margin-top: 8px;
border: 0;
border-radius: 4px;
background: rgba(82,145,255,0.14);
color: #c9dcff;
font-size: 13px;
font-weight: 700;
cursor: pointer;
}
/* Loading */
.loading-spinner {
display: flex;
@@ -2195,6 +2294,50 @@ button.user-stat:hover {
box-shadow: 0 0 0 3px rgba(240,184,77,0.14);
}
.torrent-tabs {
display: flex;
gap: 6px;
margin-bottom: 12px;
flex: 0 0 auto;
}
.torrent-tab-btn {
min-height: 34px;
border: 1px solid var(--border-color);
border-radius: 6px;
background: var(--bg-primary);
color: var(--text-secondary);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 12px;
font-size: 13px;
font-weight: 800;
cursor: pointer;
}
.torrent-tab-btn:hover,
.torrent-tab-btn.active {
color: var(--text-primary);
background: var(--bg-hover);
}
.torrent-tab-btn.active {
border-color: rgba(29,185,84,0.42);
}
.torrent-tab-count {
min-width: 18px;
height: 18px;
border-radius: 999px;
background: rgba(29,185,84,0.2);
color: #9ff0b9;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
}
.torrent-manager-layout {
display: grid;
grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
@@ -2327,6 +2470,16 @@ button.user-stat:hover {
color: #d0b6ff;
}
.torrent-status-badge.status-queued {
background: rgba(122,162,255,0.16);
color: #adc3ff;
}
.torrent-status-badge.status-processing {
background: rgba(240,184,77,0.18);
color: #ffd78a;
}
.torrent-status-badge.status-downloading {
background: rgba(29,185,84,0.16);
color: #9ff0b9;
@@ -2543,6 +2696,8 @@ button.user-stat:hover {
.torrent-modal input[type="file"],
.torrent-modal input[type="text"],
.torrent-modal input[type="number"],
.torrent-modal select,
.torrent-modal textarea {
width: 100%;
padding: 10px 12px;
@@ -2556,6 +2711,8 @@ button.user-stat:hover {
.torrent-modal input[type="file"]:focus,
.torrent-modal input[type="text"]:focus,
.torrent-modal input[type="number"]:focus,
.torrent-modal select:focus,
.torrent-modal textarea:focus {
border-color: var(--text-secondary);
}
@@ -2569,6 +2726,508 @@ button.user-stat:hover {
.torrent-message.error { color: #ff8b8b; }
.upload-manager-panel {
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
flex: 1 1 auto;
position: relative;
}
.upload-manager-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.upload-manager-head h4 {
margin: 0;
color: var(--text-primary);
font-size: 16px;
}
.upload-manager-head p {
margin: 3px 0 0;
color: var(--text-subdued);
font-size: 12px;
}
.upload-manager-grid {
min-height: 0;
display: grid;
grid-template-columns: minmax(260px, 330px) minmax(0, 1fr);
gap: 12px;
flex: 1 1 auto;
overflow: hidden;
}
.upload-review-column,
.upload-library-column {
min-height: 0;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
padding-right: 4px;
}
.upload-panel-card {
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--bg-primary);
padding: 10px;
}
.upload-panel-subtitle,
.upload-mini-empty {
margin: 4px 0 0;
color: var(--text-subdued);
font-size: 12px;
}
.upload-review-list {
display: grid;
gap: 6px;
margin-top: 8px;
max-height: 196px;
overflow-y: auto;
}
.upload-review-list.editing {
max-height: none;
}
.upload-review-item {
display: grid;
gap: 6px;
}
.upload-review-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 7px;
align-items: center;
width: 100%;
min-height: 34px;
padding: 7px;
border: 1px solid var(--border-color);
border-radius: 7px;
background: var(--bg-secondary);
color: var(--text-secondary);
cursor: pointer;
text-align: left;
}
.upload-review-row.active,
.upload-review-row:hover {
border-color: var(--text-subdued);
background: var(--bg-elevated);
}
.upload-review-row.failed {
border-color: rgba(255,139,139,0.28);
}
.upload-review-name,
.upload-review-error {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.upload-review-name {
font-size: 13px;
font-weight: 750;
}
.upload-review-error {
grid-column: 2;
color: #ffb9b9;
font-size: 11px;
}
.upload-review-editor-inline {
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--bg-secondary);
padding: 10px;
}
.upload-review-editor-inline .upload-panel-title {
margin-bottom: 8px;
}
.upload-review-form {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.upload-field {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
margin: 0;
}
.upload-field span {
color: var(--text-subdued);
font-size: 11px;
font-weight: 850;
text-transform: uppercase;
}
.upload-field-half {
grid-column: span 2;
}
.upload-field-compact {
grid-column: span 1;
}
.upload-field-wide,
.upload-review-actions {
grid-column: 1 / -1;
}
.upload-review-form input,
.upload-review-form select,
.upload-review-form textarea {
min-height: 36px;
font-size: 14px;
}
.upload-review-form textarea {
min-height: 72px;
resize: vertical;
}
.upload-review-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.upload-editor-backdrop {
position: fixed;
inset: 0;
z-index: 140;
display: flex;
align-items: center;
justify-content: flex-end;
padding: 40px;
background: rgba(0,0,0,0.32);
}
.upload-editor-drawer {
width: min(460px, calc(100vw - 48px));
max-height: calc(100vh - 80px);
overflow-y: auto;
border: 1px solid var(--border-color);
border-radius: 10px;
background: var(--bg-elevated);
box-shadow: 0 18px 60px rgba(0,0,0,0.42);
padding: 14px;
}
.upload-editor-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.upload-editor-head h4 {
margin: 0;
color: var(--text-primary);
font-size: 16px;
line-height: 1.25;
overflow-wrap: anywhere;
}
.upload-editor-form {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.upload-editor-form input,
.upload-editor-form select,
.upload-editor-form textarea {
min-height: 38px;
font-size: 14px;
}
.upload-editor-form textarea {
min-height: 96px;
resize: vertical;
}
.upload-field-toggle {
grid-column: 1 / -1;
flex-direction: row;
align-items: center;
min-height: 38px;
}
.upload-field-toggle input {
width: auto !important;
}
.upload-editor-actions {
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
gap: 8px;
flex-wrap: wrap;
}
.upload-bulk-bar {
display: grid;
grid-template-columns: auto repeat(4, minmax(86px, 1fr)) auto auto auto;
gap: 8px;
align-items: center;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--bg-primary);
}
.upload-bulk-title {
color: var(--text-primary);
font-size: 13px;
font-weight: 900;
white-space: nowrap;
}
.upload-release-tree {
display: grid;
gap: 8px;
}
.upload-release-node {
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--bg-primary);
overflow: hidden;
}
.upload-release-node.hidden,
.upload-tree-track.hidden {
opacity: 0.72;
}
.upload-release-row {
display: grid;
grid-template-columns: 24px 24px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 9px 10px;
}
.upload-release-main,
.upload-track-main {
min-width: 0;
}
.upload-release-title {
color: var(--text-primary);
font-size: 14px;
font-weight: 900;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.upload-track-children {
border-top: 1px solid var(--border-color);
}
.upload-tree-track {
display: grid;
grid-template-columns: 24px 30px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 7px 10px 7px 28px;
border-top: 1px solid rgba(255,255,255,0.04);
}
.upload-tree-track:first-child {
border-top: 0;
}
.upload-tree-track.selected {
background: var(--bg-hover);
}
.upload-release-edit-form,
.upload-track-edit-form {
margin: 0 10px 10px;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--bg-secondary);
}
.upload-tree-track .upload-track-edit-form {
grid-column: 1 / -1;
margin: 4px 0 0;
}
.upload-wide-field {
grid-column: 1 / -1;
}
.upload-queue-panel {
flex: 0 0 auto;
margin-bottom: 12px;
padding: 10px;
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--bg-primary);
}
.upload-panel-title {
margin-bottom: 6px;
color: var(--text-secondary);
font-size: 12px;
font-weight: 900;
text-transform: uppercase;
}
.upload-queue-row {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 8px;
min-height: 30px;
}
.upload-queue-name,
.upload-queue-error {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.upload-queue-name {
color: var(--text-secondary);
font-size: 13px;
}
.upload-queue-error {
grid-column: 2;
color: #ffb9b9;
font-size: 11px;
}
.upload-track-list {
min-height: 0;
overflow-y: auto;
display: grid;
gap: 8px;
padding-right: 4px;
}
.upload-track-card {
border: 1px solid var(--border-color);
border-radius: 8px;
background: var(--bg-primary);
padding: 10px;
}
.upload-track-card.hidden {
opacity: 0.72;
}
.upload-track-display {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
}
.upload-track-main {
min-width: 0;
}
.upload-track-title {
color: var(--text-primary);
font-size: 14px;
font-weight: 800;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.upload-hidden-pill {
display: inline-flex;
margin-left: 6px;
padding: 1px 5px;
border-radius: 999px;
background: rgba(240,184,77,0.16);
color: #ffd78a;
font-size: 10px;
text-transform: uppercase;
}
.upload-track-meta {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 3px;
color: var(--text-subdued);
font-size: 12px;
}
.upload-track-actions {
display: flex;
align-items: center;
gap: 6px;
}
.upload-edit-form {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.upload-edit-form label {
margin: 0;
}
.upload-edit-form label span {
display: block;
margin-bottom: 4px;
}
.upload-hidden-toggle {
display: flex !important;
align-items: center;
gap: 8px;
padding-top: 22px;
}
.upload-hidden-toggle input {
width: auto;
}
.upload-edit-actions {
grid-column: 1 / -1;
display: flex;
justify-content: flex-end;
gap: 8px;
}
.torrent-preview-head {
display: flex;
justify-content: space-between;
@@ -2746,13 +3405,10 @@ button.user-stat:hover {
.playlist-item-actions {
display: flex;
gap: 2px;
opacity: 0;
transition: opacity 0.15s;
opacity: 1;
flex-shrink: 0;
}
.playlist-item-row:hover .playlist-item-actions { opacity: 1; }
.playlist-action-btn {
background: none;
border: none;
@@ -3271,6 +3927,115 @@ button.user-stat:hover {
flex: 0 0 178px;
}
.torrent-tabs {
overflow-x: auto;
padding-bottom: 2px;
}
.upload-manager-panel {
overflow-y: auto;
}
.upload-manager-grid {
grid-template-columns: 1fr;
overflow: visible;
}
.upload-review-column,
.upload-library-column {
overflow: visible;
}
.upload-bulk-bar {
grid-template-columns: 1fr;
}
.upload-release-row {
grid-template-columns: 24px 24px minmax(0, 1fr);
}
.upload-release-row .modal-btn {
grid-column: 1 / -1;
justify-self: flex-end;
}
.upload-tree-track {
grid-template-columns: 24px 30px minmax(0, 1fr);
padding-left: 12px;
}
.upload-tree-track .upload-track-actions {
grid-column: 1 / -1;
justify-content: flex-end;
}
.upload-manager-head {
align-items: stretch;
flex-direction: column;
gap: 8px;
}
.upload-track-display {
grid-template-columns: 32px minmax(0, 1fr);
}
.upload-track-actions {
grid-column: 1 / -1;
justify-content: flex-end;
}
.upload-edit-form {
grid-template-columns: 1fr;
}
.upload-review-form,
.upload-editor-form {
grid-template-columns: 1fr;
}
.upload-field-half,
.upload-field-compact {
grid-column: 1 / -1;
}
.upload-review-actions {
justify-content: stretch;
}
.upload-review-actions .modal-btn {
flex: 1 1 120px;
min-height: 36px;
}
.upload-editor-backdrop {
align-items: flex-end;
padding: 0;
background: rgba(0,0,0,0.42);
}
.upload-editor-drawer {
width: 100%;
max-height: min(88dvh, calc(100dvh - 56px));
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 12px 12px 0 0;
padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
}
.upload-editor-actions {
justify-content: stretch;
}
.upload-editor-actions .modal-btn {
flex: 1 1 130px;
min-height: 38px;
}
.upload-hidden-toggle {
padding-top: 0;
}
.torrent-progress-head {
align-items: flex-start;
flex-direction: column;