Add AirPlay casting button

package-lock.json

@@ -9061,6 +9061,11 @@
         }
       }
     },
+    "react-native-airplay-button": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/react-native-airplay-button/-/react-native-airplay-button-1.0.4.tgz",
+      "integrity": "sha512-iMRgiYdHga/XhAEaedyYleR2oM7oE0f3LuKWLFM34ggHYMWYDKR/f5ttJ1qDMiuks592xJOUfzfzYzwRK8ZTyQ=="
+    },
     "react-native-codegen": {
       "version": "0.0.6",
       "resolved": "https://registry.npmjs.org/react-native-codegen/-/react-native-codegen-0.0.6.tgz",

package.json

@@ -28,6 +28,7 @@
     "lodash": "^4.17.21",
     "react": "17.0.1",
     "react-native": "0.64.0",
+    "react-native-airplay-button": "^1.0.4",
     "react-native-collapsible": "^1.5.3",
     "react-native-dotenv": "^2.5.1",
     "react-native-fast-image": "^8.3.4",

src/screens/Player/components/Casting.android.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import styled from 'styled-components/native';
+
+const Button = styled.View`
+    margin: 20px 40px;
+`;
+
+function Casting() {
+    return (
+        <Button />
+    );
+}
+
+export default Casting;

src/screens/Player/components/Casting.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export interface CastingProps {
+    fill?: string;
+}
+
+declare const CastingComponent: React.FC<CastingProps>;
+
+export default CastingComponent;

src/screens/Player/components/Casting.ios.tsx

@@ -0,0 +1,25 @@
+import { THEME_COLOR } from 'CONSTANTS';
+import React from 'react';
+import AirPlayButton from 'react-native-airplay-button';
+import styled from 'styled-components/native';
+import { CastingProps } from './Casting';
+
+const Button = styled.View`
+    margin: 20px 40px;
+`;
+
+function Casting({ fill }: CastingProps) {
+    return (
+        <>
+            <Button>
+                <AirPlayButton 
+                    activeTintColor={THEME_COLOR}
+                    tintColor={fill}
+                    style={{ width: 40, height: 40 }}
+                />
+            </Button>
+        </>
+    );
+}
+
+export default Casting;

src/screens/Player/components/MediaControls.tsx

@@ -10,6 +10,7 @@ import PauseIcon from 'assets/pause.svg';
 import RepeatIcon from 'assets/repeat.svg';
 // import ShuffleIcon from 'assets/shuffle.svg';
 import { THEME_COLOR } from 'CONSTANTS';
+import Casting from './Casting';
 
 const BUTTON_SIZE = 40;
 const BUTTON_SIZE_SMALL = 25;
@@ -54,9 +55,7 @@ export default function MediaControls() {
                 <Button>
                     <RepeatButton fill={fill} />
                 </Button>
-                <Button>
+                <Casting fill={fill} />
-                    {/* <ShuffleButton fill={fill} /> */}
-                </Button>
             </Buttons>
         </Container>
     );