From a25fea499d91b6a8fea6a8da3f0e8f9bb870dc94 Mon Sep 17 00:00:00 2001 From: Krzysztof Moch Date: Sun, 31 Mar 2024 00:03:20 +0100 Subject: [PATCH 1/4] fix: remove string unions from component spec --- src/Video.tsx | 23 +++- src/specs/VideoNativeComponent.ts | 217 +++--------------------------- src/types/events.ts | 203 +++++++++++++++++++++++++++- 3 files changed, 233 insertions(+), 210 deletions(-) diff --git a/src/Video.tsx b/src/Video.tsx index 490f76785b..938709018d 100644 --- a/src/Video.tsx +++ b/src/Video.tsx @@ -7,7 +7,16 @@ import React, { useImperativeHandle, type ComponentRef, } from 'react'; -import {View, StyleSheet, Image, Platform} from 'react-native'; +import { + View, + StyleSheet, + Image, + Platform, + type StyleProp, + type ImageStyle, + type NativeSyntheticEvent, +} from 'react-native'; + import NativeVideoComponent, { type OnAudioFocusChangedData, type OnAudioTracksData, @@ -15,15 +24,12 @@ import NativeVideoComponent, { type OnBufferData, type OnExternalPlaybackChangeData, type OnGetLicenseData, - type OnLoadData, type OnLoadStartData, type OnPictureInPictureStatusChangedData, type OnPlaybackStateChangedData, type OnProgressData, - type OnReceiveAdEventData, type OnSeekData, type OnTextTrackDataChangedData, - type OnTextTracksData, type OnTimedMetadataData, type OnVideoAspectRatioData, type OnVideoErrorData, @@ -31,15 +37,18 @@ import NativeVideoComponent, { type VideoComponentType, type VideoSrc, } from './specs/VideoNativeComponent'; - -import type {StyleProp, ImageStyle, NativeSyntheticEvent} from 'react-native'; import { generateHeaderForNative, getReactTag, resolveAssetSourceForVideo, } from './utils'; import {VideoManager} from './specs/VideoNativeComponent'; -import type {ReactVideoProps} from './types/video'; +import type { + OnLoadData, + OnTextTracksData, + OnReceiveAdEventData, + ReactVideoProps, +} from './types'; export type VideoSaveData = { uri: string; diff --git a/src/specs/VideoNativeComponent.ts b/src/specs/VideoNativeComponent.ts index 53e65bd288..8652329329 100644 --- a/src/specs/VideoNativeComponent.ts +++ b/src/specs/VideoNativeComponent.ts @@ -38,10 +38,7 @@ export type VideoSrc = Readonly<{ customImageUri?: string; }>; -type DRMType = WithDefault< - 'widevine' | 'playready' | 'clearkey' | 'fairplay', - 'widevine' ->; +type DRMType = WithDefault; type DebugConfig = Readonly<{ enable?: boolean; @@ -67,15 +64,9 @@ type TextTracks = ReadonlyArray< }> >; -type SelectedTextTrackType = WithDefault< - 'system' | 'disabled' | 'title' | 'language' | 'index', - 'system' ->; +type SelectedTextTrackType = WithDefault; -type SelectedAudioTrackType = WithDefault< - 'system' | 'disabled' | 'title' | 'language' | 'index', - 'system' ->; +type SelectedAudioTrackType = WithDefault; type SelectedTextTrack = Readonly<{ type?: SelectedTextTrackType; @@ -87,10 +78,7 @@ type SelectedAudioTrack = Readonly<{ value?: string; }>; -type SelectedVideoTrackType = WithDefault< - 'auto' | 'disabled' | 'resolution' | 'index', - 'auto' ->; +type SelectedVideoTrackType = WithDefault; type SelectedVideoTrack = Readonly<{ type?: SelectedVideoTrackType; @@ -122,13 +110,13 @@ type SubtitleStyle = Readonly<{ opacity?: WithDefault; }>; -export type OnLoadData = Readonly<{ +type OnLoadData = Readonly<{ currentTime: Float; duration: Float; naturalSize: Readonly<{ width: Float; height: Float; - orientation: WithDefault<'landscape' | 'portrait', 'landscape'>; + orientation: WithDefault; }>; audioTracks: { index: Int32; @@ -145,7 +133,7 @@ export type OnLoadData = Readonly<{ /** * iOS only supports VTT, Android supports all 3 */ - type?: WithDefault<'srt' | 'ttml' | 'vtt', 'srt'>; + type?: WithDefault; selected?: boolean; }[]; }>; @@ -203,7 +191,7 @@ export type OnAudioTracksData = Readonly<{ }[]; }>; -export type OnTextTracksData = Readonly<{ +type OnTextTracksData = Readonly<{ textTracks: { index: Int32; title?: string; @@ -211,7 +199,7 @@ export type OnTextTracksData = Readonly<{ /** * iOS only supports VTT, Android supports all 3 */ - type?: WithDefault<'srt' | 'ttml' | 'vtt', 'srt'>; + type?: WithDefault; selected?: boolean; }[]; }>; @@ -254,162 +242,9 @@ export type OnPictureInPictureStatusChangedData = Readonly<{ isActive: boolean; }>; -export type OnReceiveAdEventData = Readonly<{ - data?: {}; - event: WithDefault< - /** - * iOS only: Fired the first time each ad break ends. Applications must reenable seeking when this occurs (only used for dynamic ad insertion). - */ | 'AD_BREAK_ENDED' - /** - * Fires when an ad rule or a VMAP ad break would have played if autoPlayAdBreaks is false. - */ - | 'AD_BREAK_READY' - /** - * iOS only: Fired first time each ad break begins playback. If an ad break is watched subsequent times this will not be fired. Applications must disable seeking when this occurs (only used for dynamic ad insertion). - */ - | 'AD_BREAK_STARTED' - /** - * Android only: Fires when the ad has stalled playback to buffer. - */ - | 'AD_BUFFERING' - /** - * Android only: Fires when the ad is ready to play without buffering, either at the beginning of the ad or after buffering completes. - */ - | 'AD_CAN_PLAY' - /** - * Android only: Fires when an ads list is loaded. - */ - | 'AD_METADATA' - /** - * iOS only: Fired every time the stream switches from advertising or slate to content. This will be fired even when an ad is played a second time or when seeking into an ad (only used for dynamic ad insertion). - */ - | 'AD_PERIOD_ENDED' - /** - * iOS only: Fired every time the stream switches from content to advertising or slate. This will be fired even when an ad is played a second time or when seeking into an ad (only used for dynamic ad insertion). - */ - | 'AD_PERIOD_STARTED' - /** - * Android only: Fires when the ad's current time value changes. The event `data` will be populated with an AdProgressData object. - */ - | 'AD_PROGRESS' - /** - * Fires when the ads manager is done playing all the valid ads in the ads response, or when the response doesn't return any valid ads. - */ - | 'ALL_ADS_COMPLETED' - /** - * Fires when the ad is clicked. - */ - | 'CLICK' - /** - * Fires when the ad completes playing. - */ - | 'COMPLETED' - /** - * Android only: Fires when content should be paused. This usually happens right before an ad is about to cover the content. - */ - | 'CONTENT_PAUSE_REQUESTED' - /** - * Android only: Fires when content should be resumed. This usually happens when an ad finishes or collapses. - */ - | 'CONTENT_RESUME_REQUESTED' - /** - * iOS only: Cuepoints changed for VOD stream (only used for dynamic ad insertion). - */ - | 'CUEPOINTS_CHANGED' - /** - * Android only: Fires when the ad's duration changes. - */ - | 'DURATION_CHANGE' - /** - * Fires when an error is encountered and the ad can't be played. - */ - | 'ERROR' - /** - * Fires when the ad playhead crosses first quartile. - */ - | 'FIRST_QUARTILE' - /** - * Android only: Fires when the impression URL has been pinged. - */ - | 'IMPRESSION' - /** - * Android only: Fires when an ad triggers the interaction callback. Ad interactions contain an interaction ID string in the ad data. - */ - | 'INTERACTION' - /** - * Android only: Fires when the displayed ad changes from linear to nonlinear, or the reverse. - */ - | 'LINEAR_CHANGED' - /** - * Fires when ad data is available. - */ - | 'LOADED' - /** - * Fires when a non-fatal error is encountered. The user need not take any action since the SDK will continue with the same or next ad playback depending on the error situation. - */ - | 'LOG' - /** - * Fires when the ad playhead crosses midpoint. - */ - | 'MIDPOINT' - /** - * Fires when the ad is paused. - */ - | 'PAUSED' - /** - * Fires when the ad is resumed. - */ - | 'RESUMED' - /** - * Android only: Fires when the displayed ads skippable state is changed. - */ - | 'SKIPPABLE_STATE_CHANGED' - /** - * Fires when the ad is skipped by the user. - */ - | 'SKIPPED' - /** - * Fires when the ad starts playing. - */ - | 'STARTED' - /** - * iOS only: Stream request has loaded (only used for dynamic ad insertion). - */ - | 'STREAM_LOADED' - /** - * iOS only: Fires when the ad is tapped. - */ - | 'TAPPED' - /** - * Fires when the ad playhead crosses third quartile. - */ - | 'THIRD_QUARTILE' - /** - * iOS only: An unknown event has fired - */ - | 'UNKNOWN' - /** - * Android only: Fires when the ad is closed by the user. - */ - | 'USER_CLOSE' - /** - * Android only: Fires when the non-clickthrough portion of a video ad is clicked. - */ - | 'VIDEO_CLICKED' - /** - * Android only: Fires when a user clicks a video icon. - */ - | 'VIDEO_ICON_CLICKED' - /** - * Android only: Fires when the ad volume has changed. - */ - | 'VOLUME_CHANGED' - /** - * Android only: Fires when the ad volume has been muted. - */ - | 'VOLUME_MUTED', - 'AD_BREAK_ENDED' - >; +type OnReceiveAdEventData = Readonly<{ + data?: object; + event: WithDefault; }>; export type OnVideoErrorData = Readonly<{ @@ -438,7 +273,7 @@ export interface VideoNativeProps extends ViewProps { adTagUrl?: string; allowsExternalPlayback?: boolean; // ios, true maxBitRate?: Float; - resizeMode?: WithDefault<'none' | 'contain' | 'cover' | 'stretch', 'none'>; + resizeMode?: WithDefault; repeat?: boolean; automaticallyWaitsToMinimizeStalling?: boolean; textTracks?: TextTracks; @@ -448,25 +283,7 @@ export interface VideoNativeProps extends ViewProps { paused?: boolean; muted?: boolean; controls?: boolean; - filter?: WithDefault< - | '' - | 'CIColorInvert' - | 'CIColorMonochrome' - | 'CIColorPosterize' - | 'CIFalseColor' - | 'CIMaximumComponent' - | 'CIMinimumComponent' - | 'CIPhotoEffectChrome' - | 'CIPhotoEffectFade' - | 'CIPhotoEffectInstant' - | 'CIPhotoEffectMono' - | 'CIPhotoEffectNoir' - | 'CIPhotoEffectProcess' - | 'CIPhotoEffectTonal' - | 'CIPhotoEffectTransfer' - | 'CISepiaTone', - '' - >; + filter?: WithDefault; filterEnabled?: boolean; volume?: Float; // default 1.0 playInBackground?: boolean; @@ -474,12 +291,12 @@ export interface VideoNativeProps extends ViewProps { preferredForwardBufferDuration?: Float; //ios, 0 playWhenInactive?: boolean; // ios, false pictureInPicture?: boolean; // ios, false - ignoreSilentSwitch?: WithDefault<'inherit' | 'ignore' | 'obey', 'inherit'>; // ios, 'inherit' - mixWithOthers?: WithDefault<'inherit' | 'mix' | 'duck', 'inherit'>; // ios, 'inherit' + ignoreSilentSwitch?: WithDefault; // ios, 'inherit' + mixWithOthers?: WithDefault; // ios, 'inherit' rate?: Float; fullscreen?: boolean; // ios, false fullscreenAutorotate?: boolean; - fullscreenOrientation?: WithDefault<'all' | 'landscape' | 'portrait', 'all'>; + fullscreenOrientation?: WithDefault; progressUpdateInterval?: Float; restoreUserInterfaceForPIPStopCompletionHandler?: boolean; localSourceEncryptionKeyScheme?: string; diff --git a/src/types/events.ts b/src/types/events.ts index 291ee0bc42..4f9e92380b 100644 --- a/src/types/events.ts +++ b/src/types/events.ts @@ -1,19 +1,17 @@ +import type {WithDefault} from 'react-native/Libraries/Types/CodegenTypes'; import type { OnAudioFocusChangedData, OnAudioTracksData, OnBandwidthUpdateData, OnBufferData, OnExternalPlaybackChangeData, - OnLoadData, OnLoadStartData, OnPictureInPictureStatusChangedData, OnPlaybackData, OnPlaybackStateChangedData, OnProgressData, - OnReceiveAdEventData, OnSeekData, OnTextTrackDataChangedData, - OnTextTracksData, OnTimedMetadataData, OnVideoAspectRatioData, OnVideoErrorData, @@ -24,6 +22,205 @@ import type { export type AudioTrack = OnAudioTracksData['audioTracks'][number]; export type TextTrack = OnTextTracksData['textTracks'][number]; +export type OnLoadData = Readonly<{ + currentTime: number; + duration: number; + naturalSize: Readonly<{ + width: number; + height: number; + orientation: WithDefault<'landscape' | 'portrait', 'landscape'>; + }>; + audioTracks: { + index: number; + title?: string; + language?: string; + bitrate?: number; + type?: string; + selected?: boolean; + }[]; + textTracks: { + index: number; + title?: string; + language?: string; + /** + * iOS only supports VTT, Android supports all 3 + */ + type?: WithDefault<'srt' | 'ttml' | 'vtt', 'srt'>; + selected?: boolean; + }[]; +}>; + +export type OnTextTracksData = Readonly<{ + textTracks: { + index: number; + title?: string; + language?: string; + /** + * iOS only supports VTT, Android supports all 3 + */ + type?: WithDefault; + selected?: boolean; + }[]; +}>; + +export type OnReceiveAdEventData = Readonly<{ + data?: object; + event: WithDefault< + /** + * iOS only: Fired the first time each ad break ends. Applications must reenable seeking when this occurs (only used for dynamic ad insertion). + */ | 'AD_BREAK_ENDED' + /** + * Fires when an ad rule or a VMAP ad break would have played if autoPlayAdBreaks is false. + */ + | 'AD_BREAK_READY' + /** + * iOS only: Fired first time each ad break begins playback. If an ad break is watched subsequent times this will not be fired. Applications must disable seeking when this occurs (only used for dynamic ad insertion). + */ + | 'AD_BREAK_STARTED' + /** + * Android only: Fires when the ad has stalled playback to buffer. + */ + | 'AD_BUFFERING' + /** + * Android only: Fires when the ad is ready to play without buffering, either at the beginning of the ad or after buffering completes. + */ + | 'AD_CAN_PLAY' + /** + * Android only: Fires when an ads list is loaded. + */ + | 'AD_METADATA' + /** + * iOS only: Fired every time the stream switches from advertising or slate to content. This will be fired even when an ad is played a second time or when seeking into an ad (only used for dynamic ad insertion). + */ + | 'AD_PERIOD_ENDED' + /** + * iOS only: Fired every time the stream switches from content to advertising or slate. This will be fired even when an ad is played a second time or when seeking into an ad (only used for dynamic ad insertion). + */ + | 'AD_PERIOD_STARTED' + /** + * Android only: Fires when the ad's current time value changes. The event `data` will be populated with an AdProgressData object. + */ + | 'AD_PROGRESS' + /** + * Fires when the ads manager is done playing all the valid ads in the ads response, or when the response doesn't return any valid ads. + */ + | 'ALL_ADS_COMPLETED' + /** + * Fires when the ad is clicked. + */ + | 'CLICK' + /** + * Fires when the ad completes playing. + */ + | 'COMPLETED' + /** + * Android only: Fires when content should be paused. This usually happens right before an ad is about to cover the content. + */ + | 'CONTENT_PAUSE_REQUESTED' + /** + * Android only: Fires when content should be resumed. This usually happens when an ad finishes or collapses. + */ + | 'CONTENT_RESUME_REQUESTED' + /** + * iOS only: Cuepoints changed for VOD stream (only used for dynamic ad insertion). + */ + | 'CUEPOINTS_CHANGED' + /** + * Android only: Fires when the ad's duration changes. + */ + | 'DURATION_CHANGE' + /** + * Fires when an error is encountered and the ad can't be played. + */ + | 'ERROR' + /** + * Fires when the ad playhead crosses first quartile. + */ + | 'FIRST_QUARTILE' + /** + * Android only: Fires when the impression URL has been pinged. + */ + | 'IMPRESSION' + /** + * Android only: Fires when an ad triggers the interaction callback. Ad interactions contain an interaction ID string in the ad data. + */ + | 'INTERACTION' + /** + * Android only: Fires when the displayed ad changes from linear to nonlinear, or the reverse. + */ + | 'LINEAR_CHANGED' + /** + * Fires when ad data is available. + */ + | 'LOADED' + /** + * Fires when a non-fatal error is encountered. The user need not take any action since the SDK will continue with the same or next ad playback depending on the error situation. + */ + | 'LOG' + /** + * Fires when the ad playhead crosses midpoint. + */ + | 'MIDPOINT' + /** + * Fires when the ad is paused. + */ + | 'PAUSED' + /** + * Fires when the ad is resumed. + */ + | 'RESUMED' + /** + * Android only: Fires when the displayed ads skippable state is changed. + */ + | 'SKIPPABLE_STATE_CHANGED' + /** + * Fires when the ad is skipped by the user. + */ + | 'SKIPPED' + /** + * Fires when the ad starts playing. + */ + | 'STARTED' + /** + * iOS only: Stream request has loaded (only used for dynamic ad insertion). + */ + | 'STREAM_LOADED' + /** + * iOS only: Fires when the ad is tapped. + */ + | 'TAPPED' + /** + * Fires when the ad playhead crosses third quartile. + */ + | 'THIRD_QUARTILE' + /** + * iOS only: An unknown event has fired + */ + | 'UNKNOWN' + /** + * Android only: Fires when the ad is closed by the user. + */ + | 'USER_CLOSE' + /** + * Android only: Fires when the non-clickthrough portion of a video ad is clicked. + */ + | 'VIDEO_CLICKED' + /** + * Android only: Fires when a user clicks a video icon. + */ + | 'VIDEO_ICON_CLICKED' + /** + * Android only: Fires when the ad volume has changed. + */ + | 'VOLUME_CHANGED' + /** + * Android only: Fires when the ad volume has been muted. + */ + | 'VOLUME_MUTED', + 'AD_BREAK_ENDED' + >; +}>; + export interface ReactVideoEvents { onAudioBecomingNoisy?: () => void; //Android, iOS onAudioFocusChanged?: (e: OnAudioFocusChangedData) => void; // Android From 9a000dea0098bc92951095195a57a6ca39539cd9 Mon Sep 17 00:00:00 2001 From: Krzysztof Moch Date: Sun, 31 Mar 2024 12:12:28 +0200 Subject: [PATCH 2/4] fix linter issue --- src/Video.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Video.tsx b/src/Video.tsx index 938709018d..6afa510bbd 100644 --- a/src/Video.tsx +++ b/src/Video.tsx @@ -533,7 +533,7 @@ const Video = forwardRef( selectedAudioTrack={_selectedAudioTrack} selectedVideoTrack={_selectedVideoTrack} onGetLicense={useExternalGetLicense ? onGetLicense : undefined} - onVideoLoad={onVideoLoad} + onVideoLoad={onVideoLoad as (e: NativeSyntheticEvent) => void} onVideoLoadStart={onVideoLoadStart} onVideoError={onVideoError} onVideoProgress={onVideoProgress} @@ -563,7 +563,9 @@ const Video = forwardRef( onRestoreUserInterfaceForPictureInPictureStop } onVideoAspectRatio={_onVideoAspectRatio} - onReceiveAdEvent={_onReceiveAdEvent} + onReceiveAdEvent={ + _onReceiveAdEvent as (e: NativeSyntheticEvent) => void + } /> {showPoster ? ( From 70d1aa5ce8a0a1007772af4d972d0c1124c0e6c1 Mon Sep 17 00:00:00 2001 From: Krzysztof Moch Date: Sun, 31 Mar 2024 12:27:14 +0200 Subject: [PATCH 3/4] fix codegen type --- src/specs/VideoNativeComponent.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/specs/VideoNativeComponent.ts b/src/specs/VideoNativeComponent.ts index 8652329329..58d8ed6325 100644 --- a/src/specs/VideoNativeComponent.ts +++ b/src/specs/VideoNativeComponent.ts @@ -243,7 +243,7 @@ export type OnPictureInPictureStatusChangedData = Readonly<{ }>; type OnReceiveAdEventData = Readonly<{ - data?: object; + data?: {}; event: WithDefault; }>; From c6c19cfd7c09fdb5290077c95fb9500c86196be9 Mon Sep 17 00:00:00 2001 From: Krzysztof Moch Date: Sun, 31 Mar 2024 22:28:42 +0200 Subject: [PATCH 4/4] update podspec --- react-native-video.podspec | 31 ++++++++++++++++++++++++++----- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/react-native-video.podspec b/react-native-video.podspec index 4ec8ffbd69..c88e8570f7 100644 --- a/react-native-video.podspec +++ b/react-native-video.podspec @@ -2,6 +2,8 @@ require "json" package = JSON.parse(File.read(File.join(__dir__, "package.json"))) +folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32' + Pod::Spec.new do |s| s.name = 'react-native-video' s.version = package['version'] @@ -38,10 +40,29 @@ Pod::Spec.new do |s| end end - s.dependency "React-Core" + # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0. + # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79. + if respond_to?(:install_modules_dependencies, true) + install_modules_dependencies(s) + else + s.dependency "React-Core" + + # Don't install the dependencies when we run `pod install` in the old architecture. + if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then + s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1" + s.pod_target_xcconfig = { + "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"", + "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1", + "CLANG_CXX_LANGUAGE_STANDARD" => "c++17" + } + s.dependency "React-RCTFabric" + s.dependency "React-Codegen" + s.dependency "RCT-Folly" + s.dependency "RCTRequired" + s.dependency "RCTTypeSafety" + s.dependency "ReactCommon/turbomodule/core" + end + end + s.default_subspec = "Video" - s.static_framework = true - s.xcconfig = { - 'OTHER_LDFLAGS': '-ObjC', - } end