retold-remote 0.0.5 → 0.0.7

package/web-application/docs/video-viewer.md

@@ -0,0 +1,134 @@
+# Video Viewer and Explorer
+
+The video viewer provides an action menu for choosing how to interact with a video, inline browser playback, VLC streaming, and a frame explorer for scrubbing through video content visually.
+
+## Opening a Video
+
+- **From the gallery**: select a video file and press `Enter`, or double-click it
+- **Force any file as video**: press `2` in the gallery or viewer to open it in the video viewer regardless of extension
+
+## Video Action Menu
+
+When a video is opened, an action menu appears instead of playing immediately. The menu shows the filename and a preview frame extracted from the video midpoint.
+
+### Menu Options
+
+| Key | Option | Description |
+|-----|--------|-------------|
+| `Space` / `Enter` | **Play in Browser** | Plays the video inline with HTML5 `<video>` controls |
+| `e` | **Explore Video Frames** | Opens the frame explorer (requires ffmpeg) |
+| `t` | **Extract Thumbnail** | Extracts a single frame from the midpoint |
+| `v` | **Stream with VLC** | Sends the file to VLC on the server machine |
+
+The preview frame in the menu is loaded automatically from the server. If ffmpeg is not available, the Explore and Thumbnail options are hidden.
+
+Navigation shortcuts still work while the menu is open:
+
+| Key | Action |
+|-----|--------|
+| Right / `j` | Skip to next file |
+| Left / `k` | Skip to previous file |
+| `Esc` | Back to gallery |
+
+## In-Browser Playback
+
+Pressing `Space` or `Enter` replaces the action menu with an HTML5 video player. The player has native browser controls for play/pause, seeking, volume, and fullscreen.
+
+Below the player, a **stats bar** shows:
+
+- **Duration** (formatted as mm:ss)
+- **Resolution** (width x height)
+- **Codec** (e.g., h264, hevc, vp9)
+- **Bitrate** (in kbps or Mbps)
+- **File Size** (formatted)
+
+The stats bar also includes buttons to jump to the Video Explorer or stream with VLC.
+
+### Autoplay
+
+Autoplay is off by default. Enable it in Settings > Gallery > Autoplay video. When enabled, videos begin playing as soon as the player loads.
+
+## Video Explorer
+
+The video explorer extracts multiple frames from a video and displays them in a grid, letting you scrub through content visually without playing the video.
+
+### Opening the Explorer
+
+- From the video action menu, press `e`
+- From the video stats bar during playback, click "Explore Video"
+
+### Frame Grid
+
+Frames are displayed in a responsive grid. Each frame card shows:
+
+- The extracted frame image
+- A timestamp label (e.g., "1:23")
+- A frame index number
+
+Double-click any frame to open it in a full-screen preview overlay.
+
+### Controls
+
+At the top of the explorer:
+
+| Control | Description |
+|---------|-------------|
+| Frame count dropdown | Choose 10, 20, 40, 60, or 100 frames (default: 20) |
+| Full-res checkbox | Extract frames at 1920x1080 instead of 640x360 |
+| Refresh button | Re-extract frames with current settings |
+
+### Info Bar
+
+Below the controls, an info bar displays video metadata:
+
+- Duration
+- Resolution
+- Codec
+- File size
+- Number of extracted frames
+
+### Timeline Bar
+
+Below the frame grid, a timeline bar shows the video duration with markers at each extracted frame's position. The timeline also shows markers for any custom frames you extract.
+
+**Click anywhere on the timeline** to extract a frame at that exact timestamp. The extracted frame appears in the grid in chronological order, styled with a dashed border to distinguish it from the evenly-spaced frames.
+
+### Frame Preview
+
+Double-click any frame in the grid to open a full-screen preview overlay showing the frame at full size.
+
+In the preview:
+
+| Key | Action |
+|-----|--------|
+| Left / `k` | Previous frame |
+| Right / `j` | Next frame |
+| `Esc` | Close preview |
+
+The Back button in the preview header also closes it. Navigation moves through all frames (regular and custom) in chronological order.
+
+### Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| `Esc` | Back to video viewer |
+
+## VLC Streaming
+
+Press `v` from the action menu, stats bar, or viewer to send the current video to VLC running on the server. This is useful for files in formats the browser cannot play natively.
+
+VLC protocol setup instructions are available in Settings > VLC Protocol Setup, with platform-specific guides for macOS, Windows, and Linux.
+
+## File Info Overlay
+
+Press `i` while viewing a video to see metadata:
+
+- Size, Duration, Resolution, Codec, Bitrate, Format, Modified date, Path
+
+## Supported Formats
+
+**Natively recognized extensions**: mp4, webm, mov, mkv, avi, wmv, flv, m4v, ogv, mpg, mpeg, mpe, mpv, m2v, ts, mts, m2ts, vob, 3gp, 3g2, f4v, rm, rmvb, divx, asf, mxf, dv, nsv, nuv, y4m, wtv, swf, dat
+
+**Browser playback support** varies by format. Most browsers play mp4 (h264), webm (vp8/vp9), and ogg natively. For other formats, use VLC streaming or the frame explorer.
+
+**Force any file as video** by pressing `2` in the gallery or viewer to bypass extension detection. This is useful for misnamed files (e.g., `.avii` instead of `.avi`).

package/web-application/docs.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta http-equiv="X-UA-Compatible" content="IE=edge">
+		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+		<meta name="description" content="Retold Remote Documentation">
+
+		<title>Retold Remote - Documentation</title>
+
+		<!-- Docuserve base stylesheet -->
+		<link href="css/docuserve.css" rel="stylesheet">
+		<!-- PICT Dynamic View CSS Container -->
+		<style id="PICT-CSS"></style>
+
+		<!-- Load the PICT library -->
+		<script src="js/pict.min.js" type="text/javascript"></script>
+		<!-- Bootstrap the Application -->
+		<script type="text/javascript">
+			Pict.safeOnDocumentReady(function()
+			{
+				// Intercept AppData.Docuserve creation to inject DocsBaseURL
+				// before pict-docuserve starts fetching markdown files.
+				var _origInit = PictDocuserve.prototype.onAfterInitializeAsync;
+				PictDocuserve.prototype.onAfterInitializeAsync = function(fCallback)
+				{
+					var _appData = this.pict.AppData;
+					// One-shot setter: when onAfterInitializeAsync assigns
+					// AppData.Docuserve, modify DocsBaseURL before loadCatalog runs.
+					Object.defineProperty(_appData, 'Docuserve',
+					{
+						configurable: true,
+						enumerable: true,
+						set: function(pValue)
+						{
+							pValue.DocsBaseURL = 'docs/';
+							Object.defineProperty(_appData, 'Docuserve',
+							{
+								configurable: true,
+								enumerable: true,
+								writable: true,
+								value: pValue
+							});
+						}
+					});
+					return _origInit.call(this, fCallback);
+				};
+				Pict.safeLoadPictApplication(PictDocuserve, 2);
+			});
+		</script>
+	</head>
+	<body>
+		<!-- The root container for the Pict application -->
+		<div id="Docuserve-Application-Container"></div>
+
+		<!-- Load the Docuserve PICT Application Bundle -->
+		<script src="js/pict-docuserve.min.js" type="text/javascript"></script>
+	</body>
+</html>

package/web-application/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
 	<title>Retold Remote</title>
 	<link rel="stylesheet" href="css/retold-remote.css">
 	<style id="PICT-CSS"></style>