Publish BetterSpotifyIntegration

plugins/BetterSpotifyIntegration/manifest.json

@@ -0,0 +1,6 @@
+{
+    "name": "BetterSpotifyIntegration",
+    "description": "Shrimply better integration with Spotify",
+    "vendetta": { },
+    "main": "src/index.tsx"
+}

plugins/BetterSpotifyIntegration/src/components/ListenAlongButton.tsx

@@ -0,0 +1,38 @@
+import { findByProps, findByStoreName } from "@vendetta/metro";
+import { getAssetIDByName } from "@vendetta/ui/assets";
+import { Image, View } from "react-native";
+
+const FluxUtils = findByProps("useStateFromStores");
+const SpotifyStore = findByStoreName("SpotifyStore");
+
+const Button = findByProps("Sizes", "Looks") as any;
+const SpotifySyncUtil = findByProps("play", "sync");
+
+interface ListenAlongButtonProps {
+    activity: any;
+    user: any;
+    isCurrentUser: boolean;
+    activityButtonColor: string;
+}
+
+export default function ListenAlongButton(props: ListenAlongButtonProps) {
+    const currentPartyId = FluxUtils.useStateFromStores([SpotifyStore], () => SpotifyStore.getActivity()?.party?.id);
+    const alreadySync = props.isCurrentUser || props.activity?.party?.id === currentPartyId;
+
+    return <View pointerEvents={alreadySync ? "none" : "auto"}>
+        <Button
+            text={!alreadySync ? "Listen Along" : "You are already along for this ride"}
+            size={Button.Sizes.SMALL}
+            style={{
+                marginTop: 12,
+                backgroundColor: props.activityButtonColor,
+                opacity: alreadySync ? 0.5 : 1
+            }}
+            renderIcon={() => <Image
+                style={{ height: 16, width: 16, marginRight: 8, tintColor: "white" }}
+                source={getAssetIDByName("ic_headphone")}
+            />}
+            onPress={() => void SpotifySyncUtil.sync(props.activity, props.user.id)}
+        />
+    </View>;
+}

plugins/BetterSpotifyIntegration/src/index.tsx

@@ -0,0 +1,30 @@
+import { findByName } from "@vendetta/metro";
+import { before } from "@vendetta/patcher";
+import { findInReactTree } from "@vendetta/utils";
+
+import ListenAlongButton from "./components/ListenAlongButton";
+
+let sectionPatch: () => void;
+
+export default {
+    onLoad() {
+        sectionPatch = before("default", findByName("UserProfileSection", false), ([props]) => {
+            if (props?.title?.includes?.("Spotify") || props.activity.type !== 2) return;
+
+            const spotifyElement = findInReactTree(props.children, e => e?.style?.padding === 0);
+            const actionsIndex = spotifyElement?.children?.findIndex?.(e => e?.type?.name === "Actions");
+
+            if (actionsIndex && actionsIndex !== -1) {
+                const actions = spotifyElement.children[actionsIndex];
+
+                spotifyElement.children[actionsIndex] = <>
+                    {actions}
+                    {<ListenAlongButton {...actions.props} />}
+                </>;
+            }
+        });
+    },
+    onUnload() {
+        sectionPatch?.();
+    }
+};

plugins/BetterSpotifyIntegration/src/utils/useListeningParty.ts

@@ -0,0 +1,15 @@
+import { findByProps, findByStoreName } from "@vendetta/metro";
+
+const FluxUtils = findByProps("useStateFromStores");
+const SpotifyStore = findByStoreName("SpotifyStore");
+const GamePartyStore = findByStoreName("GamePartyStore");
+const UserStore = findByStoreName("UserStore");
+
+export default function useListeningParty() {
+    const partySet = FluxUtils.useStateFromStores([GamePartyStore, SpotifyStore], () => {
+        const party = GamePartyStore.getParty(SpotifyStore.getActivity()?.party?.id);
+        return party?.size > 1 ? party : null;
+    });
+
+    return partySet ? [...partySet].map(id => UserStore.getUser(id)) : [];
+}