fix: omit packager assets from caching

TheWidlarzGroup · Jan 22, 2019 · 3df20ff · 3df20ff
1 parent 35e2642
commit 3df20ff
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 28 deletions.
diff --git a/CHANGELOG.md b/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)

diff --git a/Video.js b/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,

diff --git a/examples/video-caching/App.ios.js b/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
-          onPress={async () => {
-            let response = await this.player.save();
-            let uri = response.uri;
-            console.log("Download URI", uri);
-          }}
-          style={styles.button}
-        >
-          <Text style={{color: 'white'}}>Save</Text>
-        </TouchableOpacity>
+        <View style={styles.absoluteOverlay}>
+          <Button
+            onPress={async () => {
+              let response = await this.player.save();
+              let uri = response.uri;
+              console.warn("Download URI", uri);
+            }}
+            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,

diff --git a/ios/Video/RCTVideo.m b/ios/Video/RCTVideo.m
@@ -463,6 +463,7 @@ - (void)playerItemForSource:(NSDictionary *)source withCallback:(void(^)(AVPlaye
 {
   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,14 +484,16 @@ - (void)playerItemForSource:(NSDictionary *)source withCallback:(void(^)(AVPlaye
     [assetOptions setObject:cookies forKey:AVURLAssetHTTPCookiesKey];
 
 #if __has_include(<react-native-video/RCTVideoCache.h>)
-    if (!_textTracks) {
-      /* 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.
-       */
-      DebugLog(@"Caching is not supported for uri '%@' because text tracks are not compatible with the cache. Checkout https://github.com/react-native-community/react-native-video/blob/master/docs/caching.md", uri);
-      [self playerItemForSourceUsingCache:uri assetOptions:assetOptions withCallback:handler];
-      return;
+    if (shouldCache) {
+      if (!_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.
+         */
+        DebugLog(@"Caching is not supported for uri '%@' because text tracks are not compatible with the cache. Checkout https://github.com/react-native-community/react-native-video/blob/master/docs/caching.md", uri);
+        [self playerItemForSourceUsingCache:uri assetOptions:assetOptions withCallback:handler];
+        return;
+      }
     }
 #endif