miniradio_server 0.0.3 → 0.1.0

data/lib/public/player.js

@@ -0,0 +1,312 @@
+/* One audio element; streams and artwork are loaded only when selected. */
+(() => {
+    const tracks = JSON.parse(document.getElementById('tracks').textContent);
+    const player = document.getElementById('player');
+    const tableBody = document.querySelector('#playlistTable tbody');
+    const ids = ['currentTrack', 'currentArtist', 'currentAlbum', 'currentArtwork', 'artworkPlaceholder',
+        'playbackState', 'playerStatus', 'elapsedTime', 'durationTime', 'seekControl', 'volumeControl',
+        'volumeControls', 'volumeHint', 'muteButton', 'customControls', 'startButton', 'playPauseButton',
+        'prevButton', 'nextButton', 'loopButton', 'shuffleButton'];
+    const ui = Object.fromEntries(ids.map(id => [id, document.getElementById(id)]));
+    const labels = { idle: 'No track selected', loading: 'Loading', playing: 'Playing', paused: 'Paused',
+        buffering: 'Buffering', blocked: 'Press Play', error: 'Playback error', finished: 'Finished', unsupported: 'Unsupported browser' };
+    const rowStates = [];
+    let currentIndex = -1;
+    let isLooping = false;
+    let isShuffling = false;
+    let hls;
+    let selection = 0;
+    let session;
+    let state = 'idle';
+    let seekSelection;
+    let removeMediaListeners = () => {};
+
+    // Retain the hls.js / ManagedMediaSource policy used by this application.
+    player.disableRemotePlayback = true;
+
+    function formatTime(seconds) {
+        if (!Number.isFinite(seconds) || seconds < 0) return '--:--';
+        const total = Math.floor(seconds);
+        const minutes = Math.floor(total / 60);
+        const remainder = String(total % 60).padStart(2, '0');
+        return minutes >= 60 ? `${Math.floor(minutes / 60)}:${String(minutes % 60).padStart(2, '0')}:${remainder}` : `${minutes}:${remainder}`;
+    }
+
+    function activeMedia() {
+        return session?.ready && session.id === selection && session.source === (player.currentSrc || player.src);
+    }
+
+    function renderProgress() {
+        const ready = activeMedia() && !['error', 'unsupported', 'loading'].includes(state);
+        const duration = ready ? player.duration : NaN;
+        const valid = Number.isFinite(duration) && duration > 0;
+        ui.durationTime.textContent = formatTime(valid ? duration : NaN);
+        ui.seekControl.disabled = !valid || player.seekable.length === 0;
+        ui.seekControl.max = valid ? duration : 0;
+        if (seekSelection !== selection) {
+            const elapsed = ready && Number.isFinite(player.currentTime) ? player.currentTime : 0;
+            ui.elapsedTime.textContent = formatTime(elapsed);
+            ui.seekControl.value = valid ? Math.min(duration, Math.max(0, elapsed)) : 0;
+        }
+    }
+
+    function renderPlaybackState() {
+        const selected = currentIndex >= 0;
+        ui.playbackState.textContent = labels[state];
+        ui.playPauseButton.textContent = state === 'error' ? 'Retry' : ['playing', 'buffering'].includes(state) ? 'Pause' : 'Play';
+        ui.playPauseButton.disabled = !selected || ['loading', 'unsupported'].includes(state);
+        ui.prevButton.disabled = !selected;
+        ui.nextButton.disabled = !selected || (!(isShuffling && tracks.length > 1) && currentIndex === tracks.length - 1);
+        ui.startButton.disabled = ui.loopButton.disabled = ui.shuffleButton.disabled = tracks.length === 0;
+        [...tableBody.children].forEach((row, i) => {
+            const active = i === currentIndex;
+            row.classList.toggle('active', active);
+            if (active) row.setAttribute('aria-current', 'true');
+            else row.removeAttribute('aria-current');
+            rowStates[i].textContent = active ? labels[state] : '';
+        });
+        renderProgress();
+    }
+
+    function setState(next, message = '') {
+        state = next;
+        ui.playerStatus.textContent = message;
+        renderPlaybackState();
+    }
+
+    function streamError() {
+        if (session) {
+            session.ready = false;
+            session.wantsPlay = false;
+            session.attempt += 1;
+        }
+        player.pause();
+        setState('error', 'Unable to load this stream. Press Retry or select another track.');
+    }
+
+    function requestPlay() {
+        if (!activeMedia()) return;
+        const current = session;
+        const attempt = ++current.attempt;
+        current.wantsPlay = true;
+        player.play().catch(error => {
+            if (current !== session || attempt !== current.attempt || !current.wantsPlay) return;
+            current.wantsPlay = false;
+            if (error.name === 'NotSupportedError') streamError();
+            else setState('blocked', 'Playback could not start. Press Play to try again.');
+        });
+    }
+
+    function renderCurrentTrack(track, selectionId) {
+        ui.currentTrack.textContent = track.title || track.file;
+        ui.currentArtist.textContent = track.artist || 'Artist information unavailable';
+        ui.currentAlbum.textContent = track.album || 'Album information unavailable';
+        ui.currentArtwork.hidden = true;
+        ui.currentArtwork.removeAttribute('src');
+        ui.artworkPlaceholder.hidden = false;
+        if (!track.artwork_url) return;
+        // Separate requests keep stale load/error events away from the visible image.
+        const image = new Image();
+        image.addEventListener('load', () => {
+            if (selectionId !== selection) return;
+            ui.currentArtwork.src = image.src;
+            ui.currentArtwork.hidden = false;
+            ui.artworkPlaceholder.hidden = true;
+        });
+        image.addEventListener('error', () => {
+            if (selectionId !== selection) return;
+            ui.currentArtwork.hidden = true;
+            ui.artworkPlaceholder.hidden = false;
+        });
+        image.src = track.artwork_url;
+    }
+
+    function bindMedia(current) {
+        const listeners = {
+            playing: () => {
+                if (player.paused || player.ended || !current.wantsPlay) return;
+                setState('playing');
+            },
+            pause: () => {
+                if (!player.paused || player.ended || ['error', 'blocked', 'finished'].includes(state)) return;
+                current.wantsPlay = false;
+                current.attempt += 1;
+                setState('paused');
+            },
+            waiting: () => {
+                if (!player.paused && current.wantsPlay) setState('buffering', 'Buffering audio…');
+            },
+            ended: () => {
+                if (!player.ended || state === 'finished') return;
+                current.wantsPlay = false;
+                if (isLooping) playTrack(currentIndex);
+                else if ((isShuffling && tracks.length > 1) || currentIndex < tracks.length - 1) nextTrack();
+                else setState('finished', 'Playlist finished. Press Play all to restart.');
+            },
+            error: () => { if (player.error) streamError(); },
+            loadedmetadata: renderProgress,
+            durationchange: renderProgress,
+            progress: renderProgress,
+            timeupdate: renderProgress
+        };
+        const bound = Object.entries(listeners).map(([event, listener]) => {
+            const guarded = () => {
+                if (current === session && activeMedia()) listener();
+            };
+            player.addEventListener(event, guarded);
+            return [event, guarded];
+        });
+        removeMediaListeners = () => bound.forEach(([event, listener]) => player.removeEventListener(event, listener));
+    }
+
+    function playTrack(index) {
+        const track = tracks[index];
+        if (!track) return;
+        selection += 1;
+        removeMediaListeners();
+        session = undefined;
+        player.pause();
+        if (hls) hls.destroy();
+        hls = undefined;
+        player.removeAttribute('src');
+        player.load();
+        currentIndex = index;
+        seekSelection = undefined;
+        renderCurrentTrack(track, selection);
+        const current = { id: selection, ready: false, source: undefined, wantsPlay: true, attempt: 0 };
+        session = current;
+        setState('loading', 'Loading track…');
+        bindMedia(current);
+        if (typeof Hls === 'undefined' || !Hls.isSupported()) {
+            setState('unsupported', 'This browser cannot play HLS streams. Update your browser or reload the page to retry.');
+            return;
+        }
+        hls = new Hls();
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+            if (current !== session || state === 'error') return;
+            current.ready = true;
+            current.source = player.currentSrc || player.src;
+            renderProgress();
+            requestPlay();
+        });
+        hls.on(Hls.Events.ERROR, (_event, data) => {
+            if (current === session && data.fatal) streamError();
+        });
+        hls.loadSource(track.url);
+        hls.attachMedia(player);
+    }
+
+    function nextTrack() {
+        if (currentIndex < 0) return;
+        if (isShuffling && tracks.length > 1) {
+            const offset = 1 + Math.floor(Math.random() * (tracks.length - 1));
+            playTrack((currentIndex + offset) % tracks.length);
+        } else if (currentIndex + 1 < tracks.length) playTrack(currentIndex + 1);
+    }
+
+    ui.startButton.addEventListener('click', () => playTrack(0));
+    ui.playPauseButton.addEventListener('click', () => {
+        if (ui.playPauseButton.disabled) return;
+        if (['error', 'finished'].includes(state)) playTrack(currentIndex);
+        else if (player.paused) requestPlay();
+        else {
+            session.wantsPlay = false;
+            session.attempt += 1;
+            player.pause();
+        }
+    });
+    ui.nextButton.addEventListener('click', nextTrack);
+    ui.prevButton.addEventListener('click', () => {
+        if (currentIndex >= 0) playTrack((currentIndex + tracks.length - 1) % tracks.length);
+    });
+    ui.loopButton.addEventListener('click', () => {
+        isLooping = !isLooping;
+        ui.loopButton.textContent = `Repeat track: ${isLooping ? 'ON' : 'OFF'}`;
+        ui.loopButton.setAttribute('aria-pressed', String(isLooping));
+    });
+    ui.shuffleButton.addEventListener('click', () => {
+        isShuffling = !isShuffling;
+        ui.shuffleButton.textContent = `Shuffle: ${isShuffling ? 'ON' : 'OFF'}`;
+        ui.shuffleButton.setAttribute('aria-pressed', String(isShuffling));
+        renderPlaybackState();
+    });
+
+    ui.seekControl.addEventListener('input', () => {
+        if (ui.seekControl.disabled) return;
+        seekSelection = selection;
+        ui.elapsedTime.textContent = formatTime(Number(ui.seekControl.value));
+    });
+    ui.seekControl.addEventListener('change', () => {
+        if (seekSelection !== selection || ui.seekControl.disabled) {
+            seekSelection = undefined;
+            renderProgress();
+            return;
+        }
+        const desired = Number(ui.seekControl.value);
+        const ranges = player.seekable;
+        let nearest;
+        for (let i = 0; i < ranges.length; i += 1) {
+            const candidate = Math.max(ranges.start(i), Math.min(ranges.end(i), desired));
+            if (nearest === undefined || Math.abs(candidate - desired) < Math.abs(nearest - desired)) nearest = candidate;
+        }
+        seekSelection = undefined;
+        if (Number.isFinite(nearest)) player.currentTime = nearest;
+        renderProgress();
+    });
+    ui.seekControl.addEventListener('blur', () => {
+        seekSelection = undefined;
+        renderProgress();
+    });
+
+    function renderVolume() {
+        ui.volumeControl.value = player.volume;
+        ui.muteButton.textContent = player.muted ? 'Unmute' : 'Mute';
+        ui.muteButton.setAttribute('aria-pressed', String(player.muted));
+    }
+    // Some devices expose volume but do not allow scripts to change it.
+    const originalVolume = player.volume;
+    let canChangeVolume = false;
+    try {
+        const probe = originalVolume > 0.5 ? 0.25 : 0.75;
+        player.volume = probe;
+        canChangeVolume = player.volume === probe;
+    } catch (_) {
+        canChangeVolume = false;
+    } finally {
+        try { player.volume = originalVolume; } catch (_) { /* Device volume is read-only. */ }
+    }
+    ui.volumeControls.hidden = !canChangeVolume;
+    ui.volumeHint.hidden = canChangeVolume;
+    ui.volumeControl.addEventListener('input', () => { player.volume = Number(ui.volumeControl.value); });
+    ui.muteButton.addEventListener('click', () => { player.muted = !player.muted; });
+    player.addEventListener('volumechange', renderVolume);
+    renderVolume();
+
+    tracks.forEach((track, index) => {
+        const row = document.createElement('tr');
+        const playCell = document.createElement('td');
+        const button = document.createElement('button');
+        button.textContent = '▶';
+        button.setAttribute('aria-label', `Play ${track.title || track.file}`);
+        button.addEventListener('click', () => playTrack(index));
+        playCell.dataset.label = 'Play';
+        playCell.appendChild(button);
+        row.appendChild(playCell);
+        [[track.title || track.file, 'Title'], [track.artist || '', 'Artist'], [track.album || '', 'Album']].forEach(([text, label]) => {
+            const cell = document.createElement('td');
+            cell.textContent = text;
+            cell.dataset.label = label;
+            row.appendChild(cell);
+        });
+        const rowState = document.createElement('td');
+        rowState.dataset.label = 'Status';
+        rowState.classList.add('track-status');
+        rowStates.push(rowState);
+        row.appendChild(rowState);
+        tableBody.appendChild(row);
+    });
+    setState('idle', tracks.length ? '' : 'No MP3 files found.');
+    ui.customControls.hidden = false;
+    player.controls = false;
+    player.hidden = true;
+})();

data/lib/public/style/main.css

@@ -1,26 +1,60 @@
 @charset "utf-8";
 
-table.compact td, table.compact th {
-	padding: 0.4rem 0.5rem;
-	font-size: 0.9rem;
-        line-height: 1.2;
+[hidden] { display: none !important; }
+#player { width: 100%; }
+.now-playing {
+    background: var(--pico-card-background-color);
+    border: 1px solid var(--pico-muted-border-color);
+    border-radius: var(--pico-border-radius);
+    padding: 1.25rem;
 }
+.track-details { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 1.5rem; align-items: center; }
+.artwork { width: 144px; aspect-ratio: 1; background: var(--pico-background-color); border-radius: var(--pico-border-radius); overflow: hidden; }
+.artwork img { width: 100%; height: 100%; object-fit: contain; }
+#artworkPlaceholder { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--pico-muted-color); }
+#artworkPlaceholder span { font-size: 2.5rem; }
+#artworkPlaceholder small { font-size: 0.65rem; }
+.track-metadata { min-width: 0; overflow-wrap: anywhere; }
+.track-metadata h2 { margin: 0.4rem 0; }
+.track-metadata p { margin: 0; }
+#playbackState { color: var(--pico-primary); font-size: 0.8rem; }
+#currentArtist, #currentAlbum { color: var(--pico-muted-color); }
+#currentAlbum { font-size: 0.85rem; }
+.time-labels { display: flex; justify-content: space-between; margin-top: 1rem; color: var(--pico-muted-color); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
+#seekControl { width: 100%; margin: 0; min-height: 44px; }
+.transport, .playback-options, .volume { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
+.transport button, .playback-options button, .volume button { width: auto; min-height: 44px; margin: 0; padding: 0.5rem 0.75rem; }
+.transport button:not(#playPauseButton), .playback-options button { --pico-background-color: transparent; --pico-color: var(--pico-primary); }
+#playPauseButton { min-width: 7rem; }
+.volume { margin-left: auto; font-size: 0.8rem; }
+.volume label { margin: 0; }
+#volumeControl { width: 90px; margin: 0; min-height: 44px; }
+.playback-options { border-top: 1px solid var(--pico-muted-border-color); padding-top: 1rem; margin-top: 1rem; font-size: 0.8rem; }
+.playback-options button[aria-pressed="true"] { background: var(--pico-primary); color: var(--pico-primary-inverse); }
+#playerStatus { margin: 1rem 0 0; font-size: 0.85rem; overflow-wrap: anywhere; }
+#playerStatus:empty { margin: 0; }
+.playlist-heading { margin-top: 1.5rem; }
+tr.active { outline: 2px solid var(--pico-primary); outline-offset: -2px; }
+.track-status { color: var(--pico-primary); }
+table.compact td, table.compact th { padding: 0.4rem 0.5rem; font-size: 0.9rem; line-height: 1.2; overflow-wrap: anywhere; }
+table.compact { table-layout: fixed; }
+table.compact th:first-child { width: 4rem; }
+table.compact button { margin: 0; min-width: 44px; min-height: 44px; padding: 0.4rem; }
 @media screen and (max-width: 600px) {
-	table thead {
-		display: none;
-	}
-	table tr {
-		display: block;
-       		margin-bottom: 0.8rem;
-	}
-	table td {
-		display: flex;
-		justify-content: space-between;
-		padding: 0.3rem 0;
-		border-bottom: 1px solid #ccc;
-	}
-        table td::before {
-		content: attr(data-label);
-                font-weight: bold;
-	}
+    .now-playing { padding: 0.8rem; }
+    .track-details { grid-template-columns: 80px minmax(0, 1fr); gap: 0.8rem; }
+    .artwork { width: 80px; }
+    #artworkPlaceholder small { display: none; }
+    .track-metadata h2 { font-size: 1.2rem; }
+    .transport { gap: 0.4rem; }
+    .transport > button { flex: 1; padding: 0.4rem; font-size: 0.8rem; }
+    #playPauseButton { min-width: 0; }
+    .volume { margin-left: 0; width: 100%; }
+    #volumeControl { flex: 1; min-width: 0; }
+    table thead { display: none; }
+    table tr { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 0.75rem; margin-bottom: 0.8rem; padding: 0.6rem; }
+    table td { display: block; grid-column: 2; padding: 0.15rem 0; border: none; }
+    table td:first-child { grid-column: 1; grid-row: 1 / span 5; align-self: center; }
+    table td[data-label="Artist"], table td[data-label="Album"] { color: var(--pico-muted-color); font-size: 0.8rem; }
+    table td:empty { display: none; }
 }

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: miniradio_server
 version: !ruby/object:Gem::Version
-  version: 0.0.3
+  version: 0.1.0
 platform: ruby
 authors:
 - Koichiro Ohba
@@ -52,19 +52,81 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '5.16'
 - !ruby/object:Gem::Dependency
-  name: rackup
+  name: standard
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.0'
+- !ruby/object:Gem::Dependency
+  name: simplecov
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.3'
+- !ruby/object:Gem::Dependency
+  name: bundler-audit
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.9'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.9'
+- !ruby/object:Gem::Dependency
+  name: rack
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '3.1'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '4'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '3.1'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '4'
+- !ruby/object:Gem::Dependency
+  name: rackup
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.2'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.2'
 - !ruby/object:Gem::Dependency
   name: webrick
   requirement: !ruby/object:Gem::Requirement
@@ -154,27 +216,30 @@ description: |2
       This server is designed for simplicity and primarily targets Video on Demand (VOD) scenarios where you want to stream existing MP3 files via HLS without pre-converting them.
 email:
 - koichiro.ohba@gmail.com
-executables: []
+executables:
+- miniradio_server
 extensions: []
 extra_rdoc_files: []
 files:
+- CHANGELOG.md
 - LICENSE.txt
 - README.md
-- Rakefile
-- hls_cache/.gitkeep
+- exe/miniradio_server
 - lib/miniradio_server.rb
 - lib/miniradio_server/app.rb
+- lib/miniradio_server/cli.rb
 - lib/miniradio_server/templ/index.html.slim
 - lib/miniradio_server/version.rb
+- lib/public/player.js
 - lib/public/style/main.css
-- mp3_files/.gitkeep
-- sig/miniradio_server.rbs
 homepage: https://github.com/koichiro/miniradio_server
 licenses:
 - MIT
 metadata:
+  allowed_push_host: https://rubygems.org
   homepage_uri: https://github.com/koichiro/miniradio_server
   source_code_uri: https://github.com/koichiro/miniradio_server.git
+  changelog_uri: https://github.com/koichiro/miniradio_server/blob/main/CHANGELOG.md
 rdoc_options: []
 require_paths:
 - lib
@@ -182,14 +247,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 3.1.0
+      version: 3.4.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.6.7
+rubygems_version: 4.0.20
 specification_version: 4
 summary: Miniradio Server is Simple Ruby HLS Server for MP3s.
 test_files: []

data/Rakefile

@@ -1,8 +0,0 @@
-# frozen_string_literal: true
-
-require "bundler/gem_tasks"
-require "minitest/test_task"
-
-Minitest::TestTask.create
-
-task default: :test

data/sig/miniradio_server.rbs

@@ -1,4 +0,0 @@
-module MiniradioServer
-  VERSION: String
-  # See the writing guide of rbs: https://github.com/ruby/rbs#guides
-end