fix: omit packager assets from caching (#1438)

CHANGELOG.md

@@ -1,5 +1,9 @@
 ## Changelog
 
+### next
+
+* Fix loading package resolved videos when using video-caching [#1438](https://github.com/react-native-community/react-native-video/pull/1438)
+
 ### Version 4.3.0
 * Fix iOS video not displaying after switching source [#1395](https://github.com/react-native-community/react-native-video/pull/1395)
 * Add the filterEnabled flag, fixes iOS video start time regression [#1384](https://github.com/react-native-community/react-native-video/pull/1384)

Video.js

@@ -213,6 +213,7 @@ export default class Video extends Component {
   render() {
     const resizeMode = this.props.resizeMode;
     const source = resolveAssetSource(this.props.source) || {};
+    const shouldCache = !Boolean(source.__packager_asset)
 
     let uri = source.uri || '';
     if (uri && uri.match(/^\//)) {
@@ -241,6 +242,7 @@ export default class Video extends Component {
         uri,
         isNetwork,
         isAsset,
+        shouldCache,
         type: source.type || '',
         mainVer: source.mainVer || 0,
         patchVer: source.patchVer || 0,

examples/video-caching/App.ios.js

@@ -5,39 +5,70 @@
  */
 
 import React, { Component } from "react";
-import { StyleSheet, Text, View, Dimensions, TouchableOpacity } from "react-native";
+import { Alert, StyleSheet, Text, View, Dimensions, TouchableOpacity } from "react-native";
 import Video from "react-native-video";
 
 const { height, width } = Dimensions.get("screen");
 
 type Props = {};
-export default class App extends Component<Props> {
+
+type State = {
+  showLocal: boolean
+};
+
+function Button({ text, onPress }: { text: string, onPress: () => void }) {
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      style={styles.button}
+    >
+      <Text style={{color: 'white'}}>{text}</Text>
+    </TouchableOpacity>
+  )
+}
+
+export default class App extends Component<Props, State> {
+  state = {
+    showLocal: false
+  }
   render() {
     return (
       <View style={styles.container}>
         <Video
-          source={{
-            uri:
-              "https://rawgit.com/mediaelement/mediaelement-files/master/big_buck_bunny.mp4"
-          }}
+          source={
+            this.state.showLocal ?
+              require('../basic/broadchurch.mp4') :
+              {
+                uri:  "https://rawgit.com/mediaelement/mediaelement-files/master/big_buck_bunny.mp4"
+              }
+          }
           ref={player => {
             this.player = player;
           }}
           onEnd={() => {
             this.player.seek(0);
           }}
+          onError={(err) => {
+            Alert.alert(JSON.stringify(err))
+          }}
           style={{ flex: 1, height, width }}
         />
-        <TouchableOpacity
+        <View style={styles.absoluteOverlay}>
+          <Button
             onPress={async () => {
               let response = await this.player.save();
               let uri = response.uri;
-            console.log("Download URI", uri);
+              console.warn("Download URI", uri);
             }}
-          style={styles.button}
-        >
-          <Text style={{color: 'white'}}>Save</Text>
-        </TouchableOpacity>
+            text="Save"
+          />
+          <Button
+            onPress={() => {
+              this.setState(state => ({ showLocal: !state.showLocal }))
+            }}
+            text={this.state.showLocal ? "Show Remote" : "Show Local"}
+          />
+        </View>
       </View>
     );
   }
@@ -50,13 +81,20 @@ const styles = StyleSheet.create({
     alignItems: "center",
     backgroundColor: "#F5FCFF"
   },
-  button: {
+  absoluteOverlay: {
+    flexDirection: 'row',
     position: 'absolute',
-    top: 50,
-    right: 16,
+    top: 0,
+    width: '100%',
+    marginTop: 50,
+  },
+  button: {
     padding: 10,
     backgroundColor: '#9B2FAE',
-    borderRadius: 8
+    borderRadius: 8,
+    flex: 1,
+    alignItems: 'center',
+    marginHorizontal: 5,
   },
   welcome: {
     fontSize: 20,

examples/video-caching/ios/Podfile

@@ -28,5 +28,5 @@ target 'VideoCaching' do
     'DevSupport'
   ]
 
-  pod 'react-native-video/VideoCaching', :path => '../node_modules/react-native-video/react-native-video.podspec'
+  pod 'react-native-video/VideoCaching', :path => '../../../react-native-video.podspec'
 end

examples/video-caching/ios/Podfile.lock

@@ -9,9 +9,9 @@ PODS:
   - glog (0.3.4)
   - React (0.56.0):
     - React/Core (= 0.56.0)
-  - react-native-video/Video (3.2.2):
+  - react-native-video/Video (4.3.1):
     - React
-  - react-native-video/VideoCaching (3.2.2):
+  - react-native-video/VideoCaching (4.3.1):
     - DVAssetLoaderDelegate (~> 0.3.1)
     - React
     - react-native-video/Video
@@ -73,7 +73,7 @@ DEPENDENCIES:
   - DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
   - Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
   - glog (from `../node_modules/react-native/third-party-podspecs/GLog.podspec`)
-  - react-native-video/VideoCaching (from `../node_modules/react-native-video/react-native-video.podspec`)
+  - react-native-video/VideoCaching (from `../../../react-native-video.podspec`)
   - React/Core (from `../node_modules/react-native`)
   - React/CxxBridge (from `../node_modules/react-native`)
   - React/DevSupport (from `../node_modules/react-native`)
@@ -108,7 +108,7 @@ EXTERNAL SOURCES:
   React:
     :path: "../node_modules/react-native"
   react-native-video:
-    :path: "../node_modules/react-native-video/react-native-video.podspec"
+    :path: "../../../react-native-video.podspec"
   yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga/yoga.podspec"
 
@@ -123,6 +123,6 @@ SPEC CHECKSUMS:
   SPTPersistentCache: df36ea46762d7cf026502bbb86a8b79d0080dff4
   yoga: b1ce48b6cf950b98deae82838f5173ea7cf89e85
 
-PODFILE CHECKSUM: f4123c35c77493d6ddbcb86898737abdf5e0fac8
+PODFILE CHECKSUM: 1e76f1bcc59e8c4c37db77ceb5ed375bef9b5d26
 
 COCOAPODS: 1.5.3

examples/video-caching/rn-cli.config.js

@@ -1,7 +1,19 @@
+"use strict";
+
+const path = require('path');
 const blacklist = require('metro').createBlacklist;
 
+const rootProjectDir = path.resolve(__dirname, '..', '..')
+
 module.exports = {
+  // Resolve react-native-video from parent directory so we do not have to install react-native-video after each change applied
   getBlacklistRE: function() {
-    return blacklist([/node_modules\/react-native-video\/examples\/.*/]);
+    return blacklist([/node_modules\/react-native-video\/.*/, new RegExp(`${rootProjectDir}/node_modules/react-native/.*`)])
+  },
+  getProjectRoots() {
+    return [
+      __dirname, 
+      rootProjectDir
+    ]
   }
 };

ios/Video/RCTVideo.m

@@ -463,6 +463,7 @@ static int const RCTVideoUnset = -1;
 {
   bool isNetwork = [RCTConvert BOOL:[source objectForKey:@"isNetwork"]];
   bool isAsset = [RCTConvert BOOL:[source objectForKey:@"isAsset"]];
+  bool shouldCache = [RCTConvert BOOL:[source objectForKey:@"shouldCache"]];
   NSString *uri = [source objectForKey:@"uri"];
   NSString *type = [source objectForKey:@"type"];
 
@@ -483,7 +484,7 @@ static int const RCTVideoUnset = -1;
     [assetOptions setObject:cookies forKey:AVURLAssetHTTPCookiesKey];
 
 #if __has_include(<react-native-video/RCTVideoCache.h>)
-    if (!_textTracks) {
+    if (shouldCache && (!_textTracks || !_textTracks.count)) {
       /* The DVURLAsset created by cache doesn't have a tracksWithMediaType property, so trying
        * to bring in the text track code will crash. I suspect this is because the asset hasn't fully loaded.
        * Until this is fixed, we need to bypass caching when text tracks are specified.