chore(sample): additionnal sample cleanup (#4122)

* chore: move MultiValueControl & toggleControl to component
* fix(sample): fix import / export to avoid circular deps
* chore(sample): fix warning

examples/basic/src/components/MultiValueControl.tsx

@@ -21,7 +21,7 @@ interface MultiValueControlType<T> {
   onPress: (arg: T) => void;
 }
 
-const MultiValueControl = <T extends number | string | ResizeMode>({
+export const MultiValueControl = <T extends number | string | ResizeMode>({
   values,
   selected,
   onPress,

examples/basic/src/components/Overlay.tsx

@@ -7,9 +7,7 @@ import React, {
 } from 'react';
 import {View} from 'react-native';
 import styles from '../styles.tsx';
-import ToggleControl from '../ToggleControl.tsx';
 import {isAndroid, isIos, textTracksSelectionBy} from '../constants';
-import MultiValueControl from '../MultiValueControl.tsx';
 import {
   ResizeMode,
   VideoRef,
@@ -23,14 +21,15 @@ import {
   type VideoTrack,
   type AudioTrack,
 } from 'react-native-video';
-import {
+
-  toast,
+import {toast} from './Toast';
-  Seeker,
+import {Seeker} from './Seeker';
-  AudioTrackSelector,
+import {AudioTrackSelector} from './AudioTracksSelector';
-  TextTrackSelector,
+import {VideoTrackSelector} from './VideoTracksSelector';
-  VideoTrackSelector,
+import {TextTrackSelector} from './TextTracksSelector';
-  TopControl,
+import {TopControl} from './TopControl';
-} from '../components';
+import {ToggleControl} from './ToggleControl';
+import {MultiValueControl} from './MultiValueControl';
 
 type Props = {
   channelDown: () => void;

examples/basic/src/components/ToggleControl.tsx

@@ -25,7 +25,7 @@ interface ToggleControlType {
   onPress: () => void;
 }
 
-const ToggleControl = ({
+export const ToggleControl = ({
   isSelected,
   selectedText,
   unselectedText,

examples/basic/src/components/index.ts

@@ -7,3 +7,5 @@ export * from './TextTracksSelector';
 export * from './Overlay';
 export * from './TopControl';
 export * from './Toast';
+export * from './ToggleControl';
+export * from './MultiValueControl';

examples/basic/src/constants/general.ts

@@ -94,9 +94,9 @@ export const srcAllPlatformList = [
   },
 ];
 
-export const srcIosList = [];
+export const srcIosList: SampleVideoSource[] = [];
 
-export const srcAndroidList = [
+export const srcAndroidList: SampleVideoSource[] = [
   {
     description: 'Another live sample',
     uri: 'https://live.forstreet.cl/live/livestream.m3u8',
@@ -149,9 +149,12 @@ export const srcAndroidList = [
   },
 ];
 
-export const srcList: SampleVideoSource[] = srcAllPlatformList.concat(
+const platformSrc: SampleVideoSource[] = isAndroid
-  isAndroid ? srcAndroidList : srcIosList,
+  ? srcAndroidList
-);
+  : srcIosList;
+
+export const srcList: SampleVideoSource[] =
+  platformSrc.concat(srcAllPlatformList);
 
 export const bufferConfig: BufferConfig = {
   minBufferMs: 15000,

examples/basic/src/types/types.ts

@@ -1,11 +1,11 @@
 import {Drm, ReactVideoSource, TextTracks} from 'react-native-video';
 
 export type AdditionalSourceInfo = {
-  textTracks: TextTracks;
+  textTracks?: TextTracks;
-  adTagUrl: string;
+  adTagUrl?: string;
-  description: string;
+  description?: string;
-  drm: Drm;
+  drm?: Drm;
-  noView: boolean;
+  noView?: boolean;
 };
 
 export type SampleVideoSource = ReactVideoSource | AdditionalSourceInfo;