From 7276886cfdfc70af046dcdea7a06bc785c7be53d Mon Sep 17 00:00:00 2001 From: fishtank-dashboard Date: Sun, 22 Mar 2026 17:36:15 -0700 Subject: [PATCH] navigation improvements --- fishtank-dashboard.html | 727 +++++++++++++++++++++++++++++++++++++++- 1 file changed, 716 insertions(+), 11 deletions(-) diff --git a/fishtank-dashboard.html b/fishtank-dashboard.html index f5b2789..3a4394c 100644 --- a/fishtank-dashboard.html +++ b/fishtank-dashboard.html @@ -1000,7 +1000,6 @@ /* Inline chat panel */ .chat-panel { - grid-area: chat; display: flex; flex-direction: column; background: var(--panel); @@ -1131,6 +1130,188 @@ z-index: 10; } + /* Notification log */ + #notifLog { + position: fixed; + top: 73px; + right: 0; + width: 320px; + max-height: calc(100vh - 73px); + background: var(--panel); + border-left: 1px solid var(--border); + display: flex; + flex-direction: column; + z-index: 200; + transform: translateX(100%); + transition: transform 0.2s ease; + } + #notifLog.open { transform: translateX(0); } + .notif-log-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 12px; + border-bottom: 1px solid var(--border); + font-family: 'Bebas Neue', sans-serif; + font-size: 14px; + letter-spacing: 2px; + color: var(--accent); + flex-shrink: 0; + } + .notif-log-clear { + background: none; + border: none; + color: var(--muted); + font-family: 'Share Tech Mono', monospace; + font-size: 10px; + cursor: pointer; + padding: 2px 6px; + } + .notif-log-clear:hover { color: var(--accent2); } + #notifLogFeed { + flex: 1; + overflow-y: auto; + padding: 8px; + display: flex; + flex-direction: column; + gap: 6px; + } + #notifLogFeed::-webkit-scrollbar { width: 4px; } + #notifLogFeed::-webkit-scrollbar-track { background: transparent; } + #notifLogFeed::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } + .notif-log-item { + background: var(--bg); + border: 1px solid var(--border); + border-radius: 4px; + padding: 8px 10px; + } + .notif-log-item-msg { font-size: 12px; color: var(--text); } + .notif-log-item-sub { font-size: 10px; color: var(--muted); margin-top: 2px; } + .notif-log-item-time { + font-family: 'Share Tech Mono', monospace; + font-size: 9px; + color: var(--muted); + margin-top: 4px; + } + #notifLogBtn { position: relative; } + .notif-log-badge { + display: none; + position: absolute; + top: -4px; + right: -4px; + background: var(--accent2); + color: #fff; + font-family: 'Share Tech Mono', monospace; + font-size: 9px; + border-radius: 8px; + padding: 1px 5px; + pointer-events: none; + } + + /* Floor plan panel */ + .floor-plan-panel { + flex-shrink: 0; + border-bottom: 1px solid var(--border); + background: var(--panel); + padding: 6px; + display: flex; + flex-direction: column; + gap: 4px; + } + .floor-plan-tabs { + display: flex; + gap: 4px; + } + .floor-plan-tab { + flex: 1; + background: transparent; + border: 1px solid var(--border); + color: var(--muted); + font-family: 'Share Tech Mono', monospace; + font-size: 9px; + letter-spacing: 1px; + padding: 3px 0; + cursor: pointer; + border-radius: 2px; + transition: all 0.15s; + } + .floor-plan-tab.active { + border-color: var(--accent); + color: var(--accent); + background: rgba(0,229,255,0.06); + } + .floor-plan-wrap { + position: relative; + width: 100%; + } + .floor-plan-wrap img { + width: 100%; + display: block; + opacity: 0.85; + } + .floor-plan-btn { + position: absolute; + background: transparent; + border: none; + color: #DC6F41; + font-family: 'Share Tech Mono', monospace; + font-size: 9px; + cursor: pointer; + padding: 2px; + line-height: 1.2; + text-align: center; + transition: background 0.15s; + font-weight: bold; + text-shadow: 0 0 4px rgba(0,0,0,0.8); + } + .floor-plan-btn:hover { + background: rgba(220,111,65,0.25); + color: #fff; + } + .floor-plan-btn.active-room { + background: rgba(220,111,65,0.35); + color: #fff; + outline: 1px solid #DC6F41; + } + + /* Camera navigation overlay */ + .cam-nav-overlay { + position: absolute; + inset: 0; + pointer-events: none; + z-index: 10; + } + .cam-nav-overlay svg { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + } + .cam-nav-overlay polygon { + fill: transparent; + transition: fill 0.15s; + pointer-events: auto; + cursor: pointer; + } + .cam-nav-overlay polygon:hover { + fill: rgba(255,255,255,0.18); + } + .cam-nav-tooltip { + position: absolute; + background: rgba(0,0,0,0.85); + color: var(--accent); + font-family: 'Share Tech Mono', monospace; + font-size: 10px; + padding: 4px 8px; + border-radius: 3px; + border: 1px solid var(--border); + pointer-events: none; + white-space: nowrap; + z-index: 20; + display: none; + letter-spacing: 1px; + } + /* Viewer count badge */ .cam-viewers { position: absolute; @@ -1407,7 +1588,6 @@ /* Inline chat panel */ .chat-panel { - grid-area: chat; display: flex; flex-direction: column; background: var(--panel); @@ -1538,6 +1718,188 @@ z-index: 10; } + /* Notification log */ + #notifLog { + position: fixed; + top: 73px; + right: 0; + width: 320px; + max-height: calc(100vh - 73px); + background: var(--panel); + border-left: 1px solid var(--border); + display: flex; + flex-direction: column; + z-index: 200; + transform: translateX(100%); + transition: transform 0.2s ease; + } + #notifLog.open { transform: translateX(0); } + .notif-log-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 8px 12px; + border-bottom: 1px solid var(--border); + font-family: 'Bebas Neue', sans-serif; + font-size: 14px; + letter-spacing: 2px; + color: var(--accent); + flex-shrink: 0; + } + .notif-log-clear { + background: none; + border: none; + color: var(--muted); + font-family: 'Share Tech Mono', monospace; + font-size: 10px; + cursor: pointer; + padding: 2px 6px; + } + .notif-log-clear:hover { color: var(--accent2); } + #notifLogFeed { + flex: 1; + overflow-y: auto; + padding: 8px; + display: flex; + flex-direction: column; + gap: 6px; + } + #notifLogFeed::-webkit-scrollbar { width: 4px; } + #notifLogFeed::-webkit-scrollbar-track { background: transparent; } + #notifLogFeed::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } + .notif-log-item { + background: var(--bg); + border: 1px solid var(--border); + border-radius: 4px; + padding: 8px 10px; + } + .notif-log-item-msg { font-size: 12px; color: var(--text); } + .notif-log-item-sub { font-size: 10px; color: var(--muted); margin-top: 2px; } + .notif-log-item-time { + font-family: 'Share Tech Mono', monospace; + font-size: 9px; + color: var(--muted); + margin-top: 4px; + } + #notifLogBtn { position: relative; } + .notif-log-badge { + display: none; + position: absolute; + top: -4px; + right: -4px; + background: var(--accent2); + color: #fff; + font-family: 'Share Tech Mono', monospace; + font-size: 9px; + border-radius: 8px; + padding: 1px 5px; + pointer-events: none; + } + + /* Floor plan panel */ + .floor-plan-panel { + flex-shrink: 0; + border-bottom: 1px solid var(--border); + background: var(--panel); + padding: 6px; + display: flex; + flex-direction: column; + gap: 4px; + } + .floor-plan-tabs { + display: flex; + gap: 4px; + } + .floor-plan-tab { + flex: 1; + background: transparent; + border: 1px solid var(--border); + color: var(--muted); + font-family: 'Share Tech Mono', monospace; + font-size: 9px; + letter-spacing: 1px; + padding: 3px 0; + cursor: pointer; + border-radius: 2px; + transition: all 0.15s; + } + .floor-plan-tab.active { + border-color: var(--accent); + color: var(--accent); + background: rgba(0,229,255,0.06); + } + .floor-plan-wrap { + position: relative; + width: 100%; + } + .floor-plan-wrap img { + width: 100%; + display: block; + opacity: 0.85; + } + .floor-plan-btn { + position: absolute; + background: transparent; + border: none; + color: #DC6F41; + font-family: 'Share Tech Mono', monospace; + font-size: 9px; + cursor: pointer; + padding: 2px; + line-height: 1.2; + text-align: center; + transition: background 0.15s; + font-weight: bold; + text-shadow: 0 0 4px rgba(0,0,0,0.8); + } + .floor-plan-btn:hover { + background: rgba(220,111,65,0.25); + color: #fff; + } + .floor-plan-btn.active-room { + background: rgba(220,111,65,0.35); + color: #fff; + outline: 1px solid #DC6F41; + } + + /* Camera navigation overlay */ + .cam-nav-overlay { + position: absolute; + inset: 0; + pointer-events: none; + z-index: 10; + } + .cam-nav-overlay svg { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + } + .cam-nav-overlay polygon { + fill: transparent; + transition: fill 0.15s; + pointer-events: auto; + cursor: pointer; + } + .cam-nav-overlay polygon:hover { + fill: rgba(255,255,255,0.18); + } + .cam-nav-tooltip { + position: absolute; + background: rgba(0,0,0,0.85); + color: var(--accent); + font-family: 'Share Tech Mono', monospace; + font-size: 10px; + padding: 4px 8px; + border-radius: 3px; + border: 1px solid var(--border); + pointer-events: none; + white-space: nowrap; + z-index: 20; + display: none; + letter-spacing: 1px; + } + /* Viewer count badge */ .cam-viewers { position: absolute; @@ -1794,6 +2156,16 @@ +
+
+ 📣 NOTIFICATIONS + +
+
+
No notifications yet
+
+
+
@@ -1802,6 +2174,7 @@ +
@@ -1877,7 +2250,18 @@
-
+
+
+
+ + +
+
+ Floor plan +
+
+ +
💬
Waiting for messages...
@@ -1889,6 +2273,7 @@ 0 messages
+
@@ -2470,7 +2855,7 @@ ["Dorm", "dmrm-5"], ["Director Mode", "dirc-5"], ["Confessional", "cfsl-5"], - ["Balcony", "bkny-5"], + ["East Wing", "bkny-5"], ["Foyer", "foyr-5"], ["Closet", "dmcl-5"], ["Glassroom", "gsrm-5"], @@ -2484,21 +2869,118 @@ ["Jacuzzi", "jckz-5"], ["Dining Room", "dnrm-5"], ["Market", "mrke-5"], - ["Hallway Down", "hwdn-5"], - ["Hallway Up", "hwup-5"], + ["Hallway", "hwdn-5"], + ["West Wing", "hwup-5"], ["Jungle Room", "br4j-5"], + ["Computer Lab", "bbcl-5"], ["Cameraman", "cameraman2-5"], ]; + // Navigation polygons per camera slug + // Format: { label, slug, points (normalized 0-1) } + const CAM_NAV = { + 'dmrm-5': [ + { label: 'Jacuzzi', slug: 'jckz-5', points: '0.8772,0.4250 0.9055,0.1417 0.9656,0.1885 0.9299,0.4598' }, + { label: 'Hallway', slug: 'hwdn-5', points: '0.5186,0.0084 0.5206,0.2797 0.4896,0.3001 0.4686,0.3097 0.4626,0.0180' }, + { label: 'Closet', slug: 'dmcl-5', points: '0.1546,0.5414 0.1283,0.3770 0.1060,0.1657 0.1762,0.1188 0.1925,0.3157 0.2012,0.4154 0.2134,0.4898' }, + { label: 'Dorm Alt', slug: 'dmrm2-5', points: '0.5274,0.0024 0.5287,0.0648 0.5942,0.0648 0.5936,0.0048' }, + ], + 'dmcl-5': [ + { label: 'Dorm', slug: 'dmrm-5', points: '0.6854,0.0166 0.6273,0.5819 0.7248,0.6865 0.8317,0.1152' }, + ], + 'brrr-5': [ + { label: 'Bar PTZ', slug: 'brpz-5', points: '0.8164,0.0024 0.8184,0.0852 0.7536,0.0864 0.7550,0.0000' }, + { label: 'Bar Alt', slug: 'brrr2-5', points: '0.3289,0.0636 0.2343,0.1008 0.2289,0.0036 0.3255,0.0036' }, + { label: 'Kitchen', slug: 'ktch-5', points: '0.9717,0.2641 0.9082,0.2029 0.8799,0.3866 0.8535,0.5258 0.9082,0.5822' }, + { label: 'Hallway', slug: 'hwdn-5', points: '0.9987,0.3349 0.9542,0.5474 0.8887,0.7611 0.8029,0.9652 0.8002,0.9712 0.7914,0.9976 0.7907,0.9940 0.9987,0.9940' }, + ], + 'ktch-5': [ + { label: 'Bar', slug: 'brrr-5', points: '0.0100,0.7812 0.0120,0.9822 0.2588,0.9941 0.2602,0.7384' }, + { label: 'Dining Room', slug: 'dnrm-5', points: '0.4295,0.4934 0.3140,0.5582 0.1877,0.6351 0.0993,0.6867 0.1020,0.6879 0.0493,0.4526 0.0223,0.2545 0.0101,0.0480 0.0020,0.0564 0.0014,0.0012 0.2883,0.0012 0.4234,0.0000 0.4322,0.0000' }, + { label: 'Glassroom', slug: 'gsrm-5', points: '0.9798,0.2293 0.9994,0.2497 0.9987,0.3601 0.9987,0.4958 0.9717,0.6242 0.9697,0.6267 0.9326,0.5822 0.9272,0.6002 0.9191,0.5918 0.9116,0.5822' }, + { label: 'Bar', slug: 'brrr-5', points: '0.7057,0.9976 0.8373,0.7575 0.8590,0.7803 0.9278,0.6002 0.9332,0.5846 0.9731,0.6291 0.9974,0.5042 0.9987,0.9952' }, + ], + 'hwdn-5': [ + { label: 'Foyer', slug: 'foyr-5', points: '0.2782,0.8800 0.2445,0.6267 0.2228,0.3553 0.2201,0.2221 0.1695,0.3433 0.1310,0.4526 0.1742,0.7479 0.2235,0.9640 0.2336,0.9952 0.2620,0.9952' }, + { label: 'Bar', slug: 'brrr-5', points: '0.8191,0.9988 0.6901,0.6279 0.5753,0.3373 0.5490,0.2713 0.5328,0.4766 0.5119,0.7107 0.4923,0.9328 0.5038,0.9988' }, + { label: 'Dorm', slug: 'dmrm-5', points: '0.4099,0.3193 0.4193,0.0144 0.3356,0.0156 0.3316,0.3157' }, + ], + 'dnrm-5': [ + { label: 'West Wing', slug: 'hwup-5', points: '0.2006,0.0036 0.0014,0.0036 0.0007,0.2761 0.0000,0.3397 0.0115,0.4226 0.0257,0.4994 0.0358,0.5534 0.0513,0.6387 0.0527,0.6399 0.0939,0.6062 0.1310,0.5798 0.1486,0.5666 0.1533,0.5366 0.1722,0.4874 0.1918,0.4346 0.2107,0.3733 0.2282,0.3289 0.2289,0.2977 0.2093,0.3073' }, + { label: 'Kitchen', slug: 'ktch-5', points: '0.6415,0.3505 0.6550,0.1909 0.6692,0.0024 0.8009,0.0012 0.9157,0.0624 0.9164,0.0864 0.9076,0.1753 0.8914,0.3049 0.8569,0.4970 0.8563,0.5006 0.8549,0.5042 0.8535,0.5150' }, + ], + 'mrke-5': [ + { label: 'Foyer', slug: 'foyr-5', points: '0.9981,0.2509 0.9461,0.1825 0.8617,0.7239 0.8806,0.9928 0.9069,0.9976 0.9981,0.7119' }, + { label: 'Market Alt', slug: 'mrke2-5', points: '0.3559,0.0024 0.3579,0.1068 0.5085,0.1092 0.5098,0.0012' }, + ], + 'foyr-5': [ + { label: 'East Wing', slug: 'bkny-5', points: '0.3093,0.0036 0.4686,0.2881 0.5747,0.2569 0.6077,0.1068 0.6226,0.0012' }, + { label: 'Market', slug: 'mrke-5', points: '0.1148,0.8247 0.0338,0.2809 0.0358,0.0060 0.0014,0.0060 0.0027,0.9952 0.1546,0.9988' }, + { label: 'Hallway', slug: 'hwdn-5', points: '0.1681,0.3097 0.0682,0.3589 0.0864,0.5138 0.1749,0.4682' }, + { label: 'Bar', slug: 'brrr-5', points: '0.1762,0.0504 0.0594,0.0924 0.0696,0.3529 0.1702,0.3097' }, + { label: 'Glassroom', slug: 'gsrm-5', points: '0.7597,0.7599 0.8819,0.4094 0.7286,0.2293 0.6375,0.5846' }, + ], + 'gsrm-5': [ + { label: 'Foyer', slug: 'foyr-5', points: '0.2553,0.5114 0.2357,0.2593 0.2222,0.0636 0.1134,0.1224 0.0358,0.1813 0.0675,0.4406 0.1053,0.6363' }, + { label: 'Kitchen', slug: 'ktch-5', points: '0.5672,0.3745 0.5780,0.2041 0.5895,0.0084 0.5760,0.0000 0.5281,0.0012 0.5112,0.3205' }, + ], + 'codr-5': [ + { label: 'Confessional', slug: 'cfsl-5', points: '0.5517,0.6387 0.3545,0.9928 0.0020,0.9964 0.0007,0.0024 0.5436,0.0036' }, + { label: 'West Wing', slug: 'hwup-5', points: '0.7435,0.2653 0.8346,0.3109 0.9224,0.3433 0.9353,0.2053 0.8535,0.0012 0.7752,0.0000 0.7455,0.0060' }, + ], + 'bkny-5': [ + { label: 'West Wing', slug: 'hwup-5', points: '0.3322,0.9988 0.3721,0.7695 0.6071,0.8067 0.6091,0.8992 0.5996,0.9184 0.6044,0.9976' }, + { label: 'Bar', slug: 'brrr-5', points: '0.6618,0.3049 0.6523,0.1104 0.6138,0.0588 0.6057,0.1333 0.5990,0.3709 0.5936,0.5726 0.6003,0.6987 0.6064,0.7863 0.6111,0.8944 0.6368,0.6375' }, + { label: 'Market', slug: 'mrke-5', points: '0.2829,0.4910 0.0716,0.4778 0.0736,0.4802 0.1283,0.7407 0.1513,0.8319 0.2087,0.8487 0.2141,0.8271 0.2046,0.8019 0.2188,0.7515 0.2100,0.7215 0.2255,0.6819 0.2195,0.6435' }, + { label: 'Foyer', slug: 'foyr-5', points: '0.1519,0.8283 0.1148,0.9448 0.0419,0.7347 0.0020,0.8475 0.0007,0.9976 0.2019,0.9988 0.2114,0.9796 0.1992,0.9520 0.2120,0.9076 0.2033,0.8752 0.2080,0.8535' }, + { label: 'Computer Lab', slug: 'bbcl-5', points: '0.4274,0.0120 0.4524,0.0060 0.4565,0.2377 0.4612,0.3782 0.4416,0.4850 0.4396,0.4874 0.4383,0.4910' }, + ], + 'hwup-5': [ + { label: 'Corridor', slug: 'codr-5', points: '0.5227,0.3409 0.5206,0.0300 0.5774,0.0372 0.5726,0.3469' }, + { label: 'East Wing', slug: 'bkny-5', points: '0.6159,0.7851 0.4079,0.7863 0.3869,0.9976 0.6334,0.9964' }, + { label: 'Jungle Room', slug: 'br4j-5', points: '0.5861,0.5078 0.5922,0.0384 0.6145,0.0540 0.6064,0.4070 0.5936,0.5954' }, + { label: 'Dining Room', slug: 'dnrm-5', points: '0.5011,0.3397 0.5004,0.2017 0.4551,0.2041 0.4558,0.2353 0.4443,0.2881 0.4450,0.3397' }, + ], + 'dmrm2-5': [ + { label: 'Dorm', slug: 'dmrm-5', points: '0.5254,0.0024 0.5254,0.0684 0.6213,0.0684 0.6213,0.0036' }, + ], + 'brrr2-5': [ + { label: 'Bar', slug: 'brrr-5', points: '0.8272,0.4418 0.8421,0.3001 0.8448,0.2905 0.8542,0.2881 0.8556,0.2725 0.8481,0.2665 0.8427,0.2581 0.8515,0.0024 0.6348,0.0012 0.6314,0.1705 0.6388,0.2173 0.6483,0.2341 0.6483,0.3325 0.6753,0.4346' }, + { label: 'Kitchen', slug: 'ktch-5', points: '0.3079,0.0048 0.3167,0.1741 0.3282,0.3397 0.3741,0.3397 0.3896,0.3037 0.3768,0.3025 0.3640,0.0348 0.3626,0.0000' }, + { label: 'Hallway', slug: 'hwdn-5', points: '0.4734,0.2965 0.6186,0.3001 0.6186,0.2473 0.5639,0.2461 0.5314,0.2497 0.4767,0.2509 0.4734,0.2497' }, + { label: 'Foyer', slug: 'foyr-5', points: '0.6206,0.0240 0.5612,0.0204 0.5618,0.2449 0.6172,0.2461' }, + ], + 'jckz-5': [ + { label: 'Dorm', slug: 'dmrm-5', points: '0.0844,0.0096 0.1067,0.2041 0.1351,0.3842 0.1452,0.4370 0.1074,0.4790 0.0797,0.5102 0.0439,0.3517 0.0081,0.1729 0.0007,0.1357 0.0000,0.0948' }, + ], + 'brpz-5': [ + { label: 'Bar', slug: 'brrr-5', points: '0.9987,0.9160 0.0014,0.9160 0.0014,0.9988 0.5375,0.9988 0.9947,0.9988 0.9987,0.9976' }, + ], + 'mrke2-5': [ + { label: 'Foyer', slug: 'foyr-5', points: '0.2512,0.1345 0.4356,0.0720 0.4369,0.4826 0.3640,0.5378 0.3181,0.5738 0.2971,0.5870 0.2816,0.6026' }, + { label: 'Market', slug: 'mrke-5', points: '0.5868,0.0000 0.5814,0.1357 0.7509,0.1609 0.7597,0.0024' }, + ], + 'bbcl-5': [ + { label: 'East Wing', slug: 'bkny-5', points: '0.4626,0.0132 0.3815,0.0132 0.3815,0.3169 0.3876,0.4274 0.3863,0.4358 0.3890,0.4394 0.4599,0.3914' }, + ], + 'cfsl-5': [ + { label: 'Corridor', slug: 'codr-5', points: '0.1364,0.9976 0.1364,0.0012 0.0020,0.0024 0.0014,0.9976' }, + ], + 'br4j-5': [ + { label: 'West Wing', slug: 'hwup-5', points: '0.4869,0.3830 0.4923,0.0144 0.4227,0.0228 0.4214,0.1813 0.4220,0.4298' }, + ], + }; + const ROOM_NAMES = { "dmrm-5": "Dorm", "dirc-5": "Director Mode", "cfsl-5": "Confessional", - "bkny-5": "Balcony", "foyr-5": "Foyer", "dmcl-5": "Closet", + "bkny-5": "East Wing", "foyr-5": "Foyer", "dmcl-5": "Closet", "gsrm-5": "Glassroom", "brrr-5": "Bar", "codr-5": "Corridor", "brpz-5": "Bar PTZ", "mrke2-5": "Market Alternate", "ktch-5": "Kitchen", "brrr2-5": "Bar Alternate", "dmrm2-5": "Dorm Alternate", "jckz-5": "Jacuzzi", - "dnrm-5": "Dining Room", "mrke-5": "Market", "hwdn-5": "Hallway Down", - "hwup-5": "Hallway Up", + "dnrm-5": "Dining Room", "mrke-5": "Market", "hwdn-5": "Hallway", + "hwup-5": "West Wing", "br4j-5": "Jungle Room", + "bbcl-5": "Computer Lab", "cameraman2-5": "Cameraman", "site": "Site-wide", }; @@ -2592,6 +3074,118 @@ } } + function getVideoRect(wrap) { + // Calculate actual rendered video rect accounting for object-fit:contain pillarboxing + const video = wrap.querySelector('video'); + if (!video || !video.videoWidth) return null; + const cW = wrap.clientWidth, cH = wrap.clientHeight; + const vRatio = video.videoWidth / video.videoHeight; + const cRatio = cW / cH; + let vW, vH, vX, vY; + if (vRatio > cRatio) { + // letterboxed top/bottom + vW = cW; + vH = cW / vRatio; + vX = 0; + vY = (cH - vH) / 2; + } else { + // pillarboxed left/right + vH = cH; + vW = cH * vRatio; + vX = (cW - vW) / 2; + vY = 0; + } + return { x: vX, y: vY, w: vW, h: vH }; + } + + function renderNavOverlay(slug) { + const wrap = document.getElementById('camFeaturedWrap'); + if (!wrap) return; + const existing = wrap.querySelector('.cam-nav-overlay'); + if (existing) { if (existing._ro) existing._ro.disconnect(); existing.remove(); } + const existingTip = wrap.querySelector('.cam-nav-tooltip'); + if (existingTip) existingTip.remove(); + + const navs = CAM_NAV[slug]; + if (!navs || !navs.length) return; + + const tip = document.createElement('div'); + tip.className = 'cam-nav-tooltip'; + wrap.appendChild(tip); + + const div = document.createElement('div'); + div.className = 'cam-nav-overlay'; + + const svgNS = 'http://www.w3.org/2000/svg'; + const svg = document.createElementNS(svgNS, 'svg'); + // Use pixel coords matching the container — we'll transform points ourselves + const cW = wrap.clientWidth, cH = wrap.clientHeight; + svg.setAttribute('viewBox', `0 0 ${cW} ${cH}`); + svg.setAttribute('preserveAspectRatio', 'none'); + svg.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;'; + + function buildPolygons() { + // Clear existing polygons + while (svg.firstChild) svg.removeChild(svg.firstChild); + + const vRect = getVideoRect(wrap); + if (!vRect) return; + + navs.forEach(({ label, slug: targetSlug, points }) => { + const poly = document.createElementNS(svgNS, 'polygon'); + // Transform normalized 0-1 points to pixel coords within the actual video rect + const pts = points.split(' ').map(p => { + const [nx, ny] = p.split(',').map(Number); + return `${vRect.x + nx * vRect.w},${vRect.y + ny * vRect.h}`; + }).join(' '); + poly.setAttribute('points', pts); + + poly.addEventListener('mouseenter', () => { + tip.textContent = '→ ' + (ROOM_NAMES[targetSlug] || label); + tip.style.display = 'block'; + }); + poly.addEventListener('mousemove', e => { + const rect = wrap.getBoundingClientRect(); + let x = e.clientX - rect.left + 12; + let y = e.clientY - rect.top + 12; + if (x + 160 > cW) x = e.clientX - rect.left - 160; + tip.style.left = x + 'px'; + tip.style.top = y + 'px'; + }); + poly.addEventListener('mouseleave', () => { + tip.style.display = 'none'; + }); + poly.addEventListener('click', () => { + switchToRoom(targetSlug); + }); + + svg.appendChild(poly); + }); + } + + div.appendChild(svg); + wrap.appendChild(div); + + function rebuild() { + svg.setAttribute('viewBox', `0 0 ${wrap.clientWidth} ${wrap.clientHeight}`); + buildPolygons(); + } + + // Build now if video already has dimensions, otherwise wait for it + const video = wrap.querySelector('video'); + if (video && video.videoWidth) { + rebuild(); + } else if (video) { + video.addEventListener('loadedmetadata', rebuild, { once: true }); + video.addEventListener('canplay', rebuild, { once: true }); + } + + // Rebuild on container resize — pillarboxing changes when panels collapse + const ro = new ResizeObserver(rebuild); + ro.observe(wrap); + div._ro = ro; + } + function setFeaturedStream(idx) { const [name, slug] = CAMERAS[idx]; const wrap = document.getElementById('camFeaturedWrap'); @@ -2618,7 +3212,13 @@ if (typeof updateViewerCounts === 'function' && window._lastPresenceData) { updateViewerCounts(window._lastPresenceData); } - + // Render immediately, then re-render once video dimensions are known + renderNavOverlay(slug); + if (window.renderFloorButtons) window.renderFloorButtons(window.currentFloor || 'down'); + const featVid = wrap && wrap.querySelector('video'); + if (featVid) { + featVid.addEventListener('loadedmetadata', () => renderNavOverlay(slug), { once: true }); + } } function setFeatured(i) { @@ -3799,16 +4399,77 @@ if (inlineChatAutoScroll) inlineFeed.scrollTop = inlineFeed.scrollHeight; } + // ── Floor plan ─────────────────────────────────────────────── + const FLOOR_ROOMS = { + down: [ + { label: 'Dining\nRoom', slug: 'dnrm-5', style: 'bottom:0.75%;left:0%;height:50%;width:22%' }, + { label: 'Kitchen', slug: 'ktch-5', style: 'bottom:0.75%;left:22%;height:60%;width:22%' }, + { label: 'Bar', slug: 'brrr-5', style: 'bottom:0.75%;left:42.5%;height:60%;width:22%' }, + { label: 'Dorm', slug: 'dmrm-5', style: 'bottom:0.75%;left:75%;height:67%;width:22%' }, + { label: 'Glass\nroom', slug: 'gsrm-5', style: 'top:0.75%;left:27.5%;height:35%;width:15%' }, + { label: 'Foyer', slug: 'foyr-5', style: 'top:0%;left:42%;height:33%;width:20%' }, + { label: 'Market', slug: 'mrke-5', style: 'top:0.75%;left:62.5%;height:30%;width:15%' }, + { label: 'Jacuzzi', slug: 'jckz-5', style: 'top:0.75%;right:1%;height:30%;width:12%' }, + { label: 'Hallway', slug: 'hwdn-5', style: 'top:30%;left:42%;height:10%;width:33%' }, + { label: 'Closet', slug: 'dmcl-5', style: 'bottom:0.75%;left:65%;height:25%;width:10%' }, + ], + up: [ + { label: 'Corridor', slug: 'codr-5', style: 'top:0%;left:0%;height:55%;width:8%' }, + { label: 'Confessional', slug: 'cfsl-5', style: 'top:0%;left:0%;height:17%;width:17%' }, + { label: 'West Wing', slug: 'hwup-5', style: 'top:42%;left:15%;height:12%;width:25%' }, + { label: 'East Wing', slug: 'bkny-5', style: 'top:42%;left:42%;height:12%;width:25%' }, + { label: 'Jungle\nRoom', slug: 'br4j-5', style: 'top:0%;left:17%;height:42%;width:22%' }, + { label: 'Computer\nLab', slug: 'bbcl-5', style: 'top:0%;right:22%;height:42%;width:20%' }, + ], + }; + + window.currentFloor = 'down'; + let currentFloor = 'down'; + + window.renderFloorButtons = function renderFloorButtons(floor) { + const wrap = document.getElementById('floorPlanWrap'); + if (!wrap) return; + wrap.querySelectorAll('.floor-plan-btn').forEach(b => b.remove()); + const rooms = FLOOR_ROOMS[floor] || []; + const currentSlug = CAMERAS[featuredIdx] ? CAMERAS[featuredIdx][1] : null; + rooms.forEach(({ label, slug, style }) => { + const btn = document.createElement('button'); + btn.className = 'floor-plan-btn' + (slug === currentSlug ? ' active-room' : ''); + btn.style.cssText = style; + btn.innerHTML = label.replace('\n', '
'); + btn.title = ROOM_NAMES[slug] || label; + btn.onclick = () => switchToRoom(slug); + wrap.appendChild(btn); + }); + }; + + window.setFloor = function(floor) { + currentFloor = floor; + window.currentFloor = floor; + document.getElementById('floorTabDown').classList.toggle('active', floor === 'down'); + document.getElementById('floorTabUp').classList.toggle('active', floor === 'up'); + document.getElementById('floorPlanImg').src = floor === 'down' + ? 'https://cdn.fishtank.live/images/map/s5/lower.png' + : 'https://cdn.fishtank.live/images/map/s5/upper.png'; + renderFloorButtons(floor); + }; + + setTimeout(() => renderFloorButtons('down'), 500); + // ── End floor plan ──────────────────────────────────────────── + window.toggleChat = function() { chatCollapsed = !chatCollapsed; const main = document.querySelector('.main'); const btn = document.getElementById('chatCollapseBtn'); + const fpPanel = document.getElementById('floorPlanPanel'); if (chatCollapsed) { main.classList.add('chat-collapsed'); + if (fpPanel) fpPanel.style.display = 'none'; btn.textContent = '💬 CHAT'; btn.title = 'Show chat panel'; } else { main.classList.remove('chat-collapsed'); + if (fpPanel) fpPanel.style.display = ''; btn.textContent = '💬 CHAT'; btn.title = 'Hide chat panel'; inlineFeed.scrollTop = inlineFeed.scrollHeight; @@ -4049,9 +4710,53 @@ subEl.style.display = subtitle ? '' : 'none'; popup.classList.add('show'); if (notifTimer) clearTimeout(notifTimer); - notifTimer = setTimeout(hideNotif, 8000); + notifTimer = setTimeout(hideNotif, 15000); // Play notification sound try { new Audio('https://cdn.fishtank.live/sounds/xp.mp3').play(); } catch(e) {} + + // Add to log + const feed = document.getElementById('notifLogFeed'); + if (feed) { + const empty = feed.querySelector('div[style*="No notifications"]'); + if (empty) empty.remove(); + const ts = new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' }); + const item = document.createElement('div'); + item.className = 'notif-log-item'; + item.innerHTML = `
${message}
` + + (subtitle ? `
${subtitle}
` : '') + + `
${ts}
`; + feed.insertBefore(item, feed.firstChild); + while (feed.children.length > 50) feed.removeChild(feed.lastChild); + } + + // Unread badge + if (!notifLogOpen) { + notifLogUnread++; + const badge = document.getElementById('notifLogBadge'); + if (badge) { badge.textContent = notifLogUnread; badge.style.display = 'block'; } + } + }; + + let notifLogUnread = 0; + let notifLogOpen = false; + + window.toggleNotifLog = function() { + notifLogOpen = !notifLogOpen; + const log = document.getElementById('notifLog'); + if (log) log.classList.toggle('open', notifLogOpen); + if (notifLogOpen) { + notifLogUnread = 0; + const badge = document.getElementById('notifLogBadge'); + if (badge) badge.style.display = 'none'; + } + }; + + window.clearNotifLog = function() { + const feed = document.getElementById('notifLogFeed'); + if (feed) feed.innerHTML = `
No notifications yet
`; + notifLogUnread = 0; + const badge = document.getElementById('notifLogBadge'); + if (badge) badge.style.display = 'none'; }; window.hideNotif = function() {