diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..48278fd --- /dev/null +++ b/.vscode/launch.json @@ -0,0 +1,14 @@ +{ + "configurations": [ + { + "type": "php", + "request": "launch", + "name": "Launch PHP Program", + "program": "${workspaceFolder}/index.php", + "runtimeArgs": [ + "-dxdebug.start_with_request=yes" + ], + "port": 9003 + } + ] +} \ No newline at end of file diff --git a/UI_UPDATE.MD b/UI_UPDATE.MD new file mode 100644 index 0000000..f4a8ab1 --- /dev/null +++ b/UI_UPDATE.MD @@ -0,0 +1,529 @@ +# UI Modernization Plan for Dodgers Stream Theater + +## Overview +This comprehensive plan focuses exclusively on UI modernization of the Dodgers streaming platform while maintaining all existing functionality. The modernization follows a systematic approach across 6 phases, transforming the current inline-style interface into a modern, maintainable, and visually appealing application. + +--- + +## Important Info +Always come back and update UI_UPDATE.MD once complete with task and task item. Add any needed notes and if additional tasks are needed for other tasks/sub-tasks/etc add them. + +--- + +## **Phase 1: Structural Refactoring (UI Files Only)** +*Goal: Separate inline styles and scripts into dedicated files while maintaining PHP backend logic* + +### Sub-task 1.1: CSS Extraction and Modularization + +#### 1.1.1: Inline Styles Extraction +- [x] Identify all CSS rules within the ` + + +
+
+
+
+ +
+
WAITING...
+
0 viewers
+
+
+
+ + + +
+
+
+ +
+
+ +
+
+
Live Chat
+ +
+ + + +
+ + Connected +
+ +
+
No messages yet. Be the first to say hello! πŸ‘‹
+
+ +
+ Someone is typing... +
+ +
+
+ + +
+
+
+
+ + + + +
+ + + + + diff --git a/placeholder.mp4 b/placeholder.mp4 new file mode 100644 index 0000000..4f11556 Binary files /dev/null and b/placeholder.mp4 differ diff --git a/styles_backup_original.txt b/styles_backup_original.txt new file mode 100644 index 0000000..e960251 --- /dev/null +++ b/styles_backup_original.txt @@ -0,0 +1,736 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + } + + :root { + --dodgers-blue: #005A9C; + --dodgers-dark: #003d6b; + --dodgers-light: #1e7ec8; + --dodgers-red: #EF3E42; + --bg-dark: #0f1419; + --bg-darker: #0a0d14; + --bg-darkest: #050810; + --admin-gold: #FFD700; + --text-primary: #ffffff; + --text-secondary: #b8c5d6; + --text-muted: #8590a0; + --border-color: #1a2332; + --input-bg: #1a2332; + --card-bg: #15202b; + } + + body { + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; + background: var(--bg-darkest); + color: var(--text-primary); + height: 100vh; + overflow: hidden; + position: relative; + } + + .theater-container { + display: flex; + height: 100vh; + position: relative; + transition: all 0.3s ease; + } + + .video-section { + flex: 1; + background: #000; + position: relative; + display: flex; + flex-direction: column; + transition: all 0.3s ease; + } + + .video-section.expanded { + flex: 1; + width: 100%; + } + + .video-header { + background: linear-gradient(135deg, var(--dodgers-dark) 0%, var(--dodgers-blue) 100%); + padding: 12px 20px; + display: flex; + align-items: center; + justify-content: space-between; + box-shadow: 0 2px 10px rgba(0,0,0,0.5); + z-index: 10; + } + + .header-left { + display: flex; + align-items: center; + gap: 20px; + } + + .logo { + font-size: 20px; + font-weight: bold; + color: white; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); + display: flex; + align-items: center; + gap: 8px; + } + + .logo::before { + content: "⚾"; + font-size: 24px; + } + + .stream-stats { + display: flex; + align-items: center; + gap: 15px; + } + + .viewer-count { + background: rgba(255,255,255,0.2); + padding: 6px 14px; + border-radius: 20px; + color: white; + font-size: 14px; + font-weight: 600; + display: flex; + align-items: center; + gap: 6px; + backdrop-filter: blur(10px); + } + + .viewer-count::before { + content: "πŸ‘₯"; + } + + .stream-badge { + background: var(--dodgers-red); + color: white; + padding: 6px 14px; + border-radius: 20px; + font-size: 12px; + font-weight: bold; + text-transform: uppercase; + animation: pulse 2s infinite; + } + + @keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.8; } + } + +.header-controls { + display: flex; + gap: 10px; + align-items: center; +} + +/* Ensure all header control buttons have identical dimensions */ +.header-controls > * { + height: 35px; + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + vertical-align: top; + line-height: 1; +} + + .quality-selector { + background: rgba(255,255,255,0.2); + border: none; + color: white; + padding: 8px 16px; + border-radius: 20px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + backdrop-filter: blur(10px); + /* Standardize select appearance to match buttons */ + outline: none; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + min-height: auto; + } + + .toggle-chat-btn { + background: rgba(255,255,255,0.2); + border: none; + color: white; + padding: 8px 16px; + border-radius: 20px; + cursor: pointer; + font-size: 14px; + font-weight: 600; + transition: all 0.3s; + backdrop-filter: blur(10px); + position: relative; + } + + .toggle-chat-btn:hover { + background: rgba(255,255,255,0.3); + transform: translateY(-1px); + } + + .manual-refresh-btn { + background: rgba(255,255,255,0.2); + border: none; + color: white; + padding: 8px 16px; + border-radius: 20px; + cursor: pointer; + font-size: 14px; + font-weight: 600; + transition: all 0.3s; + backdrop-filter: blur(10px); + position: relative; + } + + .manual-refresh-btn:hover { + background: rgba(255,255,255,0.3); + transform: translateY(-1px); + } + + .video-wrapper { + flex: 1; + position: relative; + background: #000; + overflow: hidden; + } + + #video-player { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + max-width: 100%; + max-height: 100%; + object-fit: contain; + } + + .video-js { + width: 100% !important; + height: 100% !important; + max-width: 100% !important; + max-height: 100% !important; + } + + /* Override VideoJS fluid behavior to prevent overflow */ + .video-js.vjs-fluid { + width: 100% !important; + height: 100% !important; + max-width: 100% !important; + max-height: 100% !important; + padding-top: 0 !important; + } + + /* Ensure the actual video element is properly constrained */ + .video-js video { + width: 100% !important; + height: 100% !important; + max-width: 100% !important; + max-height: 100% !important; + object-fit: contain !important; + } + + .video-js .vjs-control-bar { + background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); + } + + .chat-section { + width: 350px; + background: var(--bg-dark); + color: var(--text-primary); + display: flex; + flex-direction: column; + box-shadow: -5px 0 20px rgba(0,0,0,0.5); + transition: transform 0.3s ease; + position: relative; + border-left: 1px solid var(--border-color); + } + + .chat-section.collapsed { + transform: translateX(100%); + position: absolute; + right: 0; + height: 100%; + } + + .chat-header { + background: linear-gradient(135deg, var(--dodgers-blue) 0%, var(--dodgers-light) 100%); + padding: 16px 20px; + color: white; + font-size: 16px; + font-weight: 600; + box-shadow: 0 2px 10px rgba(0,0,0,0.2); + display: flex; + align-items: center; + justify-content: space-between; + } + + .chat-header-left { + display: flex; + align-items: center; + gap: 8px; + } + + .chat-header-left::before { + content: "πŸ’¬"; + font-size: 18px; + } + + .admin-controls { + display: flex; + gap: 8px; + } + + .admin-btn { + background: rgba(255,215,0,0.3); + border: 1px solid var(--admin-gold); + color: white; + padding: 4px 10px; + border-radius: 12px; + font-size: 12px; + cursor: pointer; + transition: all 0.2s; + } + + .admin-btn:hover { + background: rgba(255,215,0,0.5); + } + + .user-info { + padding: 12px 16px; + background: var(--card-bg); + border-bottom: 1px solid var(--border-color); + } + + .user-id-display { + font-size: 11px; + color: var(--text-muted); + margin-bottom: 8px; + display: flex; + align-items: center; + gap: 6px; + } + + .id-badge { + background: var(--dodgers-blue); + color: white; + padding: 2px 8px; + border-radius: 12px; + font-weight: 600; + font-family: monospace; + } + + .id-badge.admin { + background: linear-gradient(135deg, var(--admin-gold), #FFB700); + color: #333; + } + + .nickname-input { + position: relative; + } + + .nickname-input input { + width: 100%; + padding: 10px 12px; + border: 2px solid var(--border-color); + border-radius: 8px; + font-size: 14px; + transition: all 0.3s; + background: var(--input-bg); + color: var(--text-primary); + } + + .nickname-input input::placeholder { + color: var(--text-muted); + } + + .nickname-input input:focus { + outline: none; + border-color: var(--dodgers-blue); + box-shadow: 0 0 0 3px rgba(0,90,156,0.2); + } + + .chat-messages { + flex: 1; + overflow-y: auto; + padding: 16px; + background: var(--bg-dark); + } + + .message { + margin-bottom: 14px; + animation: slideIn 0.3s ease; + position: relative; + } + + .message:hover .message-actions { + opacity: 1; + } + + @keyframes slideIn { + from { + opacity: 0; + transform: translateX(-20px); + } + to { + opacity: 1; + transform: translateX(0); + } + } + + .message-header { + display: flex; + align-items: baseline; + gap: 6px; + margin-bottom: 4px; + flex-wrap: wrap; + } + + .message-nickname { + font-weight: 600; + color: var(--dodgers-blue); + font-size: 13px; + } + + .message-nickname.admin { + color: var(--admin-gold); + text-shadow: 0 0 2px rgba(255,215,0,0.5); + } + + .message-id { + font-size: 10px; + color: var(--text-muted); + font-family: monospace; + background: var(--border-color); + padding: 1px 5px; + border-radius: 10px; + } + + .message-time { + font-size: 11px; + color: var(--text-muted); + margin-left: auto; + } + + .message-actions { + position: absolute; + right: 0; + top: 0; + opacity: 0; + transition: opacity 0.2s; + display: flex; + gap: 4px; + } + + .delete-btn, .ban-btn { + background: rgba(239,62,66,0.9); + color: white; + border: none; + padding: 2px 8px; + border-radius: 4px; + font-size: 11px; + cursor: pointer; + } + + .ban-btn { + background: rgba(255,152,0,0.9); + } + + .message-text { + padding: 8px 12px; + background: var(--card-bg); + border-radius: 12px; + font-size: 14px; + line-height: 1.4; + box-shadow: 0 1px 3px rgba(0,0,0,0.3); + border-left: 3px solid transparent; + color: var(--text-primary); + word-wrap: break-word; + word-break: break-word; + overflow-wrap: break-word; + white-space: pre-wrap; + max-width: 100%; + } + + .own-message .message-nickname { + color: var(--dodgers-red); + } + + .own-message .message-text { + background: rgba(0,90,156,0.2); + border-left-color: var(--dodgers-blue); + } + + .admin-message .message-text { + background: rgba(255,215,0,0.15); + border-left-color: var(--admin-gold); + } + + .system-message { + text-align: center; + color: var(--text-muted); + font-size: 12px; + font-style: italic; + margin: 10px 0; + padding: 8px; + background: rgba(0,90,156,0.1); + border-radius: 8px; + } + + .typing-indicator { + padding: 0 16px 8px; + font-size: 12px; + color: var(--text-muted); + font-style: italic; + display: none; + } + + .typing-indicator.active { + display: block; + } + + .typing-indicator span { + animation: blink 1.4s infinite; + } + + .typing-indicator span:nth-child(2) { + animation-delay: 0.2s; + } + + .typing-indicator span:nth-child(3) { + animation-delay: 0.4s; + } + + .chat-input { + padding: 12px 16px; + background: var(--card-bg); + border-top: 1px solid var(--border-color); + } + + .input-group { + display: flex; + gap: 8px; + } + + .chat-input input { + flex: 1; + padding: 10px 14px; + border: 2px solid var(--border-color); + border-radius: 24px; + font-size: 14px; + transition: all 0.3s; + background: var(--input-bg); + color: var(--text-primary); + } + + .chat-input input::placeholder { + color: var(--text-muted); + } + + .chat-input input:focus { + outline: none; + border-color: var(--dodgers-blue); + box-shadow: 0 0 0 3px rgba(0,90,156,0.2); + } + + .chat-input button { + padding: 10px 20px; + background: linear-gradient(135deg, var(--dodgers-blue), var(--dodgers-light)); + color: white; + border: none; + border-radius: 24px; + font-size: 14px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s; + box-shadow: 0 2px 8px rgba(0,90,156,0.3); + } + + .chat-input button:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0,90,156,0.4); + } + + .chat-input button:active { + transform: translateY(0); + } + + .empty-chat { + text-align: center; + color: var(--text-muted); + padding: 40px 20px; + font-size: 13px; + } + + .connection-status { + padding: 6px; + background: var(--bg-darker); + text-align: center; + font-size: 11px; + color: var(--text-muted); + display: flex; + align-items: center; + justify-content: center; + gap: 6px; + border-top: 1px solid var(--border-color); + } + + .status-dot { + width: 6px; + height: 6px; + border-radius: 50%; + background: #4caf50; + animation: blink 2s infinite; + } + + .status-dot.offline { + background: #f44336; + animation: none; + } + + @keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } + } + + .notification-badge { + position: absolute; + top: -8px; + right: -8px; + background: var(--dodgers-red); + color: white; + border-radius: 10px; + padding: 2px 6px; + font-size: 11px; + font-weight: bold; + display: none; + animation: bounce 0.5s; + } + + .notification-badge.show { + display: block; + } + + @keyframes bounce { + 0%, 100% { transform: scale(1); } + 50% { transform: scale(1.2); } + } + + @keyframes slideOut { + to { + opacity: 0; + transform: translateX(100%); + } + } + + /* Floating action buttons */ + .fab-container { + position: fixed; + bottom: 20px; + right: 20px; + display: flex; + flex-direction: column; + gap: 10px; + z-index: 100; + } + + .fab { + width: 56px; + height: 56px; + border-radius: 50%; + background: linear-gradient(135deg, var(--dodgers-blue), var(--dodgers-light)); + color: white; + border: none; + cursor: pointer; + box-shadow: 0 4px 12px rgba(0,0,0,0.3); + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + transition: all 0.3s; + } + + .fab:hover { + transform: scale(1.1); + box-shadow: 0 6px 16px rgba(0,0,0,0.4); + } + + .fab.secondary { + width: 48px; + height: 48px; + font-size: 20px; + background: rgba(0,90,156,0.9); + } + + /* Toast notifications */ + .toast { + position: fixed; + bottom: 20px; + left: 50%; + transform: translateX(-50%); + background: rgba(0,0,0,0.9); + color: white; + padding: 12px 24px; + border-radius: 24px; + font-size: 14px; + z-index: 1000; + opacity: 0; + transition: opacity 0.3s; + } + + .toast.show { + opacity: 1; + } + + @media (max-width: 768px) { + .chat-section { + width: 100%; + position: absolute; + right: 0; + top: 0; + height: 100%; + z-index: 100; + } + + .video-header { + padding: 10px 15px; + } + + .logo { + font-size: 16px; + } + + .stream-stats { + gap: 10px; + } + + .quality-selector { + display: none; + } + } + + /* Scrollbar styling */ + .chat-messages::-webkit-scrollbar { + width: 6px; + } + + .chat-messages::-webkit-scrollbar-track { + background: var(--bg-darker); + } + + .chat-messages::-webkit-scrollbar-thumb { + background: var(--dodgers-blue); + border-radius: 3px; + opacity: 0.6; + } + + .chat-messages::-webkit-scrollbar-thumb:hover { + opacity: 1; + }