josh/ytplayer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add phone remote control: pair a phone with a 6-digit code or QR to drive a desktop instance's playback, queue, volume, sleep timer and service mode

Browse Source
This commit is contained in:
Jonathan Sykes
2026-09-18 20:19:00 +08:00
parent 524db986d2
commit b82f17cd46
9 changed files with 1300 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/index.html
View File

@@ -40,6 +40,7 @@
<button class="nav-item" data-view="saved">💾 Saved</button>
<button class="nav-item" data-view="downloads">⬇ Downloads <span id="navDlCount" class="nav-badge hidden">0</span></button>
<button class="nav-item" data-view="settings">⚙ Settings</button>
<button class="nav-item" id="navRemoteBtn" type="button" title="Control this screen from a phone, or use this phone as a remote">📱 Remote</button>
</nav>
<div class="pl-header">
@@ -362,6 +363,62 @@
</div>
<!-- YouTube-style bottom navigation bar (portrait PWA mode only) -->
<!-- Desktop: shown while phones are driving this screen (remote.js) -->
<button id="remoteChip" class="remote-chip hidden" type="button" title="Phone remote settings">
<span class="remote-chip-dot"></span><span id="remoteChipText">Remote connected</span>
</button>
<!-- Phone: remote control for a desktop instance -->
<section id="remoteView" class="remote-view hidden" aria-label="Phone remote">
<div class="rv-top">
<button id="rvClose" class="rv-icon" type="button" aria-label="Close remote">✕</button>
<div class="rv-host">
<div id="rvHostName" class="rv-host-name">Remote</div>
<div id="rvStatus" class="rv-status">Not connected</div>
</div>
<button id="rvMenu" class="rv-icon" type="button" aria-label="Remote options">⋯</button>
</div>
<div id="rvPair" class="rv-pair">
<div class="rv-pair-title">Connect to a screen</div>
<p class="rv-pair-help">On the computer that plays to the TV or speakers, open <b>📱 Remote</b> → <b>Control from a phone</b>, then enter the 6-digit code shown there (or scan its QR code with your camera).</p>
<input id="rvCode" class="rv-code" inputmode="numeric" autocomplete="one-time-code" maxlength="7" placeholder="000 000" />
<input id="rvName" class="rv-name" maxlength="40" placeholder="This phone's name" />
<button id="rvPairBtn" class="rv-primary" type="button">Pair</button>
<div id="rvPairMsg" class="rv-pair-msg"></div>
</div>
<div id="rvControl" class="rv-control hidden">
<div class="rv-now">
<img id="rvThumb" class="rv-thumb" alt="" />
<div class="rv-now-text">
<div id="rvTitle" class="rv-title">Nothing playing</div>
<div id="rvChannel" class="rv-channel"></div>
</div>
</div>
<div class="rv-seek">
<input id="rvSeek" type="range" min="0" max="1000" value="0" />
<div class="rv-times"><span id="rvCur">0:00</span><span id="rvDur">0:00</span></div>
</div>
<div class="rv-transport">
<button id="rvPrev" class="rv-tbtn" type="button" aria-label="Previous">⏮</button>
<button id="rvToggle" class="rv-tbtn rv-play" type="button" aria-label="Play or pause">▶</button>
<button id="rvNext" class="rv-tbtn" type="button" aria-label="Next">⏭</button>
</div>
<div class="rv-volume">
<span>🔊</span><input id="rvVolume" type="range" min="0" max="100" value="100" /><span id="rvVolVal">100%</span>
</div>
<div class="rv-queue-head"><span>Up next</span><span id="rvQueueCount"></span></div>
<div id="rvQueue" class="rv-queue"></div>
<div class="rv-queue-hint">Tap a song to play it · drag ⠿ to reorder · ✕ removes</div>
<div class="rv-actions">
<button id="rvAdd" class="rv-action" type="button">＋ Add to queue</button>
<button id="rvSleep" class="rv-action" type="button">⏱ Sleep</button>
<button id="rvService" class="rv-action" type="button">🎤 Service mode</button>
</div>
</div>
</section>
<nav id="bottomNav" class="bottom-nav" aria-label="Main navigation">
<button class="bottom-nav-btn active" data-view="search" aria-label="Search">
<span class="bottom-nav-icon">🔍</span>