From 5e87fa06998393894928805e33d0e4fab07860da Mon Sep 17 00:00:00 2001
From: Alex Dodge <alexdodg@twitch.tv>
Date: Tue, 25 Jan 2022 12:56:15 -0400
Subject: [PATCH] fix: duplicate buffer icons

* Resolves issue where duplicate buffer icons were displaying
  in the sample app
* Comment added around default buffer UI included in Android
  player, with notes about how to udpate styling
---
 example/android/app/src/main/res/values/styles.xml | 1 +
 example/src/screens/AdvancedExample.tsx            | 9 +++++++--
 example/src/screens/PlaygroundExample.tsx          | 8 +++++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/example/android/app/src/main/res/values/styles.xml b/example/android/app/src/main/res/values/styles.xml
index 9fab0be..243da78 100644
--- a/example/android/app/src/main/res/values/styles.xml
+++ b/example/android/app/src/main/res/values/styles.xml
@@ -4,6 +4,7 @@
     <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
         <!-- Customize your theme here. -->
         <item name="android:textColor">#000000</item>
+        <item name="android:indeterminateTint">@android:color/white</item>
     </style>
 
 </resources>
diff --git a/example/src/screens/AdvancedExample.tsx b/example/src/screens/AdvancedExample.tsx
index 042d44b..28a109a 100644
--- a/example/src/screens/AdvancedExample.tsx
+++ b/example/src/screens/AdvancedExample.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
-import { Dimensions, StyleSheet, View } from 'react-native';
+import { Dimensions, StyleSheet, View, Platform } from 'react-native';
 import IVSPlayer, { IVSPlayerRef, PlayerState } from 'amazon-ivs-react-native';
 import { IconButton, ActivityIndicator, Text } from 'react-native-paper';
 import Slider from '@react-native-community/slider';
@@ -55,7 +55,12 @@ export default function AdvancedExample() {
   return (
     <View style={styles.container}>
       <View style={styles.playerContainer}>
-        {buffering ? (
+        {/*
+          Note: A buffering indicator is included by default on Android. It's
+          styling is managed in /example/android/app/src/main/res/values/styles.xml
+          by adjusting the 'android:indeterminateTint'.
+        */}
+        {buffering && Platform.OS === 'ios' ? (
           <ActivityIndicator
             animating={true}
             size="large"
diff --git a/example/src/screens/PlaygroundExample.tsx b/example/src/screens/PlaygroundExample.tsx
index 584b439..39244a9 100644
--- a/example/src/screens/PlaygroundExample.tsx
+++ b/example/src/screens/PlaygroundExample.tsx
@@ -15,6 +15,7 @@ import {
   Portal,
   Title,
 } from 'react-native-paper';
+import { Platform } from 'react-native';
 import Slider from '@react-native-community/slider';
 import type { StackNavigationProp } from '@react-navigation/stack';
 import { useNavigation } from '@react-navigation/native';
@@ -102,7 +103,12 @@ export default function PlaygroundExample() {
   return (
     <View style={styles.container}>
       <View style={styles.playerContainer}>
-        {buffering ? (
+        {/*
+          Note: A buffering indicator is included by default on Android. It's
+          styling is managed in /example/android/app/src/main/res/values/styles.xml
+          by adjusting the 'android:indeterminateTint'.
+        */}
+        {buffering && Platform.OS === 'ios' ? (
           <ActivityIndicator
             animating={true}
             size="large"