react-native-theoplayer 2.7.0 → 2.9.0

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,2 +0,0 @@
-// @ts-ignore
-export * from 'url-polyfill';

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 <></>;
-  }
-}

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

@@ -1,79 +0,0 @@
-import type { StyleProp, TextStyle } from 'react-native';
-import React, { PureComponent } from 'react';
-import { DurationChangeEvent, PlayerEventType, TimeUpdateEvent } from 'react-native-theoplayer';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import { StaticTimeLabel } from './StaticTimeLabel';
-
-export interface TimeLabelProps {
-  /**
-   * Whether to show the duration of the player.
-   */
-  showDuration: boolean;
-  /**
-   * The style overrides.
-   */
-  style?: StyleProp<TextStyle>;
-}
-
-export interface TimeLabelState {
-  currentTime: number;
-  duration: number;
-}
-
-/**
- * The default style for the time label.
- */
-export const DEFAULT_TIME_LABEL_STYLE: TextStyle = {
-  marginLeft: 10,
-  marginRight: 10,
-  height: 20,
-  alignSelf: 'center',
-};
-
-/**
- * The default time label component for the `react-native-theoplayer` UI.
- */
-export class TimeLabel extends PureComponent<TimeLabelProps, TimeLabelState> {
-  private static initialState: TimeLabelState = {
-    currentTime: 0.0,
-    duration: 0,
-  };
-
-  constructor(props: TimeLabelProps) {
-    super(props);
-    this.state = TimeLabel.initialState;
-  }
-
-  componentDidMount() {
-    const player = (this.context as UiContext).player;
-    player.addEventListener(PlayerEventType.TIME_UPDATE, this.onTimeUpdate);
-    player.addEventListener(PlayerEventType.DURATION_CHANGE, this.onDurationChange);
-    this.setState({ currentTime: player.currentTime, duration: player.duration });
-  }
-
-  componentWillUnmount() {
-    const player = (this.context as UiContext).player;
-    player.removeEventListener(PlayerEventType.TIME_UPDATE, this.onTimeUpdate);
-    player.removeEventListener(PlayerEventType.DURATION_CHANGE, this.onDurationChange);
-  }
-
-  private onTimeUpdate = (event: TimeUpdateEvent) => {
-    const { currentTime } = event;
-    this.setState({ currentTime });
-  };
-
-  private onDurationChange = (event: DurationChangeEvent) => {
-    const { duration } = event;
-    this.setState({ duration });
-  };
-
-  render() {
-    const { currentTime, duration } = this.state;
-    const { style, showDuration } = this.props;
-    return (
-      <StaticTimeLabel showDuration={showDuration} time={currentTime} duration={duration} style={[DEFAULT_TIME_LABEL_STYLE, style]}></StaticTimeLabel>
-    );
-  }
-}
-
-TimeLabel.contextType = PlayerContext;

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

@@ -1,2 +0,0 @@
-export * from './StaticTimeLabel';
-export * from './TimeLabel';