Merge pull request #2152 from StoDevX/android-ksto-fixes

Make the KSTO stream a bit less hacksy

Author: hawkrives

source/views/streaming/radio/controller.js

@@ -8,7 +8,9 @@ import {
   StyleSheet,
   Text,
   View,
+  Platform,
 } from 'react-native'
+import noop from 'lodash/noop'
 import * as c from '../../components/colors'
 import {TabBarIcon} from '../../components/tabbar-icon'
 import {callPhone} from '../../components/call-phone'
@@ -17,9 +19,11 @@ import type {TopLevelViewPropsType} from '../../types'
 import {StreamPlayer} from './player'
 import type {PlayState, HtmlAudioError, Viewport} from './types'
 import {ActionButton, ShowCalendarButton, CallButton} from './buttons'
+import {openUrl} from '../../components/open-url'
 
 const image = require('../../../../images/streaming/ksto/ksto-logo.png')
 const stationNumber = '+15077863602'
+const kstoLiveUrl = 'https://www.stolaf.edu/multimedia/play/embed/ksto.html'
 
 type Props = TopLevelViewPropsType
 
@@ -87,7 +91,21 @@ export class KSTOView extends React.PureComponent<Props, State> {
     callPhone(stationNumber)
   }
 
+  openStreamWebsite = () => {
+    openUrl(kstoLiveUrl)
+  }
+
   renderPlayButton = (state: PlayState) => {
+    if (Platform.OS === 'android') {
+      return (
+        <ActionButton
+          icon="ios-planet"
+          onPress={this.openStreamWebsite}
+          text="Open"
+        />
+      )
+    }
+
     switch (state) {
       case 'paused':
         return (
@@ -105,7 +123,7 @@ export class KSTOView extends React.PureComponent<Props, State> {
         )
 
       default:
-        return <ActionButton icon="ios-bug" onPress={() => {}} text="Error" />
+        return <ActionButton icon="ios-bug" onPress={noop} text="Error" />
     }
   }
 
@@ -163,16 +181,18 @@ export class KSTOView extends React.PureComponent<Props, State> {
             <ShowCalendarButton onPress={this.openSchedule} />
           </Row>
 
-          <StreamPlayer
-            onEnded={this.handleStreamEnd}
-            // onWaiting={this.handleStreamWait}
-            onError={this.handleStreamError}
-            // onStalled={this.handleStreamStall}
-            onPause={this.handleStreamPause}
-            onPlay={this.handleStreamPlay}
-            playState={this.state.playState}
-            style={styles.webview}
-          />
+          {Platform.OS !== 'android' ? (
+            <StreamPlayer
+              onEnded={this.handleStreamEnd}
+              // onWaiting={this.handleStreamWait}
+              onError={this.handleStreamError}
+              // onStalled={this.handleStreamStall}
+              onPause={this.handleStreamPause}
+              onPlay={this.handleStreamPlay}
+              playState={this.state.playState}
+              style={styles.webview}
+            />
+          ) : null}
         </View>
       </ScrollView>
     )

source/views/streaming/radio/player.js

@@ -4,7 +4,7 @@ import * as React from 'react'
 import {WebView} from 'react-native'
 import type {PlayState, HtmlAudioError} from './types'
 
-const kstoStream = 'https://cdn.stobcm.com/radio/ksto1.stream/master.m3u8'
+const kstoEmbed = 'https://www.stolaf.edu/multimedia/play/embed/ksto.html'
 
 type Props = {
   playState: PlayState,
@@ -99,92 +99,98 @@ export class StreamPlayer extends React.PureComponent<Props> {
 
   setRef = (ref: WebView) => (this._webview = ref)
 
-  html = (url: string) => `
-    <style>body {background-color: white;}</style>
-
-    <title>KSTO Stream</title>
-
-    <audio id="player" webkit-playsinline playsinline>
-      <source src="${url}" />
-    </audio>
+  js = `
+    function ready(fn) {
+      if (document.readyState !== 'loading') {
+        fn();
+      } else if (document.addEventListener) {
+        document.addEventListener('DOMContentLoaded', fn);
+      } else {
+        document.attachEvent('onreadystatechange', function () {
+          if (document.readyState !== 'loading') {
+            fn();
+          }
+        });
+      }
+    };
 
-    <script>
-      var player = document.getElementById('player')
+    ready(function () {
+      var player = document.querySelector('audio');
 
-      /////
-      /////
+      /*******
+       *******/
 
-      document.addEventListener('message', function(event) {
+      document.addEventListener('message', function (event) {
         switch (event.data) {
           case 'play':
-            player.play()
-            break
+            player.muted = false;
+            player.play().catch(error);
+            break;
 
           case 'pause':
-            player.pause()
-            break
+            player.pause();
+            break;
         }
-      })
+      });
 
-      /////
-      /////
+      /*******
+       *******/
 
       function message(data) {
-        window.postMessage(JSON.stringify(data))
+        window.postMessage(JSON.stringify(data));
       }
 
       function send(event) {
-        message({type: event.type})
+        message({type: event.type});
       }
 
       function error(event) {
         message({
           type: event.type,
-          error: {
-            code: event.target.error.code,
-            message: event.target.error.message,
-          },
-        })
+          error: 'error',
+        });
       }
 
-      /////
-      /////
+      /*******
+       *******/
 
-      // "waiting" is fired when playback has stopped because of a temporary
-      // lack of data.
-      player.addEventListener('waiting', send)
+      /* "waiting" is fired when playback has stopped because of a temporary
+       * lack of data. */
+      player.addEventListener('waiting', send);
 
-      // "ended" is fired when playback or streaming has stopped because the
-      // end of the media was reached or because no further data is
-      // available.
-      player.addEventListener('ended', send)
+      /* "ended" is fired when playback or streaming has stopped because the
+       * end of the media was reached or because no further data is
+       * available. */
+      player.addEventListener('ended', send);
 
-      // "stalled" is fired when the user agent is trying to fetch media data,
-      // but data is unexpectedly not forthcoming.
-      player.addEventListener('stalled', send)
+      /* "stalled" is fired when the user agent is trying to fetch media data,
+       * but data is unexpectedly not forthcoming. */
+      player.addEventListener('stalled', send);
 
-      // "playing" is fired when playback is ready to start after having been
-      // paused or delayed due to lack of data.
-      player.addEventListener('playing', send)
+      /* "playing" is fired when playback is ready to start after having been
+       * paused or delayed due to lack of data. */
+      player.addEventListener('playing', send);
 
-      // "pause" is fired when playback has been paused.
-      player.addEventListener('pause', send)
+      /* "pause" is fired when playback has been paused. */
+      player.addEventListener('pause', send);
 
-      // "play" is fired when playback has begun.
-      player.addEventListener('play', send)
+      /* "play" is fired when playback has begun. */
+      player.addEventListener('play', send);
 
-      // "error" is fired when an error occurs.
-      player.addEventListener('error', error)
-    </script>`
+      /* "error" is fired when an error occurs. */
+      player.addEventListener('error', error);
+    });
+  `
 
   render() {
     return (
       <WebView
         ref={this.setRef}
         allowsInlineMediaPlayback={true}
+        injectedJavaScript={this.js}
         mediaPlaybackRequiresUserAction={false}
         onMessage={this.handleMessage}
-        source={{html: this.html(kstoStream)}}
+        source={{uri: kstoEmbed}}
         style={this.props.style}
       />
     )