Kyohko’s Pick：從假電視到真正 Lounge 小角落的漫長進化史😂 一開始的想法其實很單純： 想在 VV Lounge 裡放一個 Kyohko’s Pick，隨機播放 Archive 已經收錄的 YouTube 內容。Archive 負責資料，Lounge 只負責展示，這部分一開始就定得很清楚。 接著我們先做了第一版小播放器，但問題很快就出來了： 它看起來比較像一張普通黑色卡片，沒有「小電視」感，而且播放鍵一按還會直接跳去 YouTube。於是開始進入第一輪改造：加播放鍵、改成原頁面播放、把播放器搬到 Kyohko 旁邊。 然後我們開始追求「更像電視」。 先把卡片做成復古電視，再把 music 類做成音響，其他類型做成小電視。結果雖然外框越做越像，但本質上還是「卡片裡塞播放器」，看起來始終不太像真正的家具。 後來又試了更激進的做法： 直接做一張完整的復古電視＋音響參考圖，希望 Work 可以照那個感覺做。這時候還出現了幾個經典事故： - Work 莫名召喚出一張神秘全身 Kyohko 😂 - 把設備圖當背景後，真正的播放器又疊在上面，變成「假螢幕 + 真螢幕」 - 場景圖一度變成超巨大右半頁，直接升級成 Kyohko IMAX Theater - 播放狀態一切換，整張場景圖又被深色 overlay 吃掉 - 播放鍵有時點了沒反應，後來才發現是 iframe 搶了 pointer events - 修好 click 之後，畫面又變成一整塊深色大銀幕 - 再修 playing state，才終於做到「場景圖一直在，YouTube 只在電視螢幕裡播」 中間還有一段很關鍵： 我們發現「一直逼 CSS 去模擬一台真電視」其實不是最好的方向。後來改成： 完整 Lounge 場景圖負責氣氛，真正播放器只負責功能。 這才是轉折點。 之後又經過一輪尺寸和位置調整。 一開始場景太大，縮小 10%～15%沒什麼感覺，再縮 30%又變得太小，還要重新調 anchor。後來 Work 終於查到真正生效的 selector 和 media query，才真的把場景： - 縮到合適大小 - 左側緊貼主內容欄 - 右邊留白沒關係 - 不再漂在最右邊 接著又把它放大約 20% 出頭，才找到現在這個剛剛好的比例。 手機版也一起調整了資訊順序： 生日倒數 → Upcoming → Kyohko’s Pick → Tag → 發文區 這樣比原本放在 Tag 下面更順。 桌面版最後還加了 YouTube ↗ 外部入口，因為小電視本來就是「陪伴播放」，想看 MV 大畫面的人直接去 YouTube 就好。 所以最後的第 66 版，才真正形成現在這個定位： - 桌面：小小的 Lounge 場景貼在內容旁邊 - 手機：入口位置合理，不擠 - 音樂時像背景陪伴 - MV 時雖然很小，但還是看得到畫面 - 想認真看就點 YouTube - Archive 連結、隨機選片、原頁播放都保留 一句話總結就是： 一開始想做「小電視播放器」，最後做成了「Kyohko 在 Lounge 裡陪你播東西的小角落」。 #網站更新
