Replaces words with emoji. Formatting enhancements for play/pause buttons. Switched to lower fidelity audio stream for better performance.

app/AudioPlayer.ts

@@ -32,7 +32,7 @@ export type CapacitorWindow = Window & {
 
 export type PlaybackState = 'stopped' | 'playing' | 'error';
 
-export const STREAM_URL = 'https://kryz.out.airtime.pro/kryz_b';
+export const STREAM_URL = 'https://kryz.out.airtime.pro/kryz_a';
 
 export class AudioPlayer {
   private url: string;

app/globals.css

@@ -87,6 +87,13 @@ button {
   transition: transform 120ms ease, background 120ms ease;
 }
 
+button.playpause {
+  width: 100%;
+  aspect-ratio: 1;
+  font-size: clamp(2rem, 25vw, 6em);
+  padding: 0;
+}
+
 button:hover:not(:disabled) {
   background: var(--primary-press);
 }

app/page.tsx

@@ -48,11 +48,11 @@ export default function HomePage() {
         </p>
 
         <div className="controls">
-          <button type="button" onClick={() => void player.play(backgroundMode)} disabled={isPlaying}>
+          <button type="button" className='playpause' onClick={() => void player.play(backgroundMode)} disabled={isPlaying}>
-            Play
+            ▶️
           </button>
-          <button type="button" onClick={() => player.stop()} disabled={!isPlaying}>
+          <button type="button" className='playpause' onClick={() => player.stop()} disabled={!isPlaying}>
-            Stop
+            ⏹️
           </button>
         </div>