优化局域网遥控
This commit is contained in:
mtvpls
+2
-18
@@ -37,7 +37,6 @@ const LOCAL_REMOTE_URL_KEY = 'moontv_local_remote_url';
|
||||
|
||||
type MoonTVLocalRemoteBridge = {
|
||||
getRemoteUrl?: () => string;
|
||||
showHint?: () => void;
|
||||
};
|
||||
|
||||
declare global {
|
||||
@@ -89,7 +88,6 @@ export default function TVMePage() {
|
||||
const [loggingOut, setLoggingOut] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
const [localRemoteUrl, setLocalRemoteUrl] = useState('');
|
||||
const [nativeHintAvailable, setNativeHintAvailable] = useState(false);
|
||||
const [copyStatus, setCopyStatus] = useState('');
|
||||
const [upDownAction, setUpDownAction] = useState<TVPlayerUpDownAction>(
|
||||
DEFAULT_TV_PLAYER_UP_DOWN_ACTION
|
||||
@@ -107,7 +105,6 @@ export default function TVMePage() {
|
||||
useEffect(() => {
|
||||
const readLocalRemoteUrl = () => {
|
||||
const bridgeUrl = window.MoonTVLocalRemote?.getRemoteUrl?.() || '';
|
||||
setNativeHintAvailable(Boolean(window.MoonTVLocalRemote?.showHint));
|
||||
setLocalRemoteUrl(
|
||||
bridgeUrl ||
|
||||
window.__MOONTV_LOCAL_REMOTE_URL ||
|
||||
@@ -184,9 +181,6 @@ export default function TVMePage() {
|
||||
};
|
||||
|
||||
|
||||
const showLocalRemoteHint = () => {
|
||||
window.MoonTVLocalRemote?.showHint?.();
|
||||
};
|
||||
|
||||
const copyLocalRemoteUrl = async () => {
|
||||
if (!localRemoteUrl) return;
|
||||
@@ -310,7 +304,7 @@ export default function TVMePage() {
|
||||
手机扫码遥控
|
||||
</h2>
|
||||
<p className='mt-4 text-xl leading-relaxed text-slate-300'>
|
||||
在同一 Wi‑Fi 下用手机打开遥控地址，不经过服务器，方向键和播放控制更低延迟。
|
||||
在同一 Wi‑Fi 下用手机扫描二维码或打开遥控地址。
|
||||
</p>
|
||||
|
||||
{localRemoteUrl ? (
|
||||
@@ -320,16 +314,6 @@ export default function TVMePage() {
|
||||
{localRemoteUrl}
|
||||
</div>
|
||||
<div className='mt-5 flex flex-wrap gap-3'>
|
||||
{nativeHintAvailable && (
|
||||
<button
|
||||
type='button'
|
||||
onClick={showLocalRemoteHint}
|
||||
className='tv-focusable inline-flex cursor-pointer items-center justify-center gap-2 rounded-2xl bg-indigo-600 px-5 py-4 text-lg font-black text-white outline-none transition hover:bg-indigo-500 focus:ring-4 focus:ring-indigo-300'
|
||||
>
|
||||
<QrCode className='h-6 w-6' />
|
||||
在电视上显示
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type='button'
|
||||
onClick={copyLocalRemoteUrl}
|
||||
@@ -347,7 +331,7 @@ export default function TVMePage() {
|
||||
</div>
|
||||
) : (
|
||||
<div className='mt-6 rounded-3xl border border-amber-300/20 bg-amber-400/10 p-5 text-lg leading-relaxed text-amber-100'>
|
||||
当前页面未检测到 APK 内置局域网遥控服务。请使用新版 APK 打开电视端，或查看电视左上角的临时遥控地址。
|
||||
当前页面未检测到 APK 内置局域网遥控服务。请使用新版 APK 打开电视端。
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -1372,8 +1372,21 @@ export const UserMenu: React.FC = () => {
|
||||
const handleQrLoginResult = useCallback((rawValue: string) => {
|
||||
try {
|
||||
const url = new URL(rawValue, window.location.origin);
|
||||
|
||||
const isLocalRemoteUrl =
|
||||
(url.protocol === 'http:' || url.protocol === 'https:') &&
|
||||
url.searchParams.has('token') &&
|
||||
(url.pathname === '/remote' || url.pathname.endsWith('/remote'));
|
||||
|
||||
if (isLocalRemoteUrl) {
|
||||
setTvQrScannerStatus('识别成功，正在打开局域网遥控器...');
|
||||
stopTvQrScanner();
|
||||
window.location.href = url.href;
|
||||
return true;
|
||||
}
|
||||
|
||||
if (url.origin !== window.location.origin || url.pathname !== '/qr-login') {
|
||||
setTvQrScannerError('未识别到本站电视登录二维码，请扫描电视屏幕上的二维码。');
|
||||
setTvQrScannerError('未识别到电视登录二维码或局域网遥控二维码，请扫描电视屏幕上的二维码。');
|
||||
return false;
|
||||
}
|
||||
|
||||
@@ -1388,7 +1401,7 @@ export const UserMenu: React.FC = () => {
|
||||
window.location.href = `/qr-login?token=${encodeURIComponent(token)}`;
|
||||
return true;
|
||||
} catch {
|
||||
setTvQrScannerError('二维码内容无效，请扫描电视端显示的登录二维码。');
|
||||
setTvQrScannerError('二维码内容无效，请扫描电视端显示的登录二维码或局域网遥控二维码。');
|
||||
return false;
|
||||
}
|
||||
}, [stopTvQrScanner]);
|
||||
@@ -1424,7 +1437,7 @@ export const UserMenu: React.FC = () => {
|
||||
await tvQrVideoRef.current.play();
|
||||
|
||||
const detector = new BarcodeDetectorCtor({ formats: ['qr_code'] });
|
||||
setTvQrScannerStatus('请将电视屏幕上的登录二维码放入取景框');
|
||||
setTvQrScannerStatus('请将电视屏幕上的登录二维码或局域网遥控二维码放入取景框');
|
||||
|
||||
const scan = async () => {
|
||||
if (tvQrScanStopRef.current || !tvQrVideoRef.current) return;
|
||||
@@ -4408,8 +4421,8 @@ export const UserMenu: React.FC = () => {
|
||||
<Smartphone className='h-4 w-4' />
|
||||
手机相机扫码
|
||||
</div>
|
||||
<h3 className='mt-3 text-2xl font-black'>扫描电视登录二维码</h3>
|
||||
<p className='mt-1 text-sm text-white/75'>识别成功后会进入手机确认登录页</p>
|
||||
<h3 className='mt-3 text-2xl font-black'>扫描电视二维码</h3>
|
||||
<p className='mt-1 text-sm text-white/75'>支持扫码登录，也支持打开局域网遥控器</p>
|
||||
</div>
|
||||
<button
|
||||
type='button'
|
||||
@@ -4670,7 +4683,7 @@ export const UserMenu: React.FC = () => {
|
||||
</div>
|
||||
<p className='mt-5 text-sm leading-6 text-slate-600 dark:text-slate-400'>
|
||||
{tvModeEnabled
|
||||
? '电视端打开 /tv 后会显示二维码；手机在这里打开相机扫描并确认登录。'
|
||||
? '电视端打开 /tv 后可扫码登录；在电视端“我的”页也可扫描局域网遥控二维码。'
|
||||
: '当前部署未开启 TV 模式，/tv 页面和 Web 电视遥控不可用。'}
|
||||
</p>
|
||||
{!tvModeEnabled && (
|
||||
@@ -4685,7 +4698,7 @@ export const UserMenu: React.FC = () => {
|
||||
disabled={!tvModeEnabled}
|
||||
className='inline-flex w-full cursor-pointer items-center justify-center gap-2 rounded-xl bg-rose-600 px-4 py-3 text-sm font-black text-white transition hover:bg-rose-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-rose-500/70 disabled:cursor-not-allowed disabled:bg-slate-300 disabled:text-slate-500 dark:disabled:bg-white/10 dark:disabled:text-slate-500'
|
||||
>
|
||||
打开相机扫码登录
|
||||
打开相机扫码
|
||||
<Smartphone className='h-4 w-4' />
|
||||
</button>
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user