react-native-theoplayer 2.8.0 → 2.9.0

package/src/ui/components/message/ErrorDisplay.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { Text, View } from 'react-native';
-import type { PlayerError } from 'react-native-theoplayer';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import { SvgContext } from '../button/svg/SvgUtils';
-import { ErrorSvg } from '../button/svg/ErrorSvg';
-import { FULLSCREEN_CENTER_STYLE } from '../uicontroller/UiContainer';
-
-export interface ErrorDisplayProps {
-  /**
-   * The error that will be displayed.
-   */
-  error: PlayerError;
-}
-
-/**
- * A fullscreen error component for the `react-native-theoplayer` UI.
- */
-export function ErrorDisplay(props: ErrorDisplayProps) {
-  const { error } = props;
-  return (
-    <PlayerContext.Consumer>
-      {(context: UiContext) => (
-        <View style={[FULLSCREEN_CENTER_STYLE, { backgroundColor: context.style.colors.errorBackground }]}>
-          <View style={{ flexDirection: 'row' }}>
-            <SvgContext.Provider
-              value={{
-                fill: context.style.colors.icon,
-                height: '100%',
-                width: '100%',
-              }}>
-              <View style={{ height: context.style.dimensions.controlBarHeight, aspectRatio: 1, padding: 5 }}>
-                <ErrorSvg />
-              </View>
-            </SvgContext.Provider>
-            <Text style={[context.style.text, { color: context.style.colors.text, alignSelf: 'center', paddingLeft: 5 }]}>Error:</Text>
-          </View>
-          <Text style={[context.style.text, { color: context.style.colors.text }]}>{error.errorMessage}</Text>
-        </View>
-      )}
-    </PlayerContext.Consumer>
-  );
-}

package/src/ui/components/message/barrel.ts

@@ -1,2 +0,0 @@
-export * from './CastMessage';
-export * from './ErrorDisplay';

package/src/ui/components/seekbar/SeekBar.tsx

@@ -1,178 +0,0 @@
-import React, { PureComponent } from 'react';
-import { LayoutChangeEvent, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-import { DurationChangeEvent, LoadedMetadataEvent, PlayerEventType, ProgressEvent, TimeRange, TimeUpdateEvent } from 'react-native-theoplayer';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import Slider from '@react-native-community/slider';
-import { SingleThumbnailView } from './thumbnail/SingleThumbnailView';
-
-export interface SeekBarProps {
-  /**
-   * Optional style applied to the SeekBar.
-   */
-  style?: StyleProp<ViewStyle>;
-}
-
-interface SeekBarState {
-  ignoreTimeupdate: boolean;
-  isSeeking: boolean;
-  pausedDueToScrubbing: boolean;
-  seekable: TimeRange[];
-  duration: number;
-  sliderTime: number;
-  width: number;
-}
-
-/**
- * The default seek bar component for the `react-native-theoplayer` UI.
- */
-export class SeekBar extends PureComponent<SeekBarProps, SeekBarState> {
-  private static initialState: SeekBarState = {
-    ignoreTimeupdate: false,
-    isSeeking: false,
-    sliderTime: 0,
-    duration: 0,
-    seekable: [],
-    pausedDueToScrubbing: false,
-    width: 0,
-  };
-
-  private _seekBlockingTimeout: NodeJS.Timeout | undefined;
-  private _clearIsScrubbingTimout: NodeJS.Timeout | undefined;
-
-  constructor(props: SeekBarProps) {
-    super(props);
-    this.state = SeekBar.initialState;
-  }
-
-  componentDidMount() {
-    const player = (this.context as UiContext).player;
-    player.addEventListener(PlayerEventType.LOADED_METADATA, this._onLoadedMetadata);
-    player.addEventListener(PlayerEventType.DURATION_CHANGE, this._onDurationChange);
-    player.addEventListener(PlayerEventType.TIME_UPDATE, this._onTimeUpdate);
-    player.addEventListener(PlayerEventType.PROGRESS, this._onProgress);
-    this.setState({
-      ...SeekBar.initialState,
-      sliderTime: player.currentTime,
-      duration: player.duration,
-      seekable: player.seekable,
-    });
-  }
-
-  componentWillUnmount() {
-    const context = this.context as UiContext;
-    context.player.removeEventListener(PlayerEventType.LOADED_METADATA, this._onLoadedMetadata);
-    context.player.removeEventListener(PlayerEventType.DURATION_CHANGE, this._onDurationChange);
-    context.player.removeEventListener(PlayerEventType.TIME_UPDATE, this._onTimeUpdate);
-    context.player.removeEventListener(PlayerEventType.PROGRESS, this._onProgress);
-    clearTimeout(this._seekBlockingTimeout);
-    clearTimeout(this._clearIsScrubbingTimout);
-  }
-
-  private _onTimeUpdate = (event: TimeUpdateEvent) => {
-    if (!this.state.ignoreTimeupdate) {
-      this.setState({ sliderTime: event.currentTime });
-    }
-  };
-  private _onLoadedMetadata = (event: LoadedMetadataEvent) => this.setState({ duration: event.duration });
-  private _onDurationChange = (event: DurationChangeEvent) => this.setState({ duration: event.duration });
-  private _onProgress = (event: ProgressEvent) => this.setState({ seekable: event.seekable });
-
-  private _onSlidingStart = (value: number) => {
-    this.setState({ sliderTime: value });
-    this._prepareSeekStart();
-    const player = (this.context as UiContext).player;
-    if (!player.paused) {
-      this.debounceSeek(value);
-      player.pause();
-      this.setState({ pausedDueToScrubbing: true });
-    }
-  };
-
-  private _onValueChange = (value: number) => {
-    this.setState({ sliderTime: value });
-    if (this.state.ignoreTimeupdate) {
-      this.debounceSeek(value);
-    }
-  };
-
-  private _onSlidingComplete = (value: number) => {
-    this.setState({ sliderTime: value });
-    this.debounceSeek(value, true);
-    const player = (this.context as UiContext).player;
-    const isEnded = player.currentTime === player.duration;
-    if (this.state.pausedDueToScrubbing && !isEnded) {
-      player.play();
-      this.setState({ pausedDueToScrubbing: false });
-    }
-    this._finishSeek();
-  };
-
-  private readonly _prepareSeekStart = () => {
-    this.setState({ isSeeking: true, ignoreTimeupdate: true });
-    clearTimeout(this._clearIsScrubbingTimout);
-  };
-
-  private readonly _finishSeek = () => {
-    this.setState({ isSeeking: false });
-    // Wait for timeupdate events to settle after seeking, so the Slider does not jump back and forth.
-    this._clearIsScrubbingTimout = setTimeout(() => {
-      this.setState({ ignoreTimeupdate: false });
-    }, 1000);
-  };
-
-  private debounceSeek = (value: number, force = false) => {
-    // Don't bombard the player with seeks when seeking. Allow only one seek ever X milliseconds:
-    const MAX_SEEK_INTERVAL = 200;
-    if (force || this._seekBlockingTimeout === undefined) {
-      if (force) {
-        clearTimeout(this._seekBlockingTimeout);
-        this._seekBlockingTimeout = undefined;
-      }
-      this._seekBlockingTimeout = setTimeout(() => {
-        this._seekBlockingTimeout = undefined;
-      }, MAX_SEEK_INTERVAL);
-      // Do seek
-      const player = (this.context as UiContext).player;
-      player.currentTime = value;
-    }
-  };
-
-  render() {
-    const { seekable, sliderTime, duration, isSeeking, width } = this.state;
-    const { style } = this.props;
-    const seekableStart = seekable.length > 0 ? seekable[0].start : 0;
-    const seekableEnd = seekable.length > 0 ? seekable[0].end : 0;
-    return (
-      <PlayerContext.Consumer>
-        {(context: UiContext) => (
-          <View
-            style={[StyleSheet.absoluteFill, style]}
-            onLayout={(event: LayoutChangeEvent) => {
-              this.setState({ width: event.nativeEvent.layout.width });
-            }}>
-            {isSeeking && (
-              <SingleThumbnailView seekableStart={seekableStart} seekableEnd={seekableEnd} currentTime={sliderTime} seekBarWidth={width} />
-            )}
-            <Slider
-              disabled={!(duration > 0) && seekable.length > 0}
-              style={[StyleSheet.absoluteFill, style]}
-              minimumValue={seekableStart}
-              maximumValue={seekableEnd}
-              step={1000}
-              onSlidingStart={this._onSlidingStart}
-              onValueChange={this._onValueChange}
-              onSlidingComplete={this._onSlidingComplete}
-              value={sliderTime}
-              focusable={true}
-              minimumTrackTintColor={context.style.colors.seekBarMinimum}
-              maximumTrackTintColor={context.style.colors.seekBarMaximum}
-              thumbTintColor={context.style.colors.seekBarDot}
-            />
-          </View>
-        )}
-      </PlayerContext.Consumer>
-    );
-  }
-}
-
-SeekBar.contextType = PlayerContext;

package/src/ui/components/seekbar/barrel.ts

@@ -1,2 +0,0 @@
-export * from './SeekBar';
-export * from './thumbnail/barrel';

package/src/ui/components/seekbar/thumbnail/SingleThumbnailView.tsx

@@ -1,38 +0,0 @@
-import { Dimensions, View } from 'react-native';
-import { filterThumbnailTracks } from 'react-native-theoplayer';
-import { PlayerContext } from '../../util/PlayerContext';
-import { ThumbnailView } from './ThumbnailView';
-import React, { useContext } from 'react';
-
-export interface ThumbnailViewProps {
-  seekableStart: number;
-  seekableEnd: number;
-  currentTime: number;
-  seekBarWidth: number;
-}
-
-export function SingleThumbnailView(props: ThumbnailViewProps) {
-  const player = useContext(PlayerContext).player;
-  const thumbnailTrack = filterThumbnailTracks(player.textTracks);
-  if (!thumbnailTrack) {
-    return <></>;
-  }
-  const window = Dimensions.get('window');
-  const thumbnailSize = 0.35 * Math.min(window.height, window.width);
-
-  const { seekableStart, seekableEnd, currentTime, seekBarWidth } = props;
-  const percentageOffset = (currentTime - seekableStart) / (seekableEnd - seekableStart);
-  const marginHorizontal = 10;
-
-  return (
-    <View
-      style={{
-        position: 'absolute',
-        top: -(thumbnailSize * 0.6),
-        left: Math.max(0, Math.min(seekBarWidth - thumbnailSize - marginHorizontal, percentageOffset * seekBarWidth - 0.5 * thumbnailSize)),
-        marginHorizontal,
-      }}>
-      <ThumbnailView thumbnailTrack={thumbnailTrack} duration={player.duration} time={currentTime} size={thumbnailSize} showTimeLabel={false} />
-    </View>
-  );
-}

package/src/ui/components/seekbar/thumbnail/Thumbnail.ts

@@ -1,72 +0,0 @@
-export function isTileMapThumbnail(thumbnail: Thumbnail): thumbnail is TileMapThumbnail {
-  return thumbnail.tileX !== undefined && thumbnail.tileY !== undefined && thumbnail.tileWidth !== undefined && thumbnail.tileHeight !== undefined;
-}
-
-export function isImageThumbnail(thumbnail: Thumbnail): thumbnail is ImageThumbnail {
-  return !isTileMapThumbnail(thumbnail);
-}
-
-/**
- * Description of a thumbnail, which can be either a full image or part of a tile map.
- */
-export interface Thumbnail {
-  /**
-   * The url of the thumbnail image.
-   */
-  url: string;
-
-  /**
-   * Horizontal offset within the tile map in case the thumbnail is part of tile map.
-   */
-  tileX?: number;
-
-  /**
-   * Vertical offset within the tile map in case the thumbnail is part of tile map.
-   */
-  tileY?: number;
-
-  /**
-   * Width of a tile in case the thumbnail is part of tile map.
-   */
-  tileWidth?: number;
-
-  /**
-   * Height of a tile in case the thumbnail is part of tile map.
-   */
-  tileHeight?: number;
-}
-
-/**
- * Description of a tile-map thumbnail.
- */
-export interface TileMapThumbnail extends Thumbnail {
-  /**
-   * The url of the thumbnail image.
-   */
-  url: string;
-
-  /**
-   * Horizontal offset within the tile map in case the thumbnail is part of tile map.
-   */
-  tileX: number;
-
-  /**
-   * Vertical offset within the tile map in case the thumbnail is part of tile map.
-   */
-  tileY: number;
-
-  /**
-   * Width of a tile in case the thumbnail is part of tile map.
-   */
-  tileWidth: number;
-
-  /**
-   * Height of a tile in case the thumbnail is part of tile map.
-   */
-  tileHeight: number;
-}
-
-/**
- * Description of a tile-map thumbnail.
- */
-export type ImageThumbnail = Thumbnail;

package/src/ui/components/seekbar/thumbnail/ThumbnailView.tsx

@@ -1,266 +0,0 @@
-import React, { PureComponent } from 'react';
-import { Image, StyleProp, View, ViewStyle } from 'react-native';
-import type { TextTrackCue } from 'react-native-theoplayer';
-import { isThumbnailTrack, StaticTimeLabel, TextTrack } from 'react-native-theoplayer';
-import type { Thumbnail } from './Thumbnail';
-import { isTileMapThumbnail } from './Thumbnail';
-import { URL as URLPolyfill } from './Urlpolyfill';
-
-const SPRITE_REGEX = /^([^#]*)#xywh=(\d+),(\d+),(\d+),(\d+)\s*$/;
-const TAG = 'ThumbnailView';
-
-interface ThumbnailViewState {
-  imageWidth: number;
-  imageHeight: number;
-  renderWidth: number;
-  renderHeight: number;
-}
-
-export interface ThumbnailViewProps {
-  /**
-   * Thumbnail track. A valid thumbnail track should have properties:
-   * <br/> - `'kind'` equals `'metadata'`.
-   * <br/> - `'label'` equals `'thumbnails'`.
-   */
-  thumbnailTrack: TextTrack;
-
-  /**
-   * Current time.
-   */
-  time: number;
-
-  /**
-   * Stream duration
-   */
-  duration: number;
-
-  /**
-   * Whether to show a time label.
-   */
-  showTimeLabel: boolean;
-
-  /**
-   * Used to set the width of the rendered thumbnail. The height will be calculated according to the image's aspect ratio.
-   */
-  size: number;
-
-  /**
-   * Optional style applied to the time label.
-   */
-  timeLabelStyle?: StyleProp<ViewStyle>;
-}
-
-export const DEFAULT_THUMBNAIL_VIEW_STYLE: ThumbnailStyle = {
-  containerThumbnail: {
-    alignItems: 'center',
-    flexDirection: 'row',
-  },
-  thumbnail: {
-    overflow: 'hidden',
-    backgroundColor: 'transparent',
-  },
-};
-
-export interface ThumbnailStyle {
-  containerThumbnail: ViewStyle;
-  thumbnail: ViewStyle;
-}
-
-export class ThumbnailView extends PureComponent<ThumbnailViewProps, ThumbnailViewState> {
-  static defaultProps = {
-    showTimeLabel: true,
-  };
-  private _ismounted = false;
-
-  constructor(props: ThumbnailViewProps) {
-    super(props);
-    const { size } = props;
-    this.state = { imageWidth: size, imageHeight: size, renderWidth: size, renderHeight: 1 };
-  }
-
-  componentDidMount() {
-    this._ismounted = true;
-  }
-
-  componentWillUnmount() {
-    this._ismounted = false;
-  }
-
-  private getCueIndexAtTime(time: number): number | undefined {
-    const { thumbnailTrack } = this.props;
-
-    // Ignore if it's an invalid track or not a thumbnail track.
-    if (!isThumbnailTrack(thumbnailTrack)) {
-      console.warn(TAG, 'Invalid thumbnail track');
-      return undefined;
-    }
-
-    // Ignore if the track does not have cues
-    if (thumbnailTrack.cues == null || thumbnailTrack.cues.length == 0) {
-      return undefined;
-    }
-
-    const cues = thumbnailTrack.cues;
-    let cueIndex = 0;
-    for (const [index, cue] of cues.entries()) {
-      if (cue.startTime <= time) {
-        cueIndex = index;
-      } else if (time >= cue.endTime) {
-        return cueIndex;
-      }
-    }
-    return cueIndex;
-  }
-
-  private resolveThumbnailUrl(thumbnail: string): string {
-    const { thumbnailTrack } = this.props;
-    // NOTE: TextTrack.src is supported in Android SDK as of 3.5+
-    if (thumbnailTrack && thumbnailTrack.src) {
-      return new URLPolyfill(thumbnail, thumbnailTrack.src).href;
-    } else {
-      return thumbnail;
-    }
-  }
-
-  private getThumbnailImageForCue(cue: TextTrackCue): Thumbnail | null {
-    const thumbnailContent = cue && cue.content;
-    if (!thumbnailContent) {
-      // Cue does not contain any thumbnail info.
-      return null;
-    }
-    const spriteMatch = thumbnailContent.match(SPRITE_REGEX);
-    if (spriteMatch) {
-      // The thumbnail is part of a tile.
-      const [, url, x, y, w, h] = spriteMatch;
-      return {
-        tileX: +x,
-        tileY: +y,
-        tileWidth: +w,
-        tileHeight: +h,
-        url: this.resolveThumbnailUrl(url),
-      };
-    } else {
-      // The thumbnail is a separate image.
-      return {
-        url: this.resolveThumbnailUrl(thumbnailContent),
-      };
-    }
-  }
-
-  private onTileImageLoad = (thumbnail: Thumbnail) => () => {
-    if (!this._ismounted) {
-      return;
-    }
-    const { size } = this.props;
-    const { tileWidth, tileHeight } = thumbnail;
-    if (tileWidth && tileHeight) {
-      Image.getSize(thumbnail.url, (width: number, height: number) => {
-        this.setState({
-          imageWidth: width,
-          imageHeight: height,
-          renderWidth: size,
-          renderHeight: (tileHeight * size) / tileWidth,
-        });
-      });
-    }
-  };
-
-  private onImageLoadError = (event: any) => {
-    console.error(TAG, 'Failed to load thumbnail url:', event.nativeEvent.error);
-  };
-
-  private onImageLoad = (thumbnail: Thumbnail) => () => {
-    if (!this._ismounted) {
-      return;
-    }
-    const { size } = this.props;
-    Image.getSize(thumbnail.url, (width: number, height: number) => {
-      this.setState({
-        imageWidth: width,
-        imageHeight: height,
-        renderWidth: size,
-        renderHeight: (height * size) / width,
-      });
-    });
-  };
-
-  private renderThumbnail = (thumbnail: Thumbnail, index: number) => {
-    const { imageWidth, imageHeight, renderWidth, renderHeight } = this.state;
-    const { size } = this.props;
-    const scale = 1.0;
-
-    if (isTileMapThumbnail(thumbnail)) {
-      const ratio = thumbnail.tileWidth == 0 ? 0 : (scale * size) / thumbnail.tileWidth;
-      return (
-        <View key={index} style={[DEFAULT_THUMBNAIL_VIEW_STYLE.thumbnail, { width: scale * renderWidth, height: scale * renderHeight }]}>
-          <Image
-            resizeMode={'cover'}
-            style={{
-              position: 'absolute',
-              top: -ratio * thumbnail.tileY,
-              left: -ratio * thumbnail.tileX,
-              width: ratio * imageWidth,
-              height: ratio * imageHeight,
-            }}
-            source={{ uri: thumbnail.url }}
-            onError={this.onImageLoadError}
-            onLoad={this.onTileImageLoad(thumbnail)}
-          />
-        </View>
-      );
-    } else {
-      return (
-        <View key={index} style={[DEFAULT_THUMBNAIL_VIEW_STYLE.thumbnail, { width: scale * renderWidth, height: scale * renderHeight }]}>
-          <Image
-            resizeMode={'contain'}
-            style={{ width: scale * size, height: scale * renderHeight }}
-            source={{ uri: thumbnail.url }}
-            onError={this.onImageLoadError}
-            onLoad={this.onImageLoad(thumbnail)}
-          />
-        </View>
-      );
-    }
-  };
-
-  render() {
-    const { time, duration, thumbnailTrack, showTimeLabel, timeLabelStyle } = this.props;
-    if (!thumbnailTrack || !thumbnailTrack.cues || thumbnailTrack.cues.length === 0) {
-      // No thumbnails to render.
-      return <></>;
-    }
-
-    const nowCueIndex = this.getCueIndexAtTime(time);
-    if (nowCueIndex === undefined) {
-      // No thumbnail for current time
-      return <></>;
-    }
-
-    const current = this.getThumbnailImageForCue(thumbnailTrack.cues[nowCueIndex]);
-    if (current === null) {
-      // No thumbnail for current time
-      return <></>;
-    }
-    const { renderHeight } = this.state;
-    return (
-      <View style={{ flexDirection: 'column' }}>
-        {showTimeLabel && (
-          <StaticTimeLabel
-            style={[
-              {
-                marginLeft: 20,
-                height: 20,
-                alignSelf: 'center',
-              },
-              timeLabelStyle,
-            ]}
-            time={time}
-            duration={duration}
-            showDuration={false}
-          />
-        )}
-        <View style={[DEFAULT_THUMBNAIL_VIEW_STYLE.containerThumbnail, { height: renderHeight }]}>{this.renderThumbnail(current, 0)}</View>
-      </View>
-    );
-  }
-}

package/src/ui/components/seekbar/thumbnail/Urlpolyfill.ts

@@ -1 +0,0 @@
-export * from 'react-native-url-polyfill';

package/src/ui/components/seekbar/thumbnail/Urlpolyfill.web.ts

@@ -1,3 +0,0 @@
-import 'url-polyfill';
-const URL = global.URL;
-export { URL };

package/src/ui/components/seekbar/thumbnail/barrel.ts

@@ -1,2 +0,0 @@
-export * from './SingleThumbnailView';
-export * from './Thumbnail';

package/src/ui/components/timelabel/StaticTimeLabel.tsx

@@ -1,63 +0,0 @@
-import { StyleProp, Text, TextStyle } from 'react-native';
-import React from 'react';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-
-export interface StaticTimeLabelProps {
-  /**
-   * Whether to show the duration of the current source.
-   */
-  showDuration: boolean;
-  /**
-   * The style overrides.
-   */
-  style?: StyleProp<TextStyle>;
-  /**
-   * The current time of the player
-   */
-  time: number;
-  /**
-   * The duration of the current source.
-   */
-  duration: number;
-}
-
-const LIVE_LABEL = 'LIVE';
-
-/**
- * A static time label for the `react-native-theoplayer` UI.
- */
-export function StaticTimeLabel(props: StaticTimeLabelProps) {
-  const { style, showDuration, time, duration } = props;
-
-  // An unknown duration is reported as NaN.
-  if (isNaN(duration)) {
-    return <></>;
-  }
-
-  // Live streams report an Infinity duration.
-  if (!isFinite(duration)) {
-    return (
-      <PlayerContext.Consumer>
-        {(context: UiContext) => <Text style={[context.style.text, { color: context.style.colors.text }, style]}>{LIVE_LABEL}</Text>}
-      </PlayerContext.Consumer>
-    );
-  }
-
-  try {
-    let currentTimeLabel = new Date(time).toISOString().substring(11, 19);
-    let durationLabel = new Date(duration).toISOString().substring(11, 19);
-    if (durationLabel.startsWith('00:')) {
-      // Don't render hours if not needed.
-      currentTimeLabel = currentTimeLabel.slice(3);
-      durationLabel = durationLabel.slice(3);
-    }
-    const label = showDuration ? `${currentTimeLabel} / ${durationLabel}` : currentTimeLabel;
-    return (
-      <PlayerContext.Consumer>
-        {(context: UiContext) => <Text style={[context.style.text, { color: context.style.colors.text }, style]}>{label}</Text>}
-      </PlayerContext.Consumer>
-    );
-  } catch (ignore) {
-    return <></>;
-  }
-}