@octane-xplat/video 0.0.0 → 0.7.1

package/src/props.ts

@@ -0,0 +1,125 @@
+export interface LayoutChildProps {
+	row?: number
+	col?: number
+	rowSpan?: number
+	colSpan?: number
+	dock?: 'left' | 'top' | 'right' | 'bottom'
+	left?: number
+	top?: number
+	flexGrow?: number
+	flexShrink?: number
+	alignSelf?: string
+	order?: number
+}
+
+/** Flex-container props shared by View/Row/Pressable — RN vocabulary, applied
+ *  to the host flexboxlayout natively and the element's style on web.
+ *  `gap` is a dip number (px on web); NS supports it on FlexboxLayout only
+ *  (GridLayout has no gap). */
+export interface FlexContainerProps {
+	justifyContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly'
+	alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline'
+	flexWrap?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse'
+	gap?: number | string
+	rowGap?: number | string
+	columnGap?: number | string
+}
+
+export type Role =
+	| 'button'
+	| 'link'
+	| 'search'
+	| 'image'
+	| 'heading'
+	| 'adjustable'
+	| 'summary'
+	| 'text'
+	| 'none'
+	| 'progressbar'
+	| 'checkbox'
+	| 'switch'
+	| 'radio'
+	| 'spinbutton'
+	| 'tab'
+
+export interface AccessibilityProps {
+	accessible?: boolean
+	accessibilityLabel?: string
+	accessibilityRole?: Role
+	accessibilityHint?: string
+	accessibilityValue?: string
+	accessibilityState?: {
+		disabled?: boolean
+		selected?: boolean
+		checked?: boolean
+	}
+	accessibilityLiveRegion?: 'none' | 'polite' | 'assertive'
+}
+
+export type VideoFit = 'contain' | 'cover' | 'fill'
+
+export interface VideoEvent {
+	/** Playback position in milliseconds. */
+	position?: number
+	/** Clip duration in milliseconds, once known (0 before then). */
+	duration?: number
+	/** Failure description. */
+	message?: string
+}
+
+export interface VideoHandle {
+	play(): void
+	pause(): void
+	/** Seek to a position in milliseconds. */
+	seekTo(ms: number): void
+	/** Current playback position in ms (0 before metadata loads). */
+	currentTime(): number
+	/** Clip duration in ms (0 before metadata loads). */
+	duration(): number
+	/** The platform surface (`HTMLVideoElement` / plugin `Video`). */
+	native: any
+}
+
+/** Embedded video — surface-hosted bucket: the OS engine owns the pixels
+ *  (web `<video>` / `@nstudio/nativescript-exoplayer` → AVPlayerViewController
+ *  + ExoPlayer2), all chrome is self-drawn so `controls` looks identical on
+ *  every target. Times are milliseconds on every platform. */
+export interface VideoProps extends LayoutChildProps, AccessibilityProps {
+	className?: any
+	style?: any
+	id?: string
+	/** Remote URL; native also accepts `~/` bundle paths and absolute files. */
+	src: string
+	/** Frame shown until playback starts. */
+	poster?: string
+	/** Controlled playback — pair with `onPlayingChange`. Leave unset for
+	 *  uncontrolled playback (the transport and `bind` handle still work). */
+	playing?: boolean
+	/** Uncontrolled start-playing shorthand. Browsers block unmuted
+	 *  autoplay — pair with `muted` when `autoPlay` matters on web. */
+	autoPlay?: boolean
+	muted?: boolean
+	loop?: boolean
+	/** Self-drawn transport overlay (play/pause, scrubber, time, mute) —
+	 *  tap the surface to show/hide. Default true. */
+	controls?: boolean
+	/** Content fitting inside the frame: `contain` (letterbox, default),
+	 *  `cover` (crop to fill), `fill` (stretch). */
+	fit?: VideoFit
+	/** Playback metadata is loaded; `e.duration` is the clip length in ms. */
+	onReady?: (e: VideoEvent) => void
+	onEnded?: () => void
+	/** Fires on user toggles and controlled `playing` writes. */
+	onPlayingChange?: (playing: boolean) => void
+	/** Fires when the transport's mute button toggles. */
+	onMutedChange?: (muted: boolean) => void
+	/** Web only — the plugin players surface no error event on native. */
+	onError?: (e: VideoEvent) => void
+	/** Imperative handle — play/pause/seek/time plus `native` for anything
+	 *  the shared props don't cover. */
+	bind?: (h: VideoHandle) => void
+	/** Platform escape hatches, applied after the shared props. */
+	ios?: Record<string, any>
+	android?: Record<string, any>
+	web?: Record<string, any>
+}

package/src/video-chrome.tsrx

@@ -0,0 +1,117 @@
+/** @jsxImportSource @nativescript-community/octane */
+import { useEffect, useState } from 'octane';
+import { Icon, Image, Pressable, Row, Slider, Text, View } from '@octane-xplat/ui';
+
+/** Self-drawn video transport — the chrome half of the surface-hosted
+ *  `Video` component. Identical structure to the native twin (only the
+ *  pragma differs): every layer composes xplat primitives,
+ *  so the transport draws the same pixels on every target — the leaf only
+ *  supplies the surface. The layers stack inside the leaf's `vx-stack`
+ *  grid (later = on top), so this fragment's children are each a
+ *  full-frame layer. Times are milliseconds (matches both plugin players;
+ *  the web leaf converts from `HTMLMediaElement`'s seconds). */
+export interface VideoChromeProps {
+	/** Frame image shown until playback first starts. */
+	poster?: string
+	started: boolean
+	playing: boolean
+	/** Playback position in ms. */
+	position: number
+	/** Clip duration in ms (0 until known). */
+	duration: number
+	muted: boolean
+	onTogglePlay: () => void
+	onToggleMute: () => void
+	onSeek: (ms: number) => void
+}
+
+function stamp(ms: number): string {
+	const total = Math.max(0, Math.floor(ms / 1000));
+	return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, '0')}`;
+}
+
+export function VideoChrome(props: VideoChromeProps) @{
+	const [visible, setVisible] = useState(true);
+
+	// Chrome auto-hides while playing; pausing or tapping brings it back.
+	useEffect(() => {
+		if (!props.playing || !visible) return;
+		const t = setTimeout(() => setVisible(false), 2500);
+		return () => clearTimeout(t);
+	}, [props.playing, visible]);
+
+	<>
+		@if (props.poster && !props.started) {
+			// aspectFill matches the web leaf's object-fit: cover.
+			<Image
+				className="vx-video-poster"
+				src={props.poster}
+				ios={{ stretch: 'aspectFill' }}
+				android={{ stretch: 'aspectFill' }}
+			/>
+		}
+		<Pressable
+			className="vx-video-tap"
+			accessibilityRole="button"
+			accessibilityLabel={visible ? 'Hide video controls' : 'Show video controls'}
+			onPress={() => setVisible(props.playing ? !visible : true)}
+		/>
+		@if (visible) {
+			<>
+				@if (!props.playing) {
+					// While paused, tap anywhere on the frame is tap-to-play; the
+					// show/hide tap layer beneath is reachable once it starts.
+					<Pressable
+						className="vx-video-center"
+						justifyContent="center"
+						alignItems="center"
+						accessibilityRole="button"
+						accessibilityLabel="Play"
+						onPress={props.onTogglePlay}
+					>
+						<View className="vx-video-centerbtn">
+							<Icon name="xplat-play" size={28} color="#fff" />
+						</View>
+					</Pressable>
+				}
+				// Positioning wrappers cover the frame — the web-only CSS pass gives
+				// them pointer-events:none so taps reach the surface/tap layer; NS
+				// layout views never capture touches without handlers.
+				<View className="vx-video-barwrap" justifyContent="end">
+					<Row className="vx-video-bar" alignItems="center" gap={8}>
+						<Pressable
+							className="vx-video-btn"
+							accessibilityRole="button"
+							accessibilityLabel={props.playing ? 'Pause' : 'Play'}
+							onPress={props.onTogglePlay}
+						>
+							<Icon name={props.playing ? 'xplat-pause' : 'xplat-play'} size={20} color="#fff" />
+						</Pressable>
+						<Text className="vx-video-time">{stamp(props.position)}</Text>
+						<Slider
+							className="vx-video-slider"
+							style={{ flexGrow: 1 }}
+							value={props.position}
+							minValue={0}
+							maxValue={props.duration > 0 ? props.duration : 1}
+							onValueChange={props.onSeek}
+						/>
+						<Text className="vx-video-time">{stamp(props.duration)}</Text>
+						<Pressable
+							className="vx-video-btn"
+							accessibilityRole="button"
+							accessibilityLabel={props.muted ? 'Unmute' : 'Mute'}
+							onPress={props.onToggleMute}
+						>
+							<Icon
+								name={props.muted ? 'xplat-volume-off' : 'xplat-volume'}
+								size={20}
+								color="#fff"
+							/>
+						</Pressable>
+					</Row>
+				</View>
+			</>
+		}
+	</>
+}

package/src/video-chrome.web.tsrx

@@ -0,0 +1,116 @@
+import { useEffect, useState } from 'octane';
+import { Icon, Image, Pressable, Row, Slider, Text, View } from '@octane-xplat/ui';
+
+/** Self-drawn video transport — the chrome half of the surface-hosted
+ *  `Video` component. Identical structure to the native twin (only the
+ *  pragma differs): every layer composes xplat primitives,
+ *  so the transport draws the same pixels on every target — the leaf only
+ *  supplies the surface. The layers stack inside the leaf's `vx-stack`
+ *  grid (later = on top), so this fragment's children are each a
+ *  full-frame layer. Times are milliseconds (matches both plugin players;
+ *  the web leaf converts from `HTMLMediaElement`'s seconds). */
+export interface VideoChromeProps {
+	/** Frame image shown until playback first starts. */
+	poster?: string
+	started: boolean
+	playing: boolean
+	/** Playback position in ms. */
+	position: number
+	/** Clip duration in ms (0 until known). */
+	duration: number
+	muted: boolean
+	onTogglePlay: () => void
+	onToggleMute: () => void
+	onSeek: (ms: number) => void
+}
+
+function stamp(ms: number): string {
+	const total = Math.max(0, Math.floor(ms / 1000));
+	return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, '0')}`;
+}
+
+export function VideoChrome(props: VideoChromeProps) @{
+	const [visible, setVisible] = useState(true);
+
+	// Chrome auto-hides while playing; pausing or tapping brings it back.
+	useEffect(() => {
+		if (!props.playing || !visible) return;
+		const t = setTimeout(() => setVisible(false), 2500);
+		return () => clearTimeout(t);
+	}, [props.playing, visible]);
+
+	<>
+		@if (props.poster && !props.started) {
+			// aspectFill matches the web leaf's object-fit: cover.
+			<Image
+				className="vx-video-poster"
+				src={props.poster}
+				ios={{ stretch: 'aspectFill' }}
+				android={{ stretch: 'aspectFill' }}
+			/>
+		}
+		<Pressable
+			className="vx-video-tap"
+			accessibilityRole="button"
+			accessibilityLabel={visible ? 'Hide video controls' : 'Show video controls'}
+			onPress={() => setVisible(props.playing ? !visible : true)}
+		/>
+		@if (visible) {
+			<>
+				@if (!props.playing) {
+					// While paused, tap anywhere on the frame is tap-to-play; the
+					// show/hide tap layer beneath is reachable once it starts.
+					<Pressable
+						className="vx-video-center"
+						justifyContent="center"
+						alignItems="center"
+						accessibilityRole="button"
+						accessibilityLabel="Play"
+						onPress={props.onTogglePlay}
+					>
+						<View className="vx-video-centerbtn">
+							<Icon name="xplat-play" size={28} color="#fff" />
+						</View>
+					</Pressable>
+				}
+				// Positioning wrappers cover the frame — the web-only CSS pass gives
+				// them pointer-events:none so taps reach the surface/tap layer; NS
+				// layout views never capture touches without handlers.
+				<View className="vx-video-barwrap" justifyContent="end">
+					<Row className="vx-video-bar" alignItems="center" gap={8}>
+						<Pressable
+							className="vx-video-btn"
+							accessibilityRole="button"
+							accessibilityLabel={props.playing ? 'Pause' : 'Play'}
+							onPress={props.onTogglePlay}
+						>
+							<Icon name={props.playing ? 'xplat-pause' : 'xplat-play'} size={20} color="#fff" />
+						</Pressable>
+						<Text className="vx-video-time">{stamp(props.position)}</Text>
+						<Slider
+							className="vx-video-slider"
+							style={{ flexGrow: 1 }}
+							value={props.position}
+							minValue={0}
+							maxValue={props.duration > 0 ? props.duration : 1}
+							onValueChange={props.onSeek}
+						/>
+						<Text className="vx-video-time">{stamp(props.duration)}</Text>
+						<Pressable
+							className="vx-video-btn"
+							accessibilityRole="button"
+							accessibilityLabel={props.muted ? 'Unmute' : 'Mute'}
+							onPress={props.onToggleMute}
+						>
+							<Icon
+								name={props.muted ? 'xplat-volume-off' : 'xplat-volume'}
+								size={20}
+								color="#fff"
+							/>
+						</Pressable>
+					</Row>
+				</View>
+			</>
+		}
+	</>
+}

package/types/index.d.ts

@@ -0,0 +1,5 @@
+import type { UniversalComponent } from 'octane/universal'
+import type { VideoProps } from './props'
+
+export declare const Video: UniversalComponent<VideoProps>
+export type { VideoEvent, VideoFit, VideoHandle, VideoProps } from './props'

package/types/index.macos.d.ts

@@ -0,0 +1,4 @@
+import type { VideoProps } from './props'
+
+export type { VideoEvent, VideoFit, VideoHandle, VideoProps } from './props'
+export declare function Video(props: VideoProps): unknown

package/types/props.d.ts

@@ -0,0 +1,103 @@
+export interface LayoutChildProps {
+    row?: number;
+    col?: number;
+    rowSpan?: number;
+    colSpan?: number;
+    dock?: 'left' | 'top' | 'right' | 'bottom';
+    left?: number;
+    top?: number;
+    flexGrow?: number;
+    flexShrink?: number;
+    alignSelf?: string;
+    order?: number;
+}
+/** Flex-container props shared by View/Row/Pressable — RN vocabulary, applied
+ *  to the host flexboxlayout natively and the element's style on web.
+ *  `gap` is a dip number (px on web); NS supports it on FlexboxLayout only
+ *  (GridLayout has no gap). */
+export interface FlexContainerProps {
+    justifyContent?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+    alignItems?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+    flexWrap?: boolean | 'wrap' | 'nowrap' | 'wrap-reverse';
+    gap?: number | string;
+    rowGap?: number | string;
+    columnGap?: number | string;
+}
+export type Role = 'button' | 'link' | 'search' | 'image' | 'heading' | 'adjustable' | 'summary' | 'text' | 'none' | 'progressbar' | 'checkbox' | 'switch' | 'radio' | 'spinbutton' | 'tab';
+export interface AccessibilityProps {
+    accessible?: boolean;
+    accessibilityLabel?: string;
+    accessibilityRole?: Role;
+    accessibilityHint?: string;
+    accessibilityValue?: string;
+    accessibilityState?: {
+        disabled?: boolean;
+        selected?: boolean;
+        checked?: boolean;
+    };
+    accessibilityLiveRegion?: 'none' | 'polite' | 'assertive';
+}
+export type VideoFit = 'contain' | 'cover' | 'fill';
+export interface VideoEvent {
+    /** Playback position in milliseconds. */
+    position?: number;
+    /** Clip duration in milliseconds, once known (0 before then). */
+    duration?: number;
+    /** Failure description. */
+    message?: string;
+}
+export interface VideoHandle {
+    play(): void;
+    pause(): void;
+    /** Seek to a position in milliseconds. */
+    seekTo(ms: number): void;
+    /** Current playback position in ms (0 before metadata loads). */
+    currentTime(): number;
+    /** Clip duration in ms (0 before metadata loads). */
+    duration(): number;
+    /** The platform surface (`HTMLVideoElement` / plugin `Video`). */
+    native: any;
+}
+/** Embedded video — surface-hosted bucket: the OS engine owns the pixels
+ *  (web `<video>` / `@nstudio/nativescript-exoplayer` → AVPlayerViewController
+ *  + ExoPlayer2), all chrome is self-drawn so `controls` looks identical on
+ *  every target. Times are milliseconds on every platform. */
+export interface VideoProps extends LayoutChildProps, AccessibilityProps {
+    className?: any;
+    style?: any;
+    id?: string;
+    /** Remote URL; native also accepts `~/` bundle paths and absolute files. */
+    src: string;
+    /** Frame shown until playback starts. */
+    poster?: string;
+    /** Controlled playback — pair with `onPlayingChange`. Leave unset for
+     *  uncontrolled playback (the transport and `bind` handle still work). */
+    playing?: boolean;
+    /** Uncontrolled start-playing shorthand. Browsers block unmuted
+     *  autoplay — pair with `muted` when `autoPlay` matters on web. */
+    autoPlay?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    /** Self-drawn transport overlay (play/pause, scrubber, time, mute) —
+     *  tap the surface to show/hide. Default true. */
+    controls?: boolean;
+    /** Content fitting inside the frame: `contain` (letterbox, default),
+     *  `cover` (crop to fill), `fill` (stretch). */
+    fit?: VideoFit;
+    /** Playback metadata is loaded; `e.duration` is the clip length in ms. */
+    onReady?: (e: VideoEvent) => void;
+    onEnded?: () => void;
+    /** Fires on user toggles and controlled `playing` writes. */
+    onPlayingChange?: (playing: boolean) => void;
+    /** Fires when the transport's mute button toggles. */
+    onMutedChange?: (muted: boolean) => void;
+    /** Web only — the plugin players surface no error event on native. */
+    onError?: (e: VideoEvent) => void;
+    /** Imperative handle — play/pause/seek/time plus `native` for anything
+     *  the shared props don't cover. */
+    bind?: (h: VideoHandle) => void;
+    /** Platform escape hatches, applied after the shared props. */
+    ios?: Record<string, any>;
+    android?: Record<string, any>;
+    web?: Record<string, any>;
+}