PRJLTVA-670 React Native common videoclips.json (#38)

* Self review * Update react debbugging docs * Changed to official resources path * Self review * Update JuvoReactNative/index.tizen.js Co-Authored-By: Pawel Panek/Multichannel Video Services (VD) /SRPOL/Staff Engineer/Samsung Electronics <[email protected]> * Update docs/debugging.md Co-Authored-By: Pawel Panek/Multichannel Video Services (VD) /SRPOL/Staff Engineer/Samsung Electronics <[email protected]> * Added notification on videoclips.json download error * Removed redundant if statement * Changed to official videoclips.json path * Review fixes * Fixed scrollview position after leaving deeplink content
SamsungDForum · Sep 7, 2020 · 11c87de · 11c87de
1 parent 3dd3f20
commit 11c87de
Show file tree

Hide file tree

Showing 20 changed files with 95 additions and 293 deletions.
diff --git a/Configuration/Paths.cs b/Configuration/Paths.cs
@@ -22,6 +22,6 @@ namespace Configuration
     public static class Paths
     {
         public const string VideoClipJsonPath =
-             "https://raw.githubusercontent.com/ppaneksamsung/JuvoPlayer/master/Resources/videoclips.json";
+             "https://raw.githubusercontent.com/SamsungDForum/JuvoPlayer/master/Resources/videoclips.json";
     }
 }
diff --git a/JuvoReactNative/images/tiles/artofwalking.png b/JuvoReactNative/images/tiles/artofwalking.png
diff --git a/JuvoReactNative/images/tiles/bolid.png b/JuvoReactNative/images/tiles/bolid.png
diff --git a/JuvoReactNative/images/tiles/bunny.png b/JuvoReactNative/images/tiles/bunny.png
diff --git a/JuvoReactNative/images/tiles/canimals.png b/JuvoReactNative/images/tiles/canimals.png
diff --git a/JuvoReactNative/images/tiles/car.png b/JuvoReactNative/images/tiles/car.png
diff --git a/JuvoReactNative/images/tiles/content_list_bg.png b/JuvoReactNative/images/tiles/content_list_bg.png
diff --git a/JuvoReactNative/images/tiles/oops.png b/JuvoReactNative/images/tiles/oops.png
diff --git a/JuvoReactNative/images/tiles/sacrecoeur.png b/JuvoReactNative/images/tiles/sacrecoeur.png
diff --git a/JuvoReactNative/images/tiles/sintel.png b/JuvoReactNative/images/tiles/sintel.png
diff --git a/JuvoReactNative/images/tiles/testwatchscreen.png b/JuvoReactNative/images/tiles/testwatchscreen.png
diff --git a/JuvoReactNative/images/tiles/tos-poster.png b/JuvoReactNative/images/tiles/tos-poster.png
diff --git a/JuvoReactNative/index.tizen.js b/JuvoReactNative/index.tizen.js
@@ -21,6 +21,7 @@ import ContentCatalog from './src/views/ContentCatalog';
 import PlaybackView from './src/views/PlaybackView';
 import ResourceLoader from "./src/ResourceLoader";
 import InProgressView from "./src/views/InProgressView";
+import NotificationPopup from "./src/views/NotificationPopup";
 
 const {
   CardStack: NavigationCardStack,
@@ -67,8 +68,11 @@ export default class JuvoReactNative extends Component {
     this.onTVKeyDown = this.onTVKeyDown.bind(this);
     this.onTVKeyUp = this.onTVKeyUp.bind(this);
     this.currentView = this.currentView.bind(this);
+    this.finishLoading = this.finishLoading.bind(this);
+    this.renderProgress = this.renderProgress.bind(this);
     this.JuvoPlayer = NativeModules.JuvoPlayer;
     this.JuvoEventEmitter = new NativeEventEmitter(this.JuvoPlayer);
+    this.LoadingPromise = ResourceLoader.load();
   }
 
   onTVKeyDown(pressed) {
@@ -86,6 +90,16 @@ export default class JuvoReactNative extends Component {
     this.JuvoPlayer.AttachDeepLinkListener();
   }
 
+  async componentDidMount() {
+    await this.finishLoading();
+  }
+
+  async finishLoading() {
+    await this.LoadingPromise;
+    this.setState({loading: false});
+    this.forceUpdate();
+  }
+
   currentView()
   {
     return this.state.navState.routes[this.state.navState.index].key;
@@ -110,17 +124,18 @@ export default class JuvoReactNative extends Component {
     this.selectedClipIndex = index;
   }
 
-  handleDeepLink(deepLink) {
+  async handleDeepLink(deepLink) {
     if (deepLink.url !== null) {
+      if (this.state.loading) {
+        await this.finishLoading();
+      }
       let index = ResourceLoader.clipsData.findIndex(e => e.url === deepLink.url);
       if (index !== -1) {
         this.setState({deepLinkIndex: index});
         this.handleSelectedIndexChange(this.state.deepLinkIndex);
         this.switchComponentsView('PlaybackView');
       }
     }
-
-    this.setState({loading: false});
   }
 
   handleAction(action) {
@@ -134,6 +149,22 @@ export default class JuvoReactNative extends Component {
     return true;
   }
 
+  renderProgress() {
+    if (ResourceLoader.errorMessage)
+      return (
+          <View style={[styles.notification]}>
+            <NotificationPopup visible={true} onNotificationPopupDisappeared={this.JuvoPlayer.ExitApp} messageText={ResourceLoader.errorMessage} />
+          </View>
+      );
+    if (this.state.loading)
+      return (
+          <View style={[styles.notification]}>
+            <InProgressView visible={true} message="Please wait..."/>
+          </View>
+      );
+    return null;
+  }
+
   renderRoute(key) {
     if (key === 'ContentCatalog') {
       return <ContentCatalog
@@ -151,37 +182,32 @@ export default class JuvoReactNative extends Component {
   }
 
   renderScene(props) {
+    var progress = this.renderProgress();
+    if (progress)
+      return progress;
     const ComponentToRender = this.renderRoute(props.scene.route.key);
     return (
       ComponentToRender
     );
   }
 
   render() {
-    if (this.state.loading) {
-      return (
-        <View style={{height: "100%", justifyContent: "center", alignItems: "center", backgroundColor: "black"}}>
-          <InProgressView visible={true} message="Please wait..."/>
-        </View>
-      );
-    } else {
       return (
         <NavigationCardStack
           cardStyle={{backgroundColor: 'transparent'}}
           navigationState={this.state.navState}
           onNavigate={this.handleAction.bind(this)}
           renderScene={this.renderScene.bind(this)}/>
       );
-    }
   }
 }
 
 const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    backgroundColor: 'transparent',
-    width: Dimensions.get('window').width,
-    height: Dimensions.get('window').height,
+  notification: {
+    height: "100%", 
+    justifyContent: "center", 
+    alignItems: "center", 
+    backgroundColor: "black"
   }
 });
 

diff --git a/JuvoReactNative/src/ResourceLoader.js b/JuvoReactNative/src/ResourceLoader.js
@@ -1,63 +1,27 @@
-import videoclipsdata from '../videoclips.json';
-
-const ResourceLoader = {
-  tileNames: ['car', 'bolid', 'sintel', 'oops', 'tosposter', 'artofwalking', 'tosposter', 'bunny', 'sintel', 'sacrecoeur', 'tosposter', 'canimals', 'testwatchscreen', 'bunny'],
-  tilesPath: {
-    car: require('../images/tiles/car.png'),
-    bolid: require('../images/tiles/bolid.png'),
-    sintel: require('../images/tiles/sintel.png'),
-    oops: require('../images/tiles/oops.png'),
-    tosposter: require('../images/tiles/tos-poster.png'),
-    artofwalking: require('../images/tiles/artofwalking.png'),
-    bunny: require('../images/tiles/bunny.png'),
-    sacrecoeur: require('../images/tiles/sacrecoeur.png'),
-    canimals: require('../images/tiles/canimals.png'),
-    testwatchscreen: require('../images/tiles/testwatchscreen.png'),
-    default: require('../images/tiles/default_bg.png'),
-    contentDescriptionBackground: require('../images/tiles/content_list_bg.png')
-  },
-  tilePathSelect: name => {
-    if (name === null) return ResourceLoader.tilesPath.default;
-
-    const tileArray = {
-      car: ResourceLoader.tilesPath.car,
-      bolid: ResourceLoader.tilesPath.bolid,
-      sintel: ResourceLoader.tilesPath.sintel,
-      oops: ResourceLoader.tilesPath.oops,
-      tosposter: ResourceLoader.tilesPath.tosposter,
-      artofwalking: ResourceLoader.tilesPath.artofwalking,
-      bunny: ResourceLoader.tilesPath.bunny,
-      sacrecoeur: ResourceLoader.tilesPath.sacrecoeur,
-      canimals: ResourceLoader.tilesPath.canimals,
-      testwatchscreen: ResourceLoader.tilesPath.testwatchscreen,
-      default: ResourceLoader.tilesPath.default,
-      contentDescriptionBackground: ResourceLoader.tilesPath.contentDescriptionBackground
-    };
-    if (tileArray[name] == null) return ResourceLoader.tilesPath.default;
-    return tileArray[name];
-  },
-  clipsData: videoclipsdata,
-  playbackIconsPath: {
-    play: require('../images/btn_viewer_control_play_normal.png'),
-    ffw: require('../images/btn_viewer_control_forward_normal.png'),
-    rew: require('../images/btn_viewer_control_back_normal.png'),
-    set: require('../images/btn_viewer_control_settings_normal.png'),
-    pause: require('../images/btn_viewer_control_pause_normal.png')
-  },
-  playbackIconsPathSelect: name => {
-    if (name === null) return ResourceLoader.tilesPath.default;
-
-    const tileArray = {
-      play: ResourceLoader.playbackIconsPath.play,
-      ffw: ResourceLoader.playbackIconsPath.ffw,
-      rew: ResourceLoader.playbackIconsPath.rew,
-      set: ResourceLoader.playbackIconsPath.set,
-      pause: ResourceLoader.playbackIconsPath.pause,
-      default: ResourceLoader.tilesPath.default
-    };
-    if (tileArray[name] == null) return ResourceLoader.tilesPath.default;
-    return tileArray[name];
-  }
-};
-
-export default ResourceLoader;
+import { NativeModules } from 'react-native';
+
+const ResourceLoader = {
+    path: 'https://raw.githubusercontent.com/SamsungDForum/JuvoPlayer/master/Resources/',
+    clipsData: [],
+    errorMessage: '',
+    load: () => fetch(ResourceLoader.path + 'videoclips.json').then((response) => response.json())
+        .then((responseJson) => {
+            ResourceLoader.clipsData = responseJson;
+            ResourceLoader.tilePaths = responseJson.map((clip) => ResourceLoader.path + clip.poster);
+        })
+        .catch((error) => {
+            ResourceLoader.errorMessage = error;
+        }),
+    tilePaths: [],
+    contentDescriptionBackground: require('../images/tiles/content_list_bg.png'),
+    defaultImage: require('../images/tiles/default_bg.png'),
+    playbackIcons: {
+        play: require('../images/btn_viewer_control_play_normal.png'),
+        ffw: require('../images/btn_viewer_control_forward_normal.png'),
+        rew: require('../images/btn_viewer_control_back_normal.png'),
+        set: require('../images/btn_viewer_control_settings_normal.png'),
+        pause: require('../images/btn_viewer_control_pause_normal.png')
+    }
+}
+
+export default ResourceLoader;
diff --git a/JuvoReactNative/src/views/ContentCatalog.js b/JuvoReactNative/src/views/ContentCatalog.js
@@ -89,25 +89,24 @@ export default class ContentCatalog extends Component {
   }
   render() {
     const index = this.state.selectedClipIndex ? this.state.selectedClipIndex : 0;
-    const uri = ResourceLoader.tileNames[index];
-    const path = ResourceLoader.tilePathSelect(uri);
-    const overlay = ResourceLoader.tilesPath.contentDescriptionBackground;
+    const path = ResourceLoader.tilePaths[index];
+    const overlay = ResourceLoader.contentDescriptionBackground;
     this.keysListenningOff = !this.props.visibility;
     const showBigPicture = this.bigPictureVisible;
     return (
       <HideableView visible={this.props.visibility} duration={300}>
         <View style={[styles.page, { alignItems: 'flex-end' }]}>
           <View style={[styles.cell, { height: '70%', width: '70%' }]}>
             <HideableView visible={showBigPicture} duration={100}>
-              <ContentPicture source={uri} selectedIndex={index} path={path} onLoadEnd={this.handleBigPicLoadEnd} onLoadStart={this.handleBigPicLoadStart} width={'100%'} height={'100%'} />
+              <ContentPicture selectedIndex={index} path={path} onLoadEnd={this.handleBigPicLoadEnd} onLoadStart={this.handleBigPicLoadStart} width={'100%'} height={'100%'} />
             </HideableView>
-            <ContentPicture position={'absolute'} source={uri} selectedIndex={index} path={overlay} width={'100%'} height={'100%'} />
+            <ContentPicture position={'absolute'} source={overlay} selectedIndex={index} width={'100%'} height={'100%'} />
           </View>
         </View>
         <View style={[styles.page, { position: 'absolute' }]}>
           <ContentScroll
             onSelectedIndexChange={this.handleSelectedIndexChange}
-            contentURIs={ResourceLoader.tileNames}
+            contentURIs={ResourceLoader.tilePaths}
             keysListenningOff={this.keysListenningOff}
             deepLinkIndex={this.props.deepLinkIndex}
           />

diff --git a/JuvoReactNative/src/views/ContentPicture.js b/JuvoReactNative/src/views/ContentPicture.js
@@ -17,7 +17,7 @@ export default class ContentPicture extends React.Component {
 
   render() {
     const index = typeof this.props.myIndex !== 'undefined' ? this.props.myIndex : this.props.selectedIndex;
-    const path = this.props.path ? this.props.path : ResourceLoader.tilesPath.default;
+    const source = this.props.path ? {uri: this.props.path} : this.props.source ? this.props.source : ResourceLoader.defaultImage;
     const imageWidth = this.props.width ? this.props.width : 1920;
     const imageHeight = this.props.height ? this.props.height : 1080;
     const top = this.props.top ? this.props.top : 0;
@@ -42,7 +42,7 @@ export default class ContentPicture extends React.Component {
                 top: top,
                 left: left
               }}
-              source={path}
+              source={source}
               onLoadStart={onLoadStart}
               onLoadEnd={onLoadEnd}
             />
@@ -61,7 +61,7 @@ export default class ContentPicture extends React.Component {
                 top: top,
                 left: left
               }}
-              source={path}
+              source={source}
               onLoadStart={this.props.onLoadStart}
               onLoadEnd={this.props.onLoadEnd}
               onError={error => {

diff --git a/JuvoReactNative/src/views/ContentScroll.js b/JuvoReactNative/src/views/ContentScroll.js
@@ -59,7 +59,7 @@ export default class ContentScroll extends React.Component {
     this.deepLinkIndex = nextProps.deepLinkIndex;
     this.curIndex = this.deepLinkIndex;
     this.scrolloffset = this.curIndex * this.itemWidth;
-    this._scrollView.scrollTo({ x: this.scrolloffset, y: 0, animated: false });
+    setTimeout(() => this._scrollView.scrollTo({ x: this.scrolloffset, y: 0, animated: false }), 100);
     this.setState({ selectedIndex: this.curIndex });
   }
 
@@ -92,20 +92,18 @@ export default class ContentScroll extends React.Component {
 
   render() {
     const index = this.state.selectedIndex;
-    const pathFinder = ResourceLoader.tilePathSelect;
     const title = ResourceLoader.clipsData[index].title;
     const description = ResourceLoader.clipsData[index].description;
     const itemWidth = 454;
     const itemHeight = 260;
-    const overlayPath = ResourceLoader.playbackIconsPathSelect('play');
+    const overlayIcon = ResourceLoader.playbackIcons.play;
     const renderThumbs = (uri, i) => (
       <View key={i}>
-        <Image resizeMode='cover' style={{ top: itemHeight / 2 + 35, left: itemWidth / 2 - 25 }} source={overlayPath} />
+        <Image resizeMode='cover' style={{ top: itemHeight / 2 + 35, left: itemWidth / 2 - 25 }} source={overlayIcon} />
         <ContentPicture
-          source={uri}
           myIndex={i}
           selectedIndex={index}
-          path={pathFinder(uri)}
+          path={uri}
           width={itemWidth - 8}
           height={itemHeight - 8}
           top={4}

diff --git a/JuvoReactNative/src/views/PlaybackView.js b/JuvoReactNative/src/views/PlaybackView.js
@@ -335,10 +335,10 @@ export default class PlaybackView extends React.Component {
     this.streamsData.selectedIndex = index;
     const title = ResourceLoader.clipsData[index].title;
     const fadeduration = 300;
-    const revIconPath = ResourceLoader.playbackIconsPathSelect('rew');
-    const ffwIconPath = ResourceLoader.playbackIconsPathSelect('ffw');
-    const settingsIconPath = ResourceLoader.playbackIconsPathSelect('set');
-    const playIconPath = this.playerState !== 'Playing' ? ResourceLoader.playbackIconsPathSelect('play') : ResourceLoader.playbackIconsPathSelect('pause');
+    const revIconPath = ResourceLoader.playbackIcons.rew;
+    const ffwIconPath = ResourceLoader.playbackIcons.ffw;
+    const settingsIconPath = ResourceLoader.playbackIcons.set;
+    const playIconPath = this.playerState !== 'Playing' ? ResourceLoader.playbackIcons.play : ResourceLoader.playbackIcons.pause;
     const visibility = this.props.visibility ? this.props.visibility : true;
 
     this.keysListenningOff = this.showSettingsView || this.showNotificationPopup;