Player Client and Visual Enhancements

- Redesigned audio player bar to be mobile-friendly - Added unloading for track switching (needs to be fixed) - Added IsLoading status so loading spinner isn't hanging around when it shouldn't be - Normalized styles with scoped files (will further reduce) - Layout Cleanup - EF fixes (migrations now function for deployment) - deploy script updates (new dedicated host)
2025-09-12 20:37:17 -04:00
parent 73d4b0a9c5
commit 9ac2c9182a
31 changed files with 763 additions and 179 deletions
@@ -0,0 +1,131 @@
+/* Preserve key visual styles while simplifying layout */
+
+/* Player outer container - fixed positioning */
+.player-outer-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1200;
+    padding: 0;
+    margin: 0;
+}
+
+/* Player inner container */
+.player-inner-container {
+    padding: 1rem;
+    padding-bottom: 1.5rem;
+}
+
+/* Custom backdrop blur container */
+.player-backdrop {
+    position: relative;
+    background: var(--deepdrft-theme-background-gray);
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    border-radius: 1rem;
+    border: 1px solid var(--deepdrft-theme-primary);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 
+                0 2px 10px var(--deepdrft-theme-secondary);
+    color: #ffffff;
+    transition: all 0.3s ease;
+    overflow: hidden;
+    margin-bottom: 1rem;
+}
+
+/* Control buttons positioning */
+.player-controls {
+    position: absolute;
+    top: 0.5rem;
+    right: 0.5rem;
+}
+
+/* Minimized floating dock with gradient */
+.minimized-dock {
+    position: fixed;
+    bottom: 60px;
+    right: 60px;
+    z-index: 1300;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    cursor: pointer;
+    background: linear-gradient(135deg, 
+        var(--deepdrft-theme-primary) 0%,
+        var(--deepdrft-theme-secondary) 50%,
+        var(--deepdrft-theme-tertiary) 100%
+    );
+    backdrop-filter: blur(15px);
+    -webkit-backdrop-filter: blur(15px);
+    border: 2px solid var(--deepdrft-theme-secondary);
+    box-shadow: 0 4px 20px var(--deepdrft-theme-primary),
+                0 2px 10px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease;
+}
+
+.minimized-dock:hover {
+    transform: scale(1.1);
+    box-shadow: 0 6px 25px rgba(var(--deepdrft-theme-primary), 0.8),
+                0 3px 15px rgba(0, 0, 0, 0.4);
+}
+
+/* Minimized button styles */
+.minimized-button {
+    border-radius: 50% !important;
+    background: transparent !important;
+    color: white !important;
+    transition: all 0.3s ease !important;
+    box-shadow: none !important;
+    border: none !important;
+    width: 48px !important;
+    height: 48px !important;
+}
+
+/* Spacer to prevent content overlap */
+.player-spacer {
+    height: 140px;
+    width: 100%;
+    flex-shrink: 0;
+}
+
+/* Essential layout adjustments only */
+.controls-left {
+    min-width: 200px;
+}
+
+.seekbar-flex {
+    flex: 1;
+}
+
+.volume-right {
+    /*min-width: 140px;*/
+}
+
+/* Mobile responsive adjustments */
+@media (max-width: 768px) {
+    .minimized-dock {
+        bottom: 15px;
+        right: 15px;
+        width: 56px;
+        height: 56px;
+    }
+    
+    .minimized-button {
+        width: 44px !important;
+        height: 44px !important;
+    }
+    
+    .player-inner-container {
+        padding: 0.75rem;
+        padding-bottom: 1.25rem;
+    }
+    
+    .player-backdrop {
+        border-radius: 1rem;
+        margin-bottom: 1.25rem;
+    }
+    
+    .player-spacer {
+        height: 160px;
+    }
+}