Transitions UI to react.js
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
Copilot
+118
@@ -0,0 +1,118 @@
|
||||
:root {
|
||||
--bg-1: #f8f2e6;
|
||||
--bg-2: #dce9f4;
|
||||
--card: #fff9f0;
|
||||
--ink: #1f2633;
|
||||
--muted: #586173;
|
||||
--primary: #0a5f94;
|
||||
--primary-press: #084d79;
|
||||
--disabled: #9fa9b8;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--ink);
|
||||
font-family: 'Trebuchet MS', 'Avenir Next', 'Segoe UI', sans-serif;
|
||||
background:
|
||||
radial-gradient(circle at 16% 18%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 44%),
|
||||
linear-gradient(140deg, var(--bg-1), var(--bg-2));
|
||||
}
|
||||
|
||||
.page-shell {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.player-card {
|
||||
width: min(30rem, 100%);
|
||||
border-radius: 1.25rem;
|
||||
background: var(--card);
|
||||
box-shadow:
|
||||
0 1.5rem 3rem rgba(18, 50, 73, 0.17),
|
||||
inset 0 0.1rem 0.25rem rgba(255, 255, 255, 0.6);
|
||||
padding: 1.4rem;
|
||||
text-align: center;
|
||||
animation: card-enter 420ms ease-out;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.14em;
|
||||
font-weight: 700;
|
||||
font-size: 0.72rem;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0.4rem 0 0.6rem;
|
||||
font-size: clamp(2rem, 8vw, 2.8rem);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin: 0 0 1.2rem;
|
||||
color: var(--muted);
|
||||
font-size: 1rem;
|
||||
min-height: 1.3rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: grid;
|
||||
gap: 0.75rem;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
|
||||
button {
|
||||
appearance: none;
|
||||
border: none;
|
||||
border-radius: 0.7rem;
|
||||
background: var(--primary);
|
||||
color: #ffffff;
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
padding: 0.78rem 1rem;
|
||||
cursor: pointer;
|
||||
transition: transform 120ms ease, background 120ms ease;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled) {
|
||||
background: var(--primary-press);
|
||||
}
|
||||
|
||||
button:active:not(:disabled) {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
cursor: not-allowed;
|
||||
background: var(--disabled);
|
||||
}
|
||||
|
||||
@keyframes card-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.controls {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
import type { Metadata } from 'next';
|
||||
import './globals.css';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'kryz-go',
|
||||
description: 'KRYZ Go! mobile radio app',
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta
|
||||
httpEquiv="Content-Security-Policy"
|
||||
content="default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; media-src 'self' https://kryz.out.airtime.pro"
|
||||
/>
|
||||
</head>
|
||||
<body>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
+215
@@ -0,0 +1,215 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useRef, useState } from 'react';
|
||||
|
||||
type PermissionState = 'granted' | 'denied' | 'prompt';
|
||||
|
||||
type BackgroundModePlugin = {
|
||||
checkMicrophonePermission: () => Promise<{ microphone: PermissionState | string }>;
|
||||
requestMicrophonePermission: () => Promise<{ microphone: PermissionState | string }>;
|
||||
checkNotificationsPermission: () => Promise<{ notifications: PermissionState | string }>;
|
||||
requestNotificationsPermission: () => Promise<{ notifications: PermissionState | string }>;
|
||||
checkBatteryOptimizations: () => Promise<{ enabled: boolean }>;
|
||||
requestDisableBatteryOptimizations: () => Promise<void>;
|
||||
disableWebViewOptimizations: () => Promise<void>;
|
||||
enable: (options: {
|
||||
title: string;
|
||||
text: string;
|
||||
channelName: string;
|
||||
channelDescription: string;
|
||||
resume: boolean;
|
||||
silent: boolean;
|
||||
disableWebViewOptimization: boolean;
|
||||
}) => Promise<void>;
|
||||
addListener: (eventName: string, listener: () => void) => Promise<void>;
|
||||
};
|
||||
|
||||
type CapacitorRuntime = {
|
||||
Plugins?: {
|
||||
BackgroundMode?: BackgroundModePlugin;
|
||||
};
|
||||
};
|
||||
|
||||
type CapacitorWindow = Window & {
|
||||
Capacitor?: CapacitorRuntime;
|
||||
};
|
||||
|
||||
const STREAM_URL = 'https://kryz.out.airtime.pro/kryz_b';
|
||||
|
||||
export default function HomePage() {
|
||||
const audioRef = useRef<HTMLAudioElement | null>(null);
|
||||
const [status, setStatus] = useState('Stream is stopped.');
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
|
||||
const backgroundMode = useMemo(() => {
|
||||
if (typeof window === 'undefined') {
|
||||
return undefined;
|
||||
}
|
||||
return (window as CapacitorWindow).Capacitor?.Plugins?.BackgroundMode;
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) {
|
||||
return;
|
||||
}
|
||||
|
||||
const handleEnded = () => {
|
||||
setIsPlaying(false);
|
||||
setStatus('Stream ended.');
|
||||
};
|
||||
|
||||
const handleError = () => {
|
||||
setIsPlaying(false);
|
||||
setStatus('Stream error.');
|
||||
};
|
||||
|
||||
audio.addEventListener('ended', handleEnded);
|
||||
audio.addEventListener('error', handleError);
|
||||
|
||||
return () => {
|
||||
audio.removeEventListener('ended', handleEnded);
|
||||
audio.removeEventListener('error', handleError);
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!backgroundMode) {
|
||||
console.warn('BackgroundMode plugin is not available in this runtime.');
|
||||
return;
|
||||
}
|
||||
|
||||
const initializeBackgroundMode = async () => {
|
||||
try {
|
||||
const notificationPermission = await backgroundMode.checkNotificationsPermission();
|
||||
if (notificationPermission.notifications !== 'granted') {
|
||||
await backgroundMode.requestNotificationsPermission();
|
||||
}
|
||||
|
||||
const microphonePermission = await backgroundMode.checkMicrophonePermission();
|
||||
if (microphonePermission.microphone !== 'granted') {
|
||||
const requestedMicrophonePermission = await backgroundMode.requestMicrophonePermission();
|
||||
if (requestedMicrophonePermission.microphone !== 'granted') {
|
||||
console.warn(
|
||||
'BackgroundMode microphone permission denied; background playback may stop when screen is off.'
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const batteryOptimizations = await backgroundMode.checkBatteryOptimizations();
|
||||
if (batteryOptimizations.enabled) {
|
||||
console.warn(
|
||||
'Battery optimizations are enabled; requesting exemption for reliable background playback.'
|
||||
);
|
||||
await backgroundMode.requestDisableBatteryOptimizations();
|
||||
}
|
||||
|
||||
await backgroundMode.disableWebViewOptimizations();
|
||||
|
||||
await backgroundMode.enable({
|
||||
title: 'KRYZ-Go!',
|
||||
text: 'Background mode is active',
|
||||
channelName: 'kryz-go background',
|
||||
channelDescription: 'Keeps kryz-go running while the app is in background',
|
||||
resume: true,
|
||||
silent: false,
|
||||
disableWebViewOptimization: true,
|
||||
});
|
||||
|
||||
await backgroundMode.addListener('appInBackground', () => {
|
||||
console.log('kryz-go moved to background');
|
||||
});
|
||||
|
||||
await backgroundMode.addListener('appInForeground', () => {
|
||||
console.log('kryz-go returned to foreground');
|
||||
});
|
||||
|
||||
console.log('BackgroundMode plugin enabled.');
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize BackgroundMode plugin:', error);
|
||||
}
|
||||
};
|
||||
|
||||
void initializeBackgroundMode();
|
||||
}, [backgroundMode]);
|
||||
|
||||
const ensureBackgroundPlaybackPermissions = async () => {
|
||||
if (!backgroundMode) {
|
||||
return true;
|
||||
}
|
||||
|
||||
const microphonePermission = await backgroundMode.checkMicrophonePermission();
|
||||
if (microphonePermission.microphone === 'granted') {
|
||||
return true;
|
||||
}
|
||||
|
||||
const requestedMicrophonePermission = await backgroundMode.requestMicrophonePermission();
|
||||
if (requestedMicrophonePermission.microphone === 'granted') {
|
||||
return true;
|
||||
}
|
||||
|
||||
setStatus('Enable microphone permission in Android settings for screen-off playback.');
|
||||
console.warn('Background playback blocked: microphone permission not granted.');
|
||||
return false;
|
||||
};
|
||||
|
||||
const startStream = async () => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const hasBackgroundPermissions = await ensureBackgroundPlaybackPermissions();
|
||||
if (!hasBackgroundPermissions) {
|
||||
return;
|
||||
}
|
||||
|
||||
audio.src = STREAM_URL;
|
||||
await audio.play();
|
||||
setIsPlaying(true);
|
||||
setStatus('Stream is playing.');
|
||||
} catch (error) {
|
||||
setIsPlaying(false);
|
||||
setStatus('Unable to start stream.');
|
||||
console.error('Failed to start stream:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const stopStream = () => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) {
|
||||
return;
|
||||
}
|
||||
|
||||
audio.pause();
|
||||
audio.removeAttribute('src');
|
||||
audio.load();
|
||||
|
||||
setIsPlaying(false);
|
||||
setStatus('Stream is stopped.');
|
||||
};
|
||||
|
||||
return (
|
||||
<main className="page-shell">
|
||||
<section className="player-card" aria-label="KRYZ live stream player">
|
||||
<p className="eyebrow">KRYZ Go!</p>
|
||||
<h1>Live Radio</h1>
|
||||
<p className="status" aria-live="polite">
|
||||
{status}
|
||||
</p>
|
||||
|
||||
<div className="controls">
|
||||
<button type="button" onClick={startStream} disabled={isPlaying}>
|
||||
Start Stream
|
||||
</button>
|
||||
<button type="button" onClick={stopStream} disabled={!isPlaying}>
|
||||
Stop Stream
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<audio ref={audioRef} preload="none" />
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user