Update webview

Add screen rotation on video playback

App.js

@@ -7,11 +7,11 @@ import * as Font from 'expo-font';
 import { Ionicons } from '@expo/vector-icons';
 
 import AppNavigator from './navigation/AppNavigator';
-import Colors from './constants/Colors'
+import Colors from './constants/Colors';
 
 export default class App extends React.Component {
   state = {
-    isLoadingComplete: false,
+    isLoadingComplete: false
   };
 
   componentDidMount() {

package-lock.json

@@ -16259,6 +16259,15 @@
       "resolved": "https://registry.npmjs.org/react-native-view-shot/-/react-native-view-shot-2.6.0.tgz",
       "integrity": "sha512-yO9vWi/11m2hEJl8FrW1SMeVzFfPtMKh20MUInGqlsL0H8Ya2JGGlFfrBzx1KiFR2hFb5OdsTLYNtcVZtJ6pLQ=="
     },
+    "react-native-webview": {
+      "version": "5.12.1",
+      "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-5.12.1.tgz",
+      "integrity": "sha512-pFYzyNUG+k7Jk2a0Z3S1+OL9qtp0VQxVP08d1ume/O6l1Xibi0K0hRZms7zPUHqQc2uWEfjZ0FOa17MIN7vruw==",
+      "requires": {
+        "escape-string-regexp": "1.0.5",
+        "invariant": "2.2.4"
+      }
+    },
     "react-navigation": {
       "version": "3.11.1",
       "resolved": "https://registry.npmjs.org/react-navigation/-/react-navigation-3.11.1.tgz",

package.json

@@ -19,6 +19,7 @@
     "react-native": "https://github.com/expo/react-native/archive/sdk-34.0.0.tar.gz",
     "react-native-gesture-handler": "^1.3.0",
     "react-native-reanimated": "^1.1.0",
+    "react-native-webview": "^5.12.1",
     "react-navigation": "^3.0.9",
     "url-parse": "^1.4.7"
   },

screens/HomeScreen.js

@@ -1,5 +1,8 @@
 import React from 'react';
-import { StyleSheet, View, WebView } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
+import { WebView } from 'react-native-webview';
+import { ScreenOrientation } from 'expo';
+import Url from 'url-parse';
 
 import Colors from '../constants/Colors';
 import StorageKeys from '../constants/Storage';
@@ -13,7 +16,8 @@ const loading = () => (
 
 export default class HomeScreen extends React.Component {
   state = {
-    server: null
+    server: null,
+    isVideoPlaying: false
   };
 
   static navigationOptions = {
@@ -28,10 +32,46 @@ export default class HomeScreen extends React.Component {
     this.setState({ server });
   }
 
+  onNavigationChange(navigation) {
+    const url = new Url(navigation.url);
+    this.setState({
+      url,
+      isVideoPlaying: url.hash && url.hash === '#!/videoosd.html'
+    });
+  }
+
+  async updateScreenOrientation() {
+    let lock;
+    if (this.state.isVideoPlaying) {
+      // Lock to landscape orientation
+      lock = ScreenOrientation.OrientationLock.LANDSCAPE;
+    } else if (Platform.OS === 'ios' && Platform.isPad) {
+      // Allow screen rotation on iPad
+      lock = ScreenOrientation.OrientationLock.ALL;
+    } else {
+      // Lock phone devices to Portrait
+      if (Platform.OS === 'ios') {
+        // Workaround a bug where PORTRAIT orientation lock does not rotate iOS device
+        // https://github.com/expo/expo/issues/4646
+        lock = ScreenOrientation.OrientationLock.PORTRAIT_UP;
+      } else {
+        lock = ScreenOrientation.OrientationLock.PORTRAIT;
+      }
+    }
+    console.log('updateScreenOrientation', lock);
+    ScreenOrientation.lockAsync(lock);
+  }
+
   componentDidMount() {
     this.bootstrapAsync();
   }
 
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.isVideoPlaying !== this.state.isVideoPlaying) {
+      this.updateScreenOrientation();
+    }
+  }
+
   render() {
     if (!this.state.server || !this.state.server.url) {
       return loading();
@@ -41,6 +81,36 @@ export default class HomeScreen extends React.Component {
       <WebView
         source={{ uri: JellyfinValidator.getServerUrl(this.state.server) }}
         style={styles.container}
+
+        // Inject javascript to watch URL hash changes
+        injectedJavaScript={`
+          (function() {
+            function wrap(fn) {
+              return function wrapper() {
+                var res = fn.apply(this, arguments);
+                window.ReactNativeWebView.postMessage('navigationStateChange');
+                return res;
+              }
+            }
+
+            history.pushState = wrap(history.pushState);
+            history.replaceState = wrap(history.replaceState);
+            window.addEventListener('popstate', function() {
+              window.ReactNativeWebView.postMessage('navigationStateChange');
+            });
+          })();
+
+          true;
+        `}
+        onMessage={({ nativeEvent: state }) => {
+          // console.debug('message', state);
+          if (state.data === 'navigationStateChange') {
+            this.onNavigationChange(state);
+          }
+        }}
+
+        // Make scrolling feel faster
+        decelerationRate='normal'
         // Display loading indicator
         startInLoadingState={true}
         renderLoading={loading}