Add remote play menu to experimental layout

2022-11-28 16:39:13 -05:00 · 2022-11-28 16:39:13 -05:00 · 7ca3fcb8eb
commit 7ca3fcb8eb
parent 4397e4c724
7 changed files with 425 additions and 1 deletions
--- a/src/apps/experimental/components/AppToolbar/menus/RemotePlayMenu.tsx
+++ b/src/apps/experimental/components/AppToolbar/menus/RemotePlayMenu.tsx
@ -0,0 +1,100 @@
+import Warning from '@mui/icons-material/Warning';
+import Divider from '@mui/material/Divider';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Menu, { type MenuProps } from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import React, { FC, useEffect, useState } from 'react';
+
+import globalize from 'scripts/globalize';
+import { playbackManager } from 'components/playback/playbackmanager';
+import { pluginManager } from 'components/pluginManager';
+import type { PlayTarget } from 'types/playTarget';
+
+import PlayTargetIcon from '../../PlayTargetIcon';
+
+interface RemotePlayMenuProps extends MenuProps {
+    onMenuClose: () => void
+}
+
+export const ID = 'app-remote-play-menu';
+
+const RemotePlayMenu: FC<RemotePlayMenuProps> = ({
+    anchorEl,
+    open,
+    onMenuClose
+}) => {
+    // TODO: Add other checks for support (Android app, secure context, etc)
+    const isChromecastPluginLoaded = !!pluginManager.plugins.find(plugin => plugin.id === 'chromecast');
+
+    const [ playbackTargets, setPlaybackTargets ] = useState<PlayTarget[]>([]);
+
+    const onPlayTargetClick = (target: PlayTarget) => {
+        playbackManager.trySetActivePlayer(target.playerName, target);
+        onMenuClose();
+    };
+
+    useEffect(() => {
+        const fetchPlaybackTargets = async () => {
+            setPlaybackTargets(
+                await playbackManager.getTargets()
+            );
+        };
+
+        if (open) {
+            fetchPlaybackTargets()
+                .catch(err => {
+                    console.error('[AppRemotePlayMenu] unable to get playback targets', err);
+                });
+        }
+    }, [ open, setPlaybackTargets ]);
+
+    return (
+        <Menu
+            anchorEl={anchorEl}
+            anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'right'
+            }}
+            transformOrigin={{
+                vertical: 'top',
+                horizontal: 'right'
+            }}
+            id={ID}
+            keepMounted
+            open={open}
+            onClose={onMenuClose}
+        >
+            {!isChromecastPluginLoaded && ([
+                <MenuItem key='cast-unsupported-item' disabled>
+                    <ListItemIcon>
+                        <Warning />
+                    </ListItemIcon>
+                    <ListItemText>
+                        {globalize.translate('GoogleCastUnsupported')}
+                    </ListItemText>
+                </MenuItem>,
+                <Divider key='cast-unsupported-divider' />
+            ])}
+
+            {playbackTargets.map(target => (
+                <MenuItem
+                    key={target.id}
+                    // Since we are looping over targets there is no good way to avoid creating a new function here
+                    // eslint-disable-next-line react/jsx-no-bind
+                    onClick={() => onPlayTargetClick(target)}
+                >
+                    <ListItemIcon>
+                        <PlayTargetIcon target={target} />
+                    </ListItemIcon>
+                    <ListItemText
+                        primary={ target.appName ? `${target.name} - ${target.appName}` : target.name }
+                        secondary={ target.user?.Name }
+                    />
+                </MenuItem>
+            ))}
+        </Menu>
+    );
+};
+
+export default RemotePlayMenu;