Media Hooks

import { useBuffering } from 'react-native-video-toolkit';

export const MyComponent = () => {
  const { buffering } = useBuffering();
  // ...
};

interface UseBufferingReturn {
  buffering: boolean;
  setBuffering: (isBuffering: boolean) => void;
}

import { useBuffering } from 'react-native-video-toolkit';
import { ActivityIndicator } from 'react-native';

const MyBufferingIndicator = () => {
  const { buffering } = useBuffering();

  if (buffering) {
    return <ActivityIndicator size="large" color="#fff" />;
  }
  return null;
};

export default MyBufferingIndicator;

import { useControlsVisibility } from 'react-native-video-toolkit';

export const MyComponent = () => {
  const { showControls, hideControls } = useControlsVisibility();
  // ...
};

interface UseControlsVisibilityReturn {
  showControls: () => void;
  hideControls: () => void;
  toggleControls: () => void;
  controlsVisible: boolean;
}

import { useControlsVisibility } from 'react-native-video-toolkit';
import { View, Button } from 'react-native';
import React from 'react';

const MyCustomControl = () => {
  const { showControls, hideControls, toggleControls } = useControlsVisibility();

  return (
    <View>
      <Button title="Show" onPress={showControls} />
      <Button title="Hide" onPress={hideControls} />
      <Button title="Toggle" onPress={toggleControls} />
    </View>
  );
};

export default MyCustomControl;

import { useFullscreen } from 'react-native-video-toolkit';

export const MyComponent = () => {
  const { fullscreen, toggleFullscreen, enterFullscreen, exitFullscreen } = useFullscreen();
  // ...
};

interface UseFullscreenReturn {
  fullscreen: boolean;
  toggleFullscreen: () => Promise<void>;
  enterFullscreen: () => Promise<void>;
  exitFullscreen: () => Promise<void>;
}

import { useFullscreen } from 'react-native-video-toolkit';
import React from 'react';

const MyFullscreenButton = () => {
  const { fullscreen, toggleFullscreen } = useFullscreen();

  return <BaseIconButton IconComponent={FullscreenIcon} onTap={toggleFullscreen} />;
};

export default MyFullscreenButton;

import { usePictureInPicture } from 'react-native-video-toolkit';

export const MyComponent = () => {
  const { pictureInPicture, togglePictureInPicture, enterPictureInPicture, exitPictureInPicture } =
    usePictureInPicture();
  // ...
};

interface UsePictureInPictureReturn {
  pictureInPicture: boolean;
  supported: boolean;
  enterPictureInPicture: () => void;
  exitPictureInPicture: () => void;
  togglePictureInPicture: () => void;
}

import { usePlayback } from 'react-native-video-toolkit';

export const MyComponent = () => {
  const { isPlaying, togglePlayPause } = usePlayback();
  // ...
};

interface UsePlaybackReturn {
  isPlaying: boolean;
  ended: boolean;
  togglePlayPause: () => void;
  setPlaying: (isPlaying: boolean) => void;
}

import { usePlayback } from 'react-native-video-toolkit';
import React from 'react';

const MyPlayPauseButton = () => {
  const { isPlaying, togglePlayPause } = usePlayback();

  return <BaseIconButton IconComponent={PlayPauseIcon} onTap={togglePlayPause} />;
};

export default MyPlayPauseButton;

import { usePlaybackRate } from 'react-native-video-toolkit';

export const MyComponent = () => {
  const { playbackRate, setPlaybackRate } = usePlaybackRate();
  // ...
};

interface UsePlaybackRateReturn {
  playbackRate: number;
  setPlaybackRate: (playbackRate: number) => void;
}

import { usePlaybackRate } from 'react-native-video-toolkit';
import { Button } from 'react-native';

const MyPlaybackRateButton = () => {
  const { playbackRate, setPlaybackRate } = usePlaybackRate();

  return <Button title={`Set playback rate to 2x`} onPress={() => setPlaybackRate(2)} />;
};

export default MyPlaybackRateButton;

import { useProgress } from 'react-native-video-toolkit';

export const MyComponent = () => {
  const { currentTime, duration, seek } = useProgress();
  // ...
};

interface UseProgressReturn {
  currentTime: number;
  duration: number;
  playableDuration: number;
  seek: (time: number) => void;
  setCurrentTime: (time: number) => void;
  setDuration: (duration: number) => void;
  setPlayableDuration: (playableDuration: number) => void;
}

import { useProgress } from 'react-native-video-toolkit';
import Slider from '@react-native-community/slider';
import { View, Text } from 'react-native';
import React from 'react';

const MyProgressBar = () => {
  const { currentTime, duration, seek } = useProgress();

  const formatTime = (seconds: number) => {
    const minutes = Math.floor(seconds / 60);
    const remainingSeconds = Math.floor(seconds % 60);
    return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
  };

  return (
    <View>
      <Text>
        {formatTime(currentTime)} / {formatTime(duration)}
      </Text>
      <Slider minimumValue={0} maximumValue={1} value={currentTime} onSlidingComplete={seek} />
    </View>
  );
};

export default MyProgressBar;

import { useVolume } from 'react-native-video-toolkit';

export const MyComponent = () => {
  const { volume, muted, toggleMute } = useVolume();
  // ...
};

interface UseVolumeReturn {
  volume: number;
  muted: boolean;
  setVolume: (volume: number) => void;
  toggleMute: () => void;
}

import { useVolume } from 'react-native-video-toolkit';
import Slider from '@react-native-community/slider'; // Example slider component
import { View } from 'react-native'; // Assuming View is from react-native
import React from 'react';

const MyVolumeControl = () => {
  const { volume, muted, setVolume, toggleMute } = useVolume();

  return (
    <View>
      <BaseIconButton IconComponent={MuteIcon} onTap={toggleMute} />;
      <Slider minimumValue={0} maximumValue={1} value={volume} onSlidingComplete={setVolume} disabled={muted} />
    </View>
  );
};

export default MyVolumeControl;

import { useOrientation } from 'react-native-video-toolkit';

export const MyComponent = () => {
  const orientation = useOrientation();

  return (
    <View>
      <Text>Device Type: {orientation.deviceType}</Text>
      <Text>Should Auto Rotate: {orientation.shouldAutoRotate ? 'Yes' : 'No'}</Text>
    </View>
  );
};

import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { useOrientation } from 'react-native-video-toolkit';

const OrientationDemo = () => {
  const orientation = useOrientation();
  const [message, setMessage] = useState('');

  const handleToggleLock = async () => {
    if (orientation.orientationLocked) {
      const success = await orientation.unlockOrientation();
      setMessage(success ? 'Orientation unlocked.' : 'Failed to unlock orientation.');
    } else {
      const success = await orientation.lockToLandscape();
      setMessage(success ? 'Orientation locked to landscape.' : 'Failed to lock to landscape.');
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.header}>Orientation Hook Demo</Text>
      <Text>Device Type: {orientation.deviceType}</Text>
      <Text>Orientation Locked: {orientation.orientationLocked ? 'Yes' : 'No'}</Text>
      <Text>Should Auto Rotate: {orientation.shouldAutoRotate ? 'Yes' : 'No'}</Text>
      <Text>Message: {message}</Text>

      <View style={styles.buttonContainer}>
        <Button
          title={orientation.orientationLocked ? 'Unlock Orientation' : 'Lock to Landscape'}
          onPress={handleToggleLock}
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  header: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  buttonContainer: {
    flexDirection: 'row',
    marginTop: 20,
    gap: 10,
  },
});

export default OrientationDemo;