extended cast controls on android

app.json

@@ -71,6 +71,12 @@
           }
         }
       ],
+      [
+        "./plugins/withAndroidMainActivityAttributes",
+        {
+          "com.reactnative.googlecast.RNGCExpandedControllerActivity": true
+        }
+      ],
       [
         "expo-build-properties",
         {

components/PlayButton.tsx

@@ -22,6 +22,7 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import { Button } from "./Button";
+import { isCancel } from "axios";
 
 interface Props extends React.ComponentProps<typeof Button> {
   item?: BaseItemDto | null;
@@ -33,9 +34,8 @@ const MIN_PLAYBACK_WIDTH = 15;
 
 export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
   const { showActionSheetWithOptions } = useActionSheet();
-  const { setCurrentlyPlayingState } = usePlayback();
-
   const client = useRemoteMediaClient();
+  const { setCurrentlyPlayingState, isPlaying, currentlyPlaying } = usePlayback();
 
   const [colorAtom] = useAtom(itemThemeColorAtom);
 
@@ -63,12 +63,22 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
         cancelButtonIndex,
       },
       async (selectedIndex: number | undefined) => {
+        const isOpeningCurrentlyPlayingMedia = isPlaying 
+          && currentlyPlaying?.item?.Name 
+          && currentlyPlaying?.item?.Name === item?.Name
         switch (selectedIndex) {
           case 0:
             await CastContext.getPlayServicesState().then((state) => {
               if (state && state !== PlayServicesState.SUCCESS)
                 CastContext.showPlayServicesErrorDialog(state);
               else {
+                // If we're opening a currently playing item, don't restart the media.
+                // Instead just open controls
+                console.log({ isOpeningCurrentlyPlayingMedia, currentlyPlaying })
+                if (isOpeningCurrentlyPlayingMedia) {
+                  CastContext.showExpandedControls();
+                  return;
+                }
                 client.loadMedia({
                   mediaInfo: {
                     contentUrl: url,
@@ -80,6 +90,14 @@ export const PlayButton: React.FC<Props> = ({ item, url, ...props }) => {
                     },
                   },
                   startTime: 0,
+                }).then(() => {
+                  if (isOpeningCurrentlyPlayingMedia) {
+                    return
+                  }
+                  setCurrentlyPlayingState({ item, url });
+                  CastContext.showExpandedControls();
+                }).catch(e => {
+                  console.log({ e })
                 });
               }
             });

plugins/withAndroidMainActivityAttributes.js

@@ -0,0 +1,42 @@
+const { withAndroidManifest } = require("@expo/config-plugins");
+
+function addAttributesToMainActivity(androidManifest, attributes) {
+  const { manifest } = androidManifest;
+
+  if (!Array.isArray(manifest["application"])) {
+    console.warn("withAndroidMainActivityAttributes: No application array in manifest?");
+    return androidManifest;
+  }
+
+  const application = manifest["application"].find(
+    (item) => item.$["android:name"] === ".MainApplication"
+  );
+  if (!application) {
+    console.warn("withAndroidMainActivityAttributes: No .MainApplication?");
+    return androidManifest;
+  }
+
+  if (!Array.isArray(application["activity"])) {
+    console.warn("withAndroidMainActivityAttributes: No activity array in .MainApplication?");
+    return androidManifest;
+  }
+
+  const activity = application["activity"].find(
+    (item) => item.$["android:name"] === ".MainActivity"
+  );
+  if (!activity) {
+    console.warn("withAndroidMainActivityAttributes: No .MainActivity?");
+    return androidManifest;
+  }
+
+  activity.$ = { ...activity.$, ...attributes };
+
+  return androidManifest;
+}
+
+module.exports = function withAndroidMainActivityAttributes(config, attributes) {
+  return withAndroidManifest(config, (config) => {
+    config.modResults = addAttributesToMainActivity(config.modResults, attributes);
+    return config;
+  });
+};

providers/PlaybackProvider.tsx

@@ -224,7 +224,7 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
   useEffect(() => {
     if (!deviceId || !api?.accessToken) return;
 
-    const url = `wss://${api?.basePath
+    const url = `ws://${api?.basePath
       .replace("https://", "")
       .replace("http://", "")}/socket?api_key=${
       api?.accessToken