react-native-theoplayer 2.8.0 → 2.9.0

package/src/ui/components/button/MuteButton.tsx

@@ -1,52 +0,0 @@
-import { ActionButton } from './actionbutton/ActionButton';
-import React, { PureComponent } from 'react';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import { PlayerEventType, VolumeChangeEvent } from 'react-native-theoplayer';
-import { Platform } from 'react-native';
-import { VolumeOffSvg } from './svg/VolumeOffSvg';
-import { VolumeUpSvg } from './svg/VolumeUpSvg';
-
-interface MuteButtonState {
-  muted: boolean;
-}
-
-/**
- * The default mute button for the `react-native-theoplayer` UI.
- */
-export class MuteButton extends PureComponent<unknown, MuteButtonState> {
-  constructor(props: unknown) {
-    super(props);
-    this.state = { muted: false };
-  }
-
-  componentDidMount() {
-    const player = (this.context as UiContext).player;
-    player.addEventListener(PlayerEventType.VOLUME_CHANGE, this.onVolumeChange);
-    this.setState({ muted: player.muted });
-  }
-
-  componentWillUnmount() {
-    const player = (this.context as UiContext).player;
-    player.removeEventListener(PlayerEventType.VOLUME_CHANGE, this.onVolumeChange);
-  }
-
-  private onVolumeChange = (_: VolumeChangeEvent) => {
-    const player = (this.context as UiContext).player;
-    this.setState({ muted: player.muted });
-  };
-
-  private toggleMuted = () => {
-    const player = (this.context as UiContext).player;
-    player.muted = !player.muted;
-  };
-
-  render() {
-    const { muted } = this.state;
-    if (Platform.isTV) {
-      return <></>;
-    }
-    return <ActionButton svg={muted ? <VolumeOffSvg /> : <VolumeUpSvg />} onPress={this.toggleMuted} touchable={true} />;
-  }
-}
-
-MuteButton.contextType = PlayerContext;

package/src/ui/components/button/PipButton.tsx

@@ -1,61 +0,0 @@
-import React, { PureComponent } from 'react';
-import type { PresentationModeChangeEvent } from 'react-native-theoplayer';
-import { PlayerEventType, PresentationMode } from 'react-native-theoplayer';
-import { Platform } from 'react-native';
-import { ActionButton } from './actionbutton/ActionButton';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import { PipExitSvg } from './svg/PipExitSvg';
-import { PipEnterSvg } from './svg/PipEnterSvg';
-
-interface PipButtonState {
-  presentationMode: PresentationMode;
-}
-
-/**
- * The default button to enable picture-in-picture for the `react-native-theoplayer` UI.
- */
-export class PipButton extends PureComponent<unknown, PipButtonState> {
-  constructor(props: unknown) {
-    super(props);
-    this.state = { presentationMode: PresentationMode.inline };
-  }
-
-  componentDidMount() {
-    const player = (this.context as UiContext).player;
-    player.addEventListener(PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);
-    this.setState({ presentationMode: player.presentationMode });
-  }
-
-  componentWillUnmount() {
-    const player = (this.context as UiContext).player;
-    player.removeEventListener(PlayerEventType.PRESENTATIONMODE_CHANGE, this.onPresentationModeChange);
-  }
-
-  private readonly onPresentationModeChange = (event: PresentationModeChangeEvent) => {
-    this.setState({ presentationMode: event.presentationMode });
-  };
-
-  private togglePip = () => {
-    const player = (this.context as UiContext).player;
-    switch (player.presentationMode) {
-      case 'inline':
-      case 'fullscreen':
-        player.presentationMode = PresentationMode.pip;
-        break;
-      case 'picture-in-picture':
-        player.presentationMode = PresentationMode.inline;
-        break;
-    }
-  };
-
-  render() {
-    if (Platform.isTV) {
-      return <></>;
-    }
-    const { presentationMode } = this.state;
-
-    return <ActionButton svg={presentationMode === 'picture-in-picture' ? <PipExitSvg /> : <PipEnterSvg />} onPress={this.togglePip} />;
-  }
-}
-
-PipButton.contextType = PlayerContext;

package/src/ui/components/button/PlayButton.tsx

@@ -1,107 +0,0 @@
-import { ActionButton } from './actionbutton/ActionButton';
-import type { StyleProp, ViewStyle } from 'react-native';
-import React, { PureComponent } from 'react';
-import { PlayerEventType } from 'react-native-theoplayer';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import { PlaySvg } from './svg/PlaySvg';
-
-import { PauseSvg } from './svg/PauseSvg';
-import { ReplaySvg } from './svg/ReplaySvg';
-
-interface PlayButtonProps {
-  /**
-   * The style overrides for the play/pause button.
-   */
-  style?: StyleProp<ViewStyle>;
-}
-
-interface PlayButtonState {
-  paused: boolean;
-  ended: boolean;
-}
-
-/**
- * The default play/pause button for the `react-native-theoplayer` UI.
- */
-export class PlayButton extends PureComponent<PlayButtonProps, PlayButtonState> {
-  constructor(props: PlayButtonProps) {
-    super(props);
-    this.state = {
-      paused: true,
-      ended: false,
-    };
-  }
-
-  componentDidMount() {
-    const context = this.context as UiContext;
-    context.player.addEventListener(PlayerEventType.PLAY, this.onPlay);
-    context.player.addEventListener(PlayerEventType.PLAYING, this.onPlay);
-    context.player.addEventListener(PlayerEventType.PAUSE, this.onPause);
-    context.player.addEventListener(PlayerEventType.SOURCE_CHANGE, this.onSourceChange);
-    context.player.addEventListener(PlayerEventType.ENDED, this.onEnded);
-    context.player.addEventListener(PlayerEventType.SEEKING, this.onSeeking);
-    this.setState({
-      paused: context.player.paused,
-      ended: context.player.currentTime === context.player.duration,
-    });
-  }
-
-  componentWillUnmount() {
-    const context = this.context as UiContext;
-    context.player.removeEventListener(PlayerEventType.PLAY, this.onPlay);
-    context.player.removeEventListener(PlayerEventType.PLAYING, this.onPlay);
-    context.player.removeEventListener(PlayerEventType.PAUSE, this.onPause);
-    context.player.removeEventListener(PlayerEventType.SOURCE_CHANGE, this.onSourceChange);
-    context.player.removeEventListener(PlayerEventType.ENDED, this.onEnded);
-    context.player.removeEventListener(PlayerEventType.SEEKING, this.onSeeking);
-  }
-
-  private onPlay = () => {
-    const player = (this.context as UiContext).player;
-    if (player.seeking) {
-      return;
-    }
-    this.setState({ paused: false, ended: false });
-  };
-
-  private onPause = () => {
-    const player = (this.context as UiContext).player;
-    if (player.seeking) {
-      return;
-    }
-    this.setState({ paused: true });
-  };
-
-  private onSourceChange = () => {
-    const player = (this.context as UiContext).player;
-    this.setState({ paused: player.paused });
-  };
-
-  private onEnded = () => {
-    this.setState({ ended: true });
-  };
-
-  private onSeeking = () => {
-    this.setState({ ended: false });
-  };
-
-  private togglePlayPause = () => {
-    const player = (this.context as UiContext).player;
-    if (player.paused) {
-      player.play();
-    } else {
-      player.pause();
-    }
-  };
-
-  render() {
-    const { paused, ended } = this.state;
-    const { style } = this.props;
-
-    return (
-      <ActionButton style={style} touchable={true} svg={ended ? <ReplaySvg /> : paused ? <PlaySvg /> : <PauseSvg />} onPress={this.togglePlayPause} />
-    );
-  }
-}
-
-PlayButton.contextType = PlayerContext;

package/src/ui/components/button/SkipButton.tsx

@@ -1,112 +0,0 @@
-import { ActionButton } from './actionbutton/ActionButton';
-import React, { PureComponent } from 'react';
-import { PlayerContext, UiContext } from '../util/PlayerContext';
-import { ForwardSvg } from './svg/ForwardSvg';
-import type { StyleProp, ViewStyle } from 'react-native';
-import { Animated, Easing, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
-import { BackwardSvg } from './svg/BackwardSvg';
-import { PlayerEventType, ProgressEvent } from 'react-native-theoplayer';
-
-interface SkipButtonProps {
-  /**
-   * The style overrides for the skip button.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * The skip value for the skip button. This can be set to negative to skip backwards.
-   */
-  skip: number;
-  /**
-   * Whether the skip button should do a rotation animation when pressed instead of fading.
-   */
-  rotate?: boolean;
-}
-
-interface SkipButtonState {
-  enabled: boolean;
-  spinValue: Animated.Value;
-}
-
-/**
- * The default skip button for the `react-native-theoplayer` UI.
- */
-export class SkipButton extends PureComponent<SkipButtonProps, SkipButtonState> {
-  constructor(props: SkipButtonProps) {
-    super(props);
-    this.state = { enabled: false, spinValue: new Animated.Value(0) };
-  }
-
-  componentDidMount() {
-    const player = (this.context as UiContext).player;
-    player.addEventListener(PlayerEventType.PROGRESS, this.onTimeupdate);
-    this.setState({ enabled: player.seekable.length > 0 });
-  }
-
-  componentWillUnmount() {
-    const player = (this.context as UiContext).player;
-    player.removeEventListener(PlayerEventType.PROGRESS, this.onTimeupdate);
-  }
-
-  private readonly onTimeupdate = (event: ProgressEvent) => {
-    this.setState({ enabled: event.seekable.length > 0 });
-  };
-
-  private readonly onPress = () => {
-    const { skip, rotate } = this.props;
-    const { spinValue } = this.state;
-    const player = (this.context as UiContext).player;
-    player.currentTime = player.currentTime + skip * 1e3;
-
-    if (rotate === true) {
-      Animated.timing(spinValue, {
-        toValue: 0.1,
-        duration: 100,
-        easing: Easing.linear,
-        useNativeDriver: true,
-      }).start(() => {
-        Animated.timing(spinValue, {
-          toValue: 0,
-          duration: 100,
-          easing: Easing.linear,
-          useNativeDriver: true,
-        }).start();
-      });
-    }
-  };
-
-  render() {
-    const { style, skip, rotate } = this.props;
-    const { enabled, spinValue } = this.state;
-
-    if (!enabled) {
-      return <></>;
-    }
-
-    const spin = spinValue.interpolate({
-      inputRange: [0, 1],
-      outputRange: skip >= 0 ? ['0deg', '360deg'] : ['360deg', '0deg'],
-    });
-
-    return (
-      <>
-        <PlayerContext.Consumer>
-          {(context: UiContext) => (
-            <Animated.View style={[{ height: '100%', aspectRatio: 1 }, style, { transform: [{ rotate: spin }] }]}>
-              <TouchableOpacity
-                activeOpacity={rotate === true ? 1 : 0.2}
-                style={[{ height: '100%', aspectRatio: 1, justifyContent: 'center' }, style]}
-                onPress={this.onPress}>
-                <ActionButton touchable={false} svg={skip < 0 ? <BackwardSvg /> : <ForwardSvg />} />
-                <View style={[StyleSheet.absoluteFill, { justifyContent: 'center' }]}>
-                  <Text style={[context.style.text, { color: context.style.colors.text }]}>{Math.abs(skip)}</Text>
-                </View>
-              </TouchableOpacity>
-            </Animated.View>
-          )}
-        </PlayerContext.Consumer>
-      </>
-    );
-  }
-}
-
-SkipButton.contextType = PlayerContext;

package/src/ui/components/button/actionbutton/ActionButton.tsx

@@ -1,105 +0,0 @@
-import { Image, ImageSourcePropType, Platform, StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native';
-import React, { ReactNode, useContext, useState } from 'react';
-import { SvgContext } from '../svg/SvgUtils';
-import { PlayerContext, UiContext } from '../../util/PlayerContext';
-
-export interface ActionButtonProps {
-  /**
-   * The image to put in the button.
-   */
-  icon?: ImageSourcePropType;
-  /**
-   * The SVG component to put in the button. Takes priority over images.
-   */
-  svg?: ReactNode;
-  /**
-   * Whether the button should be touchable. This is `true` by default.
-   */
-  touchable: boolean;
-  /**
-   * The callback when the button is pressed.
-   */
-  onPress?: () => void;
-  /**
-   * The styling overrides.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Whether the button should be highlighted with `ColorTheme.iconSelected` color.
-   */
-  highlighted?: boolean;
-}
-
-/**
- * The default style applied to the ActionButton
- */
-export const DEFAULT_ACTION_BUTTON_STYLE: ViewStyle = {
-  height: '100%',
-  aspectRatio: 1,
-  padding: 5,
-};
-
-/**
- * The default button component that renders an image/svg source for the `react-native-theoplayer` UI.
- */
-export const ActionButton = (props: ActionButtonProps) => {
-  const { icon, style, touchable, svg, onPress, highlighted } = props;
-  const [focused, setFocused] = useState<boolean>(false);
-  const context = useContext(PlayerContext);
-
-  const shouldChangeTintColor = highlighted || (focused && Platform.isTV);
-
-  if (!touchable) {
-    return <View style={[DEFAULT_ACTION_BUTTON_STYLE, style]}>{svg}</View>;
-  }
-
-  const onTouch = () => {
-    if (context.ui.buttonsEnabled_) {
-      onPress?.();
-    }
-    context.ui.onUserAction_();
-  };
-
-  return (
-    <PlayerContext.Consumer>
-      {(context: UiContext) => (
-        <TouchableOpacity
-          style={[DEFAULT_ACTION_BUTTON_STYLE, style]}
-          tvParallaxProperties={{ enabled: false }}
-          onPress={onTouch}
-          onFocus={() => {
-            context.ui.onUserAction_();
-            setFocused(true);
-          }}
-          onBlur={() => {
-            setFocused(false);
-          }}>
-          {/* Give priority to SVG over image sources.*/}
-          {svg && (
-            <SvgContext.Provider
-              value={{
-                fill: shouldChangeTintColor ? context.style.colors.iconSelected : context.style.colors.icon,
-                height: '100%',
-                width: '100%',
-              }}>
-              <View>{svg}</View>
-            </SvgContext.Provider>
-          )}
-          {svg === undefined && icon && (
-            <Image
-              style={[
-                { height: '100%', width: '100%' },
-                { tintColor: shouldChangeTintColor ? context.style.colors.iconSelected : context.style.colors.icon },
-              ]}
-              source={icon}
-            />
-          )}
-        </TouchableOpacity>
-      )}
-    </PlayerContext.Consumer>
-  );
-};
-
-ActionButton.defaultProps = {
-  touchable: true,
-};

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

@@ -1,9 +0,0 @@
-export * from './actionbutton/ActionButton';
-export * from './svg/barrel';
-export * from './AirplayButton';
-export * from './ChromecastButton';
-export * from './FullscreenButton';
-export * from './MuteButton';
-export * from './PipButton';
-export * from './PlayButton';
-export * from './SkipButton';

package/src/ui/components/button/svg/AirplaySvg.tsx

@@ -1,18 +0,0 @@
-import type { SvgProps } from 'react-native-svg';
-import Svg, { Path } from 'react-native-svg';
-import React from 'react';
-import { SvgContext } from './SvgUtils';
-
-export const AirplaySvg = (props: SvgProps) => {
-  return (
-    <SvgContext.Consumer>
-      {(context) => (
-        <>
-          <Svg viewBox={'0 96 960 960'} {...context} {...props}>
-            <Path d="m273 936 207-206 206 206H273Zm-133-80q-24 0-42-18t-18-42V276q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H631v-60h189V276H140v520h189v60H140Zm340-290Z" />
-          </Svg>
-        </>
-      )}
-    </SvgContext.Consumer>
-  );
-};

package/src/ui/components/button/svg/ArrowForwardSvg.tsx

@@ -1,18 +0,0 @@
-import type { SvgProps } from 'react-native-svg';
-import Svg, { Path } from 'react-native-svg';
-import React from 'react';
-import { SvgContext } from './SvgUtils';
-
-export const ArrowForwardSvg = (props: SvgProps) => {
-  return (
-    <SvgContext.Consumer>
-      {(context) => (
-        <>
-          <Svg viewBox={'0 0 24 24'} {...context} {...props}>
-            <Path d="M6.925 21.325q-.45-.45-.45-1.113 0-.662.45-1.112l7.1-7.1L6.9 4.875q-.45-.45-.462-1.1-.013-.65.462-1.125.475-.45 1.125-.45t1.1.45l8.425 8.425q.2.2.287.437.088.238.088.488t-.088.488q-.087.237-.287.437L9.125 21.35q-.45.45-1.087.45-.638 0-1.113-.475Z" />
-          </Svg>
-        </>
-      )}
-    </SvgContext.Consumer>
-  );
-};

package/src/ui/components/button/svg/BackSvg.tsx

@@ -1,18 +0,0 @@
-import type { SvgProps } from 'react-native-svg';
-import Svg, { Path } from 'react-native-svg';
-import React from 'react';
-import { SvgContext } from './SvgUtils';
-
-export const BackSvg = (props: SvgProps) => {
-  return (
-    <SvgContext.Consumer>
-      {(context) => (
-        <>
-          <Svg viewBox={'0 0 24 24'} {...context} {...props}>
-            <Path d="m10.525 19.275-6.375-6.35q-.175-.2-.262-.437Q3.8 12.25 3.8 12t.088-.488q.087-.237.262-.437l6.375-6.35q.375-.375.925-.388.55-.012.95.388.375.4.388.937.012.538-.363.938l-4.1 4.075H18.35q.55 0 .938.387.387.388.387.938 0 .55-.387.938-.388.387-.938.387H8.325l4.1 4.075q.35.375.363.925.012.55-.363.95-.4.4-.95.4-.55 0-.95-.4Z" />
-          </Svg>
-        </>
-      )}
-    </SvgContext.Consumer>
-  );
-};

package/src/ui/components/button/svg/BackwardSvg.tsx

@@ -1,18 +0,0 @@
-import type { SvgProps } from 'react-native-svg';
-import Svg, { Path } from 'react-native-svg';
-import React from 'react';
-import { SvgContext } from './SvgUtils';
-
-export const BackwardSvg = (props: SvgProps) => {
-  return (
-    <SvgContext.Consumer>
-      {(context) => (
-        <>
-          <Svg viewBox={'0 96 960 960'} {...context} {...props}>
-            <Path d="M480 983.174q-144.567 0-248.316-95.478T115.5 651.022q-1.478-13.674 8.098-23.87 9.576-10.195 24.59-10.195 13.334 0 23.149 9.576 9.815 9.576 12.533 24.489 12.195 112.608 96.235 188.195Q364.144 914.804 480 914.804q124.104 0 210.976-86.921 86.872-86.922 86.872-210.926 0-124.283-84.402-211.066-84.403-86.782-208.685-86.782h-22l49.369 49.369q9.718 9.718 9.598 22.196-.119 12.478-9.682 21.717-9.309 9.479-21.788 9.598-12.478.12-22.041-9.359L362.5 306.674q-5.478-5.239-7.837-11.076-2.359-5.837-2.359-12.674t2.37-12.662q2.369-5.825 7.826-11.327l106.478-106.479q8.718-8.478 21.315-8.597 12.598-.12 22.077 8.597 8.478 9.416 8.358 22.045-.119 12.629-8.598 20.869l-55.369 55.369h23q76.326 0 143.076 28.478 66.75 28.479 116.587 78.316t78.315 116.437q28.479 66.6 28.479 142.891T817.79 759.822q-28.427 66.67-78.333 116.58-49.906 49.911-116.569 78.342-66.662 28.43-142.888 28.43Z" />
-          </Svg>
-        </>
-      )}
-    </SvgContext.Consumer>
-  );
-};

package/src/ui/components/button/svg/ChromecastSvg.tsx

@@ -1,18 +0,0 @@
-import type { SvgProps } from 'react-native-svg';
-import Svg, { Path } from 'react-native-svg';
-import React from 'react';
-import { SvgContext } from './SvgUtils';
-
-export const ChromecastSvg = (props: SvgProps) => {
-  return (
-    <SvgContext.Consumer>
-      {(context) => (
-        <>
-          <Svg viewBox={'0 96 960 960'} {...context} {...props}>
-            <Path d="M86.956 910.131h65.699q9.171 0 14.801-6.413 5.631-6.413 4.076-14.067-6.099-32.801-29.132-57.242-23.033-24.442-55.051-30.941-7.654-1.555-14.067 4.076-6.413 5.63-6.413 15.164v69.336q0 8.487 5.8 14.287 5.8 5.8 14.287 5.8Zm179.365 0q14.288 0 23.635-9.565 9.348-9.565 7.348-23.261-10.944-78.191-65.681-134.428-54.737-56.237-131.928-67.181-13.696-2-23.26 7.415-9.566 9.416-9.566 23.411 0 12.13 9.311 23.059 9.312 10.929 24.08 13.332 49.566 9.566 84.913 46.696 35.348 37.131 44.914 87.131 2.403 14.768 12.595 24.08 10.192 9.311 23.639 9.311Zm127.147 0q13.904 0 23.261-9.563 9.358-9.563 8.358-23.444-5.819-64.393-33.105-122.128-27.286-57.735-70.589-101.784-43.303-44.049-100.088-71.892-56.784-27.842-121.43-33.407-13.88-1-23.443 8.53-9.563 9.531-9.563 23.377 0 13.615 9.072 23.615 9.072 10 23.62 12.19 103.526 11.636 174.956 85.018 71.43 73.382 82.858 176.796 1.801 14.298 11.995 23.495 10.195 9.197 24.098 9.197ZM123.477 241.304h692.436q31.74 0 55.762 24.021 24.021 24.022 24.021 55.762v509.826q0 31.507-24.021 55.362-24.022 23.856-55.762 23.856H525.696q-16.706 0-28.158-11.501-11.451-11.502-11.451-28.283 0-16.782 11.451-28.108 11.452-11.326 28.158-11.326h290.217V321.087H146.087v146q-6.783 6.348-16.595 11.674-9.813 5.326-23.514 5.326-16.457 0-27.783-11.452-11.326-11.451-11.326-28.158v-146q0-21.834 16.838-39.504 16.837-17.669 39.77-17.669Zm317.914 363Z" />
-          </Svg>
-        </>
-      )}
-    </SvgContext.Consumer>
-  );
-};

package/src/ui/components/button/svg/ErrorSvg.tsx

@@ -1,18 +0,0 @@
-import type { SvgProps } from 'react-native-svg';
-import Svg, { Path } from 'react-native-svg';
-import React from 'react';
-import { SvgContext } from './SvgUtils';
-
-export const ErrorSvg = (props: SvgProps) => {
-  return (
-    <SvgContext.Consumer>
-      {(context) => (
-        <>
-          <Svg viewBox={'0 0 48 48'} {...context} {...props}>
-            <Path d="M24.15 26.4q.85 0 1.425-.575.575-.575.575-1.425v-9.2q0-.8-.6-1.375t-1.4-.575q-.85 0-1.425.575-.575.575-.575 1.425v9.2q0 .8.6 1.375t1.4.575ZM24 34.7q1 0 1.625-.625t.625-1.625q0-.95-.625-1.625T24 30.15q-1 0-1.625.675t-.625 1.625q0 1 .625 1.625T24 34.7Zm0 10q-4.4 0-8.175-1.575Q12.05 41.55 9.25 38.75q-2.8-2.8-4.375-6.575Q3.3 28.4 3.3 24q0-4.35 1.575-8.125Q6.45 12.1 9.25 9.3q2.8-2.8 6.575-4.425Q19.6 3.25 24 3.25q4.35 0 8.125 1.625Q35.9 6.5 38.7 9.3q2.8 2.8 4.425 6.575Q44.75 19.65 44.75 24q0 4.4-1.625 8.175Q41.5 35.95 38.7 38.75q-2.8 2.8-6.575 4.375Q28.35 44.7 24 44.7Z" />
-          </Svg>
-        </>
-      )}
-    </SvgContext.Consumer>
-  );
-};

package/src/ui/components/button/svg/ForwardSvg.tsx

@@ -1,18 +0,0 @@
-import type { SvgProps } from 'react-native-svg';
-import Svg, { Path } from 'react-native-svg';
-import React from 'react';
-import { SvgContext } from './SvgUtils';
-
-export const ForwardSvg = (props: SvgProps) => {
-  return (
-    <SvgContext.Consumer>
-      {(context) => (
-        <>
-          <Svg viewBox={'0 96 960 960'} {...context} {...props}>
-            <Path d="M480 983.174q-76.26 0-142.952-28.965-66.693-28.965-116.12-78.435-49.428-49.47-78.287-116.078-28.859-66.608-28.859-142.772 0-76.163 28.979-142.859 28.978-66.695 78.435-116.032 49.456-49.337 116.141-78.316 66.685-28.978 142.936-28.978h22.966l-53.456-53.456q-9.435-9.256-9.055-23.4.381-14.144 9.816-23.579 9.227-9.232 23.505-9.094 14.277.138 23.473 9.333l107.63 108.392q10.196 10.435 10.196 24.108 0 13.674-10.196 23.87l-107.63 107.391q-9.957 10.196-24.131 10.316-14.173.119-23.608-10.076-10.196-10.228-9.696-23.886t10.696-24.093l47.695-47.456h-23.239q-123.104 0-208.095 86.859-84.992 86.86-84.992 210.946t86.872 210.988Q355.896 914.804 480 914.804q114.213 0 199.408-75.994 85.196-75.994 97.201-189.223 2.239-14.196 12.174-23.413 9.934-9.217 23.301-9.217 14.845 0 24.489 9.837 9.645 9.836 8.645 23.032-12.104 142.982-117.324 238.165Q622.674 983.174 480 983.174Z" />
-          </Svg>
-        </>
-      )}
-    </SvgContext.Consumer>
-  );
-};

package/src/ui/components/button/svg/FullscreenEnterSvg.tsx

@@ -1,18 +0,0 @@
-import type { SvgProps } from 'react-native-svg';
-import Svg, { Path } from 'react-native-svg';
-import React from 'react';
-import { SvgContext } from './SvgUtils';
-
-export const FullscreenEnterSvg = (props: SvgProps) => {
-  return (
-    <SvgContext.Consumer>
-      {(context) => (
-        <>
-          <Svg viewBox={'0 0 24 24'} {...context} {...props}>
-            <Path d="M5.9 19.225q-.475 0-.8-.325-.325-.325-.325-.8V15q0-.475.325-.812.325-.338.8-.338.5 0 .825.338.325.337.325.812v1.95H9q.475 0 .812.325.338.325.338.825 0 .475-.338.8-.337.325-.812.325Zm0-9.075q-.475 0-.8-.338-.325-.337-.325-.812V5.9q0-.475.325-.8.325-.325.8-.325H9q.475 0 .812.325.338.325.338.8 0 .5-.338.825-.337.325-.812.325H7.05V9q0 .475-.325.812-.325.338-.825.338Zm9.1 9.075q-.475 0-.812-.325-.338-.325-.338-.8 0-.5.338-.825.337-.325.812-.325h1.95V15q0-.475.325-.812.325-.338.825-.338.475 0 .8.338.325.337.325.812v3.1q0 .475-.325.8-.325.325-.8.325Zm3.1-9.075q-.5 0-.825-.338-.325-.337-.325-.812V7.05H15q-.475 0-.812-.325-.338-.325-.338-.825 0-.475.338-.8.337-.325.812-.325h3.1q.475 0 .8.325.325.325.325.8V9q0 .475-.325.812-.325.338-.8.338Z" />
-          </Svg>
-        </>
-      )}
-    </SvgContext.Consumer>
-  );
-};

package/src/ui/components/button/svg/FullscreenExitSvg.tsx

@@ -1,18 +0,0 @@
-import type { SvgProps } from 'react-native-svg';
-import Svg, { Path } from 'react-native-svg';
-import React from 'react';
-import { SvgContext } from './SvgUtils';
-
-export const FullscreenExitSvg = (props: SvgProps) => {
-  return (
-    <SvgContext.Consumer>
-      {(context) => (
-        <>
-          <Svg viewBox={'0 0 24 24'} {...context} {...props}>
-            <Path d="M9 19.225q-.475 0-.812-.325-.338-.325-.338-.8v-1.95H5.9q-.475 0-.8-.338-.325-.337-.325-.812 0-.475.325-.812.325-.338.8-.338H9q.475 0 .812.338.338.337.338.812v3.1q0 .475-.338.8-.337.325-.812.325ZM5.9 10.15q-.475 0-.8-.338-.325-.337-.325-.812 0-.475.325-.813.325-.337.8-.337h1.95V5.9q0-.475.338-.8.337-.325.812-.325.475 0 .812.325.338.325.338.8V9q0 .475-.338.812-.337.338-.812.338Zm9.1 9.075q-.475 0-.812-.325-.338-.325-.338-.8V15q0-.475.338-.812.337-.338.812-.338h3.1q.475 0 .8.338.325.337.325.812 0 .475-.325.812-.325.338-.8.338h-1.95v1.95q0 .475-.337.8-.338.325-.813.325Zm0-9.075q-.475 0-.812-.338-.338-.337-.338-.812V5.9q0-.475.338-.8.337-.325.812-.325.475 0 .813.325.337.325.337.8v1.95h1.95q.475 0 .8.337.325.338.325.813 0 .475-.325.812-.325.338-.8.338Z" />
-          </Svg>
-        </>
-      )}
-    </SvgContext.Consumer>
-  );
-};

package/src/ui/components/button/svg/LanguageSvg.tsx

@@ -1,18 +0,0 @@
-import type { SvgProps } from 'react-native-svg';
-import Svg, { Path } from 'react-native-svg';
-import React from 'react';
-import { SvgContext } from './SvgUtils';
-
-export const LanguageSvg = (props: SvgProps) => {
-  return (
-    <SvgContext.Consumer>
-      {(context) => (
-        <>
-          <Svg viewBox={'0 0 24 24'} {...context} {...props}>
-            <Path d="M17.469 15.446a6.892 6.892 310 1 0-4.772 3.342l2.872.986q1.9.626 1.9-1.374v-2.954l2.598 1.5V22q0 2-1.899 1.374l-4.95-1.632a9.892 9.892 310 1 1 6.849-4.796zM7 10a1 1 180 1 0 0 2 1 1 180 1 0 0-2zm4 0a1 1 180 1 0 0 2h5a1 1 180 1 0 0-2zm-3 4a1 1 180 1 0 0 2h3a1 1 180 1 0 0-2zm7 0a1 1 180 1 0 0 2 1 1 180 1 0 0-2z" />
-          </Svg>
-        </>
-      )}
-    </SvgContext.Consumer>
-  );
-};

package/src/ui/components/button/svg/ListSvg.tsx

@@ -1,18 +0,0 @@
-import type { SvgProps } from 'react-native-svg';
-import Svg, { Path } from 'react-native-svg';
-import React from 'react';
-import { SvgContext } from './SvgUtils';
-
-export const ListSvg = (props: SvgProps) => {
-  return (
-    <SvgContext.Consumer>
-      {(context) => (
-        <>
-          <Svg viewBox={'0 96 960 960'} {...context} {...props}>
-            <Path d="M400 856q-17 0-28.5-11.5T360 816q0-17 11.5-28.5T400 776h400q17 0 28.5 11.5T840 816q0 17-11.5 28.5T800 856H400Zm0-240q-17 0-28.5-11.5T360 576q0-17 11.5-28.5T400 536h400q17 0 28.5 11.5T840 576q0 17-11.5 28.5T800 616H400Zm0-240q-17 0-28.5-11.5T360 336q0-17 11.5-28.5T400 296h400q17 0 28.5 11.5T840 336q0 17-11.5 28.5T800 376H400ZM200 896q-33 0-56.5-23.5T120 816q0-33 23.5-56.5T200 736q33 0 56.5 23.5T280 816q0 33-23.5 56.5T200 896Zm0-240q-33 0-56.5-23.5T120 576q0-33 23.5-56.5T200 496q33 0 56.5 23.5T280 576q0 33-23.5 56.5T200 656Zm0-240q-33 0-56.5-23.5T120 336q0-33 23.5-56.5T200 256q33 0 56.5 23.5T280 336q0 33-23.5 56.5T200 416Z" />
-          </Svg>
-        </>
-      )}
-    </SvgContext.Consumer>
-  );
-};