@rixl/media-core 1.0.1 → 1.1.0

package/dist/lib/analytics-wire.js

@@ -1,153 +0,0 @@
-import { filterUndefined } from "./filter-undefined.js";
-
-// src/lib/analytics-wire.ts
-function msToProtoDuration(ms) {
-	const seconds = ms / 1e3;
-	return `${Number(seconds.toFixed(3))}s`;
-}
-function toWireMediaType(type) {
-	return type === "video" ? "MEDIA_TYPE_VIDEO" : "MEDIA_TYPE_IMAGE";
-}
-function toWireSegment(segment) {
-	return {
-		start_ms: msToProtoDuration(segment.start_ms),
-		end_ms: msToProtoDuration(segment.end_ms),
-		speed: segment.speed
-	};
-}
-function toWireContentView(event, { context, deviceId }) {
-	const wire = {
-		content_id: event.content_id,
-		content_type: toWireMediaType(event.content_type),
-		view_type: event.view_type,
-		watch_duration_ms: msToProtoDuration(event.watch_duration_ms),
-		page: event.page,
-		device_id: event.device_id ?? deviceId,
-		...filterUndefined({
-			feed_id: event.feed_id,
-			post_id: event.post_id,
-			video_position_ms: event.video_position_ms !== void 0 ? msToProtoDuration(event.video_position_ms) : void 0,
-			video_total_duration_ms: event.video_total_duration_ms !== void 0 ? msToProtoDuration(event.video_total_duration_ms) : void 0,
-			segments: event.segments !== void 0 && event.segments.length > 0 ? event.segments.map(toWireSegment) : void 0
-		})
-	};
-	const country = event.country ?? context.country;
-	if (country !== void 0) wire.country = country;
-	return wire;
-}
-function toWireEngagement(event, { context, sessionId }) {
-	const wire = {
-		engagement_type: event.engagement_type,
-		session_id: event.session_id ?? sessionId,
-		...filterUndefined({
-			resource_type: event.resource_type,
-			resource_id: event.resource_id,
-			page: event.page,
-			comment_text: event.comment_text,
-			share_platform: event.share_platform
-		})
-	};
-	const country = event.country ?? context.country;
-	if (country !== void 0) wire.country = country;
-	const deviceType = event.device_type ?? context.device;
-	if (deviceType !== void 0) wire.device_type = deviceType;
-	return wire;
-}
-function toWireInteraction(event, { context, sessionId }) {
-	const wire = {
-		interaction_type: event.interaction_type,
-		session_id: event.session_id ?? sessionId,
-		...filterUndefined({
-			element_type: event.element_type,
-			element_id: event.element_id,
-			page: event.page,
-			page_url: event.page_url,
-			scroll_depth: event.scroll_depth,
-			search_query: event.search_query,
-			click_x: event.click_x,
-			click_y: event.click_y,
-			resource_id: event.resource_id,
-			resource_type: event.resource_type,
-			feed_id: event.feed_id,
-			post_id: event.post_id,
-			content_id: event.content_id,
-			device_type: event.device_type,
-			browser: event.browser
-		})
-	};
-	const deviceType = wire.device_type ?? context.device;
-	if (deviceType !== void 0) wire.device_type = deviceType;
-	const browser = wire.browser ?? context.browser;
-	if (browser !== void 0) wire.browser = browser;
-	return wire;
-}
-function toWireError(event, { context, sessionId }) {
-	const wire = {
-		error_type: event.error_type,
-		session_id: event.session_id ?? sessionId,
-		...filterUndefined({
-			error_code: event.error_code,
-			error_message: event.error_message,
-			stack_trace: event.stack_trace,
-			resource_type: event.resource_type,
-			resource_id: event.resource_id,
-			endpoint: event.endpoint,
-			device_type: event.device_type,
-			browser: event.browser,
-			os: event.os
-		})
-	};
-	const deviceType = wire.device_type ?? context.device;
-	if (deviceType !== void 0) wire.device_type = deviceType;
-	const browser = wire.browser ?? context.browser;
-	if (browser !== void 0) wire.browser = browser;
-	const os = wire.os ?? context.os;
-	if (os !== void 0) wire.os = os;
-	return wire;
-}
-function toWireSessionStart(event) {
-	return { ...filterUndefined({
-		utm_source: event.utm_source,
-		utm_campaign: event.utm_campaign,
-		browser: event.browser,
-		language: event.language,
-		screen_resolution: event.screen_resolution,
-		platform: event.platform,
-		tg_platform: event.tg_platform,
-		tg_version: event.tg_version,
-		timezone: event.timezone,
-		timezone_offset: event.timezone_offset,
-		color_depth: event.color_depth,
-		touch_support: event.touch_support,
-		country: event.country,
-		user_id: event.user_id
-	}) };
-}
-function applyTimestamp(wire, timestamp) {
-	if (timestamp !== void 0) wire.timestamp = (/* @__PURE__ */ new Date(timestamp * 1e3)).toISOString();
-}
-function toWireEvent(event, options) {
-	let wire;
-	switch (event._type) {
-		case "content_views":
-			wire = { content_view: toWireContentView(event, options) };
-			break;
-		case "engagement":
-			wire = { engagement: toWireEngagement(event, options) };
-			break;
-		case "interaction":
-			wire = { interaction: toWireInteraction(event, options) };
-			break;
-		case "error":
-			wire = { error: toWireError(event, options) };
-			break;
-		case "session_start":
-			wire = { session_start: toWireSessionStart(event) };
-			break;
-		default: throw new Error(`Unsupported analytics event type: ${event._type}`);
-	}
-	applyTimestamp(wire, event.timestamp);
-	return wire;
-}
-
-export { msToProtoDuration, toWireEvent, toWireSegment };

package/dist/lib/buffer-progress.d.ts

@@ -1,20 +0,0 @@
-/**
- * Pure buffer-progress computations extracted from useBufferProgress.
- * Operate on plain TimeRanges + numbers, not HTMLVideoElement, so they
- * are framework-agnostic and trivially testable.
- */
-export interface BufferRange {
-  start: number;
-  end: number;
-}
-/**
- * Convert a TimeRanges into normalized 0-100 percentage ranges.
- * Returns [] when duration is zero/invalid or timeRanges is missing.
- */
-export declare const computeBufferRanges: (timeRanges: TimeRanges | null | undefined, duration: number) => BufferRange[];
-/**
- * How much buffer (as a 0-100 percentage) is loaded ahead of the
- * current playback position. Considers only ranges that cover the
- * current position; takes the maximum contiguous lookahead.
- */
-export declare const computeBufferedAhead: (ranges: BufferRange[], currentTime: number, duration: number) => number;

package/dist/lib/buffer-progress.js

@@ -1,37 +0,0 @@
-// src/lib/buffer-progress.ts
-/**
-* Convert a TimeRanges into normalized 0-100 percentage ranges.
-* Returns [] when duration is zero/invalid or timeRanges is missing.
-*/
-const computeBufferRanges = (timeRanges, duration) => {
-	if (!timeRanges || !duration || !Number.isFinite(duration) || duration <= 0) return [];
-	const ranges = [];
-	try {
-		for (let i = 0; i < timeRanges.length; i++) {
-			const end = timeRanges.end(i) / duration * 100;
-			ranges.push({
-				start: 0,
-				end: Math.min(100, end)
-			});
-		}
-	} catch {
-		return [];
-	}
-	return ranges;
-};
-/**
-* How much buffer (as a 0-100 percentage) is loaded ahead of the
-* current playback position. Considers only ranges that cover the
-* current position; takes the maximum contiguous lookahead.
-*/
-const computeBufferedAhead = (ranges, currentTime, duration) => {
-	if (!ranges.length || !duration || !Number.isFinite(duration) || duration <= 0) return 0;
-	const currentPercent = currentTime / duration * 100;
-	let bufferAhead = 0;
-	ranges.forEach((range) => {
-		if (range.end > currentPercent && range.start <= currentPercent + .1) bufferAhead = Math.max(bufferAhead, range.end - currentPercent);
-	});
-	return bufferAhead;
-};
-
-export { computeBufferRanges, computeBufferedAhead };

package/dist/lib/caption-styles.d.ts

@@ -1,20 +0,0 @@
-import { Position } from "./caption-utils.js";
-import { CSSProperties } from "./image-render.js";
-import { SettingsState } from "../store/settings/types.js";
-export interface SmartCaptionPositionParams {
-  position: Position;
-  isDragging: boolean;
-  controlsVisible: boolean;
-}
-/**
- * Caption window placement: percent-based within the safe zone, snapping to
- * the bottom (above the controls bar when visible) once dragged past the
- * snap threshold. Single source for the React hook and the Lit overlay.
- */
-export declare function getSmartCaptionPosition({ position, isDragging, controlsVisible }: SmartCaptionPositionParams): CSSProperties;
-export type CaptionWindowSettings = Pick<SettingsState, "captionWindowColor" | "captionWindowOpacity">;
-/** Caption window box: width from the safe viewport, settings-driven background, drag cursor. */
-export declare function getCaptionWindowStyle(settings: CaptionWindowSettings, safeViewportWidth: number, isDragging: boolean): CSSProperties;
-export type CaptionTextSettings = Pick<SettingsState, "captionFontFamily" | "captionFontColor" | "captionFontOpacity" | "captionBGColor" | "captionBGOpacity" | "captionCharacterEdgeStyle">;
-/** Caption text styling from the user's caption settings (font, colors, edge-style shadow). */
-export declare function getCaptionTextStyle(settings: CaptionTextSettings, fontSize: number): CSSProperties;

package/dist/lib/caption-styles.js

@@ -1,56 +0,0 @@
-import { BOTTOM_OFFSET_CONTROLS_HIDDEN, BOTTOM_OFFSET_CONTROLS_VISIBLE, CAPTION_WIDTH_RATIO, getTextShadowValue, shouldPinToBottom } from "./caption-utils.js";
-import { hexToRGBAString } from "./colors.js";
-import { FONT_FAMILIES } from "../store/settings/constants.js";
-
-// src/lib/caption-styles.ts
-/**
-* Caption window placement: percent-based within the safe zone, snapping to
-* the bottom (above the controls bar when visible) once dragged past the
-* snap threshold. Single source for the React hook and the Lit overlay.
-*/
-function getSmartCaptionPosition({ position, isDragging, controlsVisible }) {
-	const transition = isDragging ? "none" : "all 300ms ease";
-	if (shouldPinToBottom(position.y, isDragging)) {
-		const bottomOffset = controlsVisible ? 80 : 24;
-		return {
-			left: `${position.x}%`,
-			top: `calc(100% - ${bottomOffset}px)`,
-			bottom: "auto",
-			transform: "translateY(-100%)",
-			transition
-		};
-	}
-	return {
-		left: `${position.x}%`,
-		top: `${position.y}%`,
-		bottom: "auto",
-		transform: "translateY(0)",
-		transition
-	};
-}
-/** Caption window box: width from the safe viewport, settings-driven background, drag cursor. */
-function getCaptionWindowStyle(settings, safeViewportWidth, isDragging) {
-	const width = (safeViewportWidth || 300) * CAPTION_WIDTH_RATIO;
-	const backgroundColor = settings.captionWindowOpacity > 0 ? hexToRGBAString(settings.captionWindowColor, settings.captionWindowOpacity) : "transparent";
-	return {
-		width: `${width}px`,
-		backgroundColor,
-		cursor: isDragging ? "grabbing" : "grab",
-		touchAction: "none"
-	};
-}
-/** Caption text styling from the user's caption settings (font, colors, edge-style shadow). */
-function getCaptionTextStyle(settings, fontSize) {
-	const fontFamily = FONT_FAMILIES[settings.captionFontFamily] || FONT_FAMILIES.proportional_sans;
-	return {
-		fontSize: `${fontSize}px`,
-		fontFamily,
-		color: hexToRGBAString(settings.captionFontColor, settings.captionFontOpacity),
-		backgroundColor: settings.captionBGOpacity > 0 ? hexToRGBAString(settings.captionBGColor, settings.captionBGOpacity) : "transparent",
-		textShadow: getTextShadowValue(settings.captionCharacterEdgeStyle, fontSize),
-		userSelect: "none",
-		touchAction: "none"
-	};
-}
-
-export { getCaptionTextStyle, getCaptionWindowStyle, getSmartCaptionPosition };

package/dist/lib/caption-utils.d.ts

@@ -1,80 +0,0 @@
-export type Viewport = {
-  width: number;
-  height: number;
-};
-export interface Position {
-  x: number;
-  y: number;
-}
-export declare const DEFAULT_FONT_SIZE = 16;
-export declare const MIN_FONT_SIZE = 12;
-export declare const MAX_FONT_SIZE = 120;
-export declare const FONT_SIZE_RATIO = .03;
-export declare const FONT_SIZE_VIEWPORT_RATIO = .07;
-export declare const DEFAULT_CAPTION_FONT_SIZE = 100;
-export declare const SAFE_ZONE_MARGIN = 8;
-export declare const CAPTION_WIDTH_RATIO = .6;
-/**
- * Smart caption positioning constants
- */
-export declare const BOTTOM_SNAP_THRESHOLD = 85;
-export declare const BOTTOM_OFFSET_CONTROLS_VISIBLE = 80;
-export declare const BOTTOM_OFFSET_CONTROLS_HIDDEN = 24;
-/**
- * Calculates the font size based on the viewport width and user preference.
- * Uses a logarithmic scale
- * 100% -> 1.0x
- * 200% -> 1.5x
- * 400% -> 2.0x
- */
-export declare const calculateFontSize: (viewport: Viewport, captionFontSize: number) => number;
-/**
- * Constrains a percentage-based position to be within safe bounds (0-100).
- * Assumes the input position is already in percentages.
- */
-export declare const constrainPercentagePosition: (position: Position, elementWidthRatio?: number) => Position;
-/**
- * Converts pixel coordinates to percentage coordinates relative to the viewport.
- */
-export declare const pixelsToPercentage: (x: number, y: number, viewport: Viewport) => Position;
-/**
- * Calculate pointer offsets for caption dragging
- */
-export interface PointerOffsets {
-  clickXRelative: number;
-  clickYRelative: number;
-  currentVisualX: number;
-  currentVisualY: number;
-}
-export interface GetPointerOffsetsOptions {
-  containerRect: DOMRect;
-  elementRect: DOMRect;
-  clientX: number;
-  clientY: number;
-}
-export declare function getPointerOffsets(options: GetPointerOffsetsOptions): PointerOffsets;
-/**
- * Calculate new drag position from delta
- */
-export interface CalculateDragPositionOptions {
-  startPositionPixels: Position;
-  startX: number;
-  startY: number;
-  currentXRelative: number;
-  currentYRelative: number;
-  viewport: Viewport;
-}
-export declare function calculateDragPosition(options: CalculateDragPositionOptions): Position;
-/**
- * Calculate safe zone viewport dimensions
- */
-export declare function calculateSafeViewport(viewport: Viewport): Viewport;
-/**
- * Determine if caption should be pinned to bottom
- */
-export declare function shouldPinToBottom(positionY: number, isDragging: boolean): boolean;
-/**
- * CSS text-shadow value for a caption character edge style.
- * Shadow size scales with font size so edges stay proportional.
- */
-export declare function getTextShadowValue(edgeStyle: string, fontSize: number): string;

package/dist/lib/caption-utils.js

@@ -1,111 +0,0 @@
-import { clamp } from "./numbers.js";
-
-// src/lib/caption-utils.ts
-const DEFAULT_FONT_SIZE = 16;
-const MIN_FONT_SIZE = 12;
-const MAX_FONT_SIZE = 120;
-const FONT_SIZE_RATIO = .03;
-const FONT_SIZE_VIEWPORT_RATIO = .07;
-const DEFAULT_CAPTION_FONT_SIZE = 100;
-const SAFE_ZONE_MARGIN = 8;
-const CAPTION_WIDTH_RATIO = .6;
-/**
-* Smart caption positioning constants
-*/
-const BOTTOM_SNAP_THRESHOLD = 85;
-const BOTTOM_OFFSET_CONTROLS_VISIBLE = 80;
-const BOTTOM_OFFSET_CONTROLS_HIDDEN = 24;
-/**
-* Calculates the font size based on the viewport width and user preference.
-* Uses a logarithmic scale
-* 100% -> 1.0x
-* 200% -> 1.5x
-* 400% -> 2.0x
-*/
-const calculateFontSize = (viewport, captionFontSize) => {
-	if (!viewport.width) return 16;
-	const baseSize = viewport.width * FONT_SIZE_RATIO;
-	const ratio = Math.max(.1, captionFontSize / 100);
-	const scaledSize = baseSize * (1 + .5 * Math.log2(ratio));
-	const maxSize = Math.min(120, viewport.width * FONT_SIZE_VIEWPORT_RATIO);
-	return clamp(scaledSize, 12, maxSize);
-};
-/**
-* Constrains a percentage-based position to be within safe bounds (0-100).
-* Assumes the input position is already in percentages.
-*/
-const constrainPercentagePosition = (position, elementWidthRatio = .6) => {
-	const widthPercentage = elementWidthRatio * 100;
-	const maxX = Math.max(0, 100 - widthPercentage);
-	return {
-		x: clamp(position.x, 0, maxX),
-		y: clamp(position.y, 0, 100)
-	};
-};
-/**
-* Converts pixel coordinates to percentage coordinates relative to the viewport.
-*/
-const pixelsToPercentage = (x, y, viewport) => {
-	if (!viewport.width || !viewport.height) return {
-		x: 0,
-		y: 0
-	};
-	return {
-		x: x / viewport.width * 100,
-		y: y / viewport.height * 100
-	};
-};
-function getPointerOffsets(options) {
-	const { containerRect, elementRect, clientX, clientY } = options;
-	return {
-		clickXRelative: clientX - containerRect.left,
-		clickYRelative: clientY - containerRect.top,
-		currentVisualX: elementRect.left - containerRect.left,
-		currentVisualY: elementRect.top - containerRect.top
-	};
-}
-function calculateDragPosition(options) {
-	const { startPositionPixels, startX, startY, currentXRelative, currentYRelative, viewport } = options;
-	const deltaX = currentXRelative - startX;
-	const deltaY = currentYRelative - startY;
-	const newPixelX = startPositionPixels.x + deltaX;
-	const newPixelY = startPositionPixels.y + deltaY;
-	const raw = pixelsToPercentage(newPixelX, newPixelY, viewport);
-	return constrainPercentagePosition(raw, CAPTION_WIDTH_RATIO);
-}
-/**
-* Calculate safe zone viewport dimensions
-*/
-function calculateSafeViewport(viewport) {
-	return {
-		width: viewport.width - 16,
-		height: viewport.height - 16
-	};
-}
-/**
-* Determine if caption should be pinned to bottom
-*/
-function shouldPinToBottom(positionY, isDragging) {
-	return !isDragging && positionY > 85;
-}
-/**
-* CSS text-shadow value for a caption character edge style.
-* Shadow size scales with font size so edges stay proportional.
-*/
-function getTextShadowValue(edgeStyle, fontSize) {
-	const shadowSize = Math.max(1, fontSize * .06);
-	switch (edgeStyle) {
-		case "drop-shadow": return `${shadowSize}px ${shadowSize}px ${shadowSize}px rgba(0, 0, 0, 0.75)`;
-		case "raised": return `${shadowSize}px ${shadowSize}px 0 rgba(0, 0, 0, 0.5), -${shadowSize * .5}px -${shadowSize * .5}px 0 rgba(255, 255, 255, 0.25)`;
-		case "depressed": return `-${shadowSize}px -${shadowSize}px 0 rgba(0, 0, 0, 0.5), ${shadowSize * .5}px ${shadowSize * .5}px 0 rgba(255, 255, 255, 0.25)`;
-		case "outline": return `
-        -${shadowSize}px -${shadowSize}px 0 #000,
-        ${shadowSize}px -${shadowSize}px 0 #000,
-        -${shadowSize}px ${shadowSize}px 0 #000,
-        ${shadowSize}px ${shadowSize}px 0 #000
-      `;
-		default: return "none";
-	}
-}
-
-export { BOTTOM_OFFSET_CONTROLS_HIDDEN, BOTTOM_OFFSET_CONTROLS_VISIBLE, BOTTOM_SNAP_THRESHOLD, CAPTION_WIDTH_RATIO, DEFAULT_CAPTION_FONT_SIZE, DEFAULT_FONT_SIZE, FONT_SIZE_RATIO, FONT_SIZE_VIEWPORT_RATIO, MAX_FONT_SIZE, MIN_FONT_SIZE, SAFE_ZONE_MARGIN, calculateDragPosition, calculateFontSize, calculateSafeViewport, constrainPercentagePosition, getPointerOffsets, getTextShadowValue, pixelsToPercentage, shouldPinToBottom };

package/dist/lib/chapter-utils.d.ts

@@ -1,102 +0,0 @@
-import { Chapter } from "../types/video.js";
-import { BufferRange } from "./buffer-progress.js";
-/**
- * Chapter with calculated end time and duration
- */
-export interface ChapterWithEnd extends Chapter {
-  endTime: number;
-  durationSec: number;
-}
-/**
- * Check if a single chapter is within the video duration
- * @param chapter - The chapter to validate
- * @param videoDuration - The total video duration in seconds
- * @param tolerance - Tolerance in seconds for rounding errors (default: 1)
- * @returns Whether the chapter is within valid bounds
- */
-export declare function isChapterWithinDuration(chapter: Chapter, videoDuration: number, tolerance?: number): boolean;
-/**
- * Validate chapters for use with chaptered progress bar
- * Returns false if:
- * - chapters is undefined or empty
- * - less than 2 chapters (need multiple for chaptered bar)
- * - any chapter exceeds video duration
- *
- * @param chapters - Array of chapters to validate
- * @param videoDuration - The total video duration in seconds
- * @param tolerance - Tolerance in seconds for rounding errors (default: 1)
- * @returns Whether chapters are valid for chaptered progress bar
- */
-export declare function validateChapters(chapters: Chapter[] | undefined, videoDuration: number, tolerance?: number): boolean;
-/**
- * Calculate chapter end times based on next chapter start or video duration
- */
-export declare function calculateChaptersWithEnd(chapters: Chapter[], duration: number): ChapterWithEnd[];
-/**
- * Slice heatmap data for a specific chapter based on its time range
- */
-interface HeatmapSliceParams {
-  heatmapData: number[];
-  chapterStartTime: number;
-  chapterEndTime: number;
-  videoDuration: number;
-}
-export declare function sliceHeatmapData({ heatmapData, chapterStartTime, chapterEndTime, videoDuration }: HeatmapSliceParams): number[];
-/**
- * Calculate all heatmap slices for chapters
- */
-export declare function calculateHeatmapSlices(heatmapData: number[] | null, chapters: ChapterWithEnd[], duration: number): number[][];
-/**
- * Calculate global max value from heatmap data for consistent normalization
- */
-export declare function calculateGlobalMax(heatmapData: number[] | null): number;
-/**
- * Calculate progress percentage within a chapter segment
- * @returns 0-100 percentage
- */
-export declare function calculateSegmentProgress(currentPosition: number, chapterStart: number, chapterEnd: number): number;
-/**
- * Calculate buffer ranges within a chapter segment
- * Converts global buffer ranges to segment-local 0-100 scale
- */
-type SegmentBufferParams = {
-  globalBufferRanges: BufferRange[];
-  chapterStart: number;
-  chapterEnd: number;
-  videoDuration: number;
-};
-export declare function calculateSegmentBufferRanges({ globalBufferRanges, chapterStart, chapterEnd, videoDuration }: SegmentBufferParams): BufferRange[];
-/**
- * Calculate flex grow ratio for a chapter based on its duration
- */
-export declare function calculateFlexGrow(chapterDuration: number, videoDuration: number): number;
-/**
- * Determine current playback position
- * Uses progress during drag for real-time feedback, currentTime otherwise
- */
-interface CurrentPositionParams {
-  isDragging: boolean;
-  progress: number;
-  duration: number;
-  currentTime: number;
-}
-export declare function getCurrentPosition({ isDragging, progress, duration, currentTime }: CurrentPositionParams): number;
-/**
- * Find which segment is hovered based on mouse X position
- * @param segments - Array of segment DOM elements
- * @param mouseX - Mouse X coordinate (clientX)
- * @returns Index of hovered segment, or null if none
- */
-export declare function findHoveredSegmentIndex(segments: Array<HTMLDivElement | null>, mouseX: number): number | null;
-/**
- * Start time of the first chapter after the current position, or null when
- * already in the last chapter. Mirrors React useChapterNavigation.
- */
-export declare function getNextChapterStart(chapters: Chapter[] | undefined, currentTime: number): number | null;
-/**
- * Target for "previous chapter": restart the current chapter when more than
- * 3s in (or when it is the first), otherwise jump to the previous chapter.
- * Mirrors React useChapterNavigation.
- */
-export declare function getPrevChapterTarget(chapters: Chapter[] | undefined, currentTime: number): number | null;
-export {};