[CastIt.Server.ClientApp] Warning fixes

Wolfteam · Aug 16, 2021 · 23d9017 · 23d9017
1 parent 7246e0b
commit 23d9017
Show file tree

Hide file tree

Showing 11 changed files with 45 additions and 60 deletions.
diff --git a/CastIt.Server/ClientApp/src/app.tsx b/CastIt.Server/ClientApp/src/app.tsx
@@ -23,7 +23,7 @@ const theme = createTheme({
 function App() {
     const loading = (
         <Container>
-            <Grid container justify="center" alignItems="center" direction="column" style={{ minHeight: '100vh' }}>
+            <Grid container justifyContent="center" alignItems="center" direction="column" style={{ minHeight: '100vh' }}>
                 <Grid item xs={12}>
                     <CircularProgress />
                 </Grid>

diff --git a/CastIt.Server/ClientApp/src/components/player/player_devices.tsx b/CastIt.Server/ClientApp/src/components/player/player_devices.tsx
@@ -5,7 +5,6 @@ import {
     Dialog,
     DialogActions,
     DialogContent,
-    DialogTitle,
     IconButton,
     LinearProgress,
     makeStyles,

diff --git a/CastIt.Server/ClientApp/src/components/player/player_file_options.tsx b/CastIt.Server/ClientApp/src/components/player/player_file_options.tsx
@@ -1,5 +1,5 @@
 import { makeStyles, createStyles, IconButton, Divider, ListItemText, Menu, MenuItem } from '@material-ui/core';
-import { Audiotrack, HighQuality, Search, Subtitles, List, CheckTwoTone } from '@material-ui/icons';
+import { Audiotrack, HighQuality, Search, Subtitles, CheckTwoTone } from '@material-ui/icons';
 import MenuIcon from '@material-ui/icons/Menu';
 import { Fragment, useEffect, useState } from 'react';
 import PopupState, { bindTrigger, bindMenu, InjectedProps } from 'material-ui-popup-state';

diff --git a/CastIt.Server/ClientApp/src/components/player/player_settings.tsx b/CastIt.Server/ClientApp/src/components/player/player_settings.tsx
@@ -3,7 +3,6 @@ import {
     createStyles,
     Dialog,
     DialogContent,
-    DialogTitle,
     Divider,
     FormControl,
     FormControlLabel,
@@ -32,7 +31,7 @@ import {
 import { IServerAppSettings } from '../../models';
 import { onPlayerSettingsChanged, updateSettings } from '../../services/castithub.service';
 import translations from '../../services/translations';
-import { TranslationContext, getLanguageString, getLanguageEnum } from '../../context/translations.context';
+import { getLanguageString, getLanguageEnum, TranslationContext } from '../../context/translations.context';
 import { String } from 'typescript-string-operations';
 import AppDialogTitle from '../dialogs/app_dialog_title';
 

diff --git a/CastIt.Server/ClientApp/src/components/player/player_volume.tsx b/CastIt.Server/ClientApp/src/components/player/player_volume.tsx
@@ -1,18 +1,20 @@
-import { Grid, IconButton, Popover, Slider } from "@material-ui/core";
-import { useEffect, useState } from "react";
-import { Fragment } from "react";
-import { VolumeDown, VolumeUp } from "@material-ui/icons";
-import { usePopupState, bindTrigger, bindPopover } from "material-ui-popup-state/hooks";
-import { onPlayerStatusChanged, setVolume } from "../../services/castithub.service";
+import { Grid, IconButton, Popover, Slider } from '@material-ui/core';
+import { useEffect, useState } from 'react';
+import { Fragment } from 'react';
+import { VolumeOff, VolumeUp } from '@material-ui/icons';
+import { usePopupState, bindTrigger, bindPopover } from 'material-ui-popup-state/hooks';
+import { onPlayerStatusChanged, setVolume } from '../../services/castithub.service';
 
 interface State {
     volume: number;
+    isMuted: boolean;
     isConnected: boolean;
     isVolumeChanging: boolean;
 }
 
 const initialState: State = {
     volume: 100,
+    isMuted: false,
     isConnected: false,
     isVolumeChanging: false,
 };
@@ -21,8 +23,8 @@ function PlayerVolume() {
     const [state, setState] = useState(initialState);
 
     const popupState = usePopupState({
-        variant: "popover",
-        popupId: "volumePopup",
+        variant: 'popover',
+        popupId: 'volumePopup',
     });
 
     useEffect(() => {
@@ -34,6 +36,7 @@ function PlayerVolume() {
             if (status.playedFile) {
                 setState({
                     volume: status.player.volumeLevel,
+                    isMuted: status.player.isMuted,
                     isConnected: status.player.isPlayingOrPaused,
                     isVolumeChanging: false,
                 });
@@ -51,12 +54,11 @@ function PlayerVolume() {
         };
     }, [state.isVolumeChanging]);
 
-    const handleVolumeChange = async (val: number, commited: boolean = false): Promise<void> => {
-        //TODO: MUTED
+    const handleVolumeChange = async (volume: number, isMuted: boolean, commited: boolean = false): Promise<void> => {
+        setState((s) => ({ ...s, isVolumeChanging: !commited, volume: volume, isMuted: isMuted }));
         if (commited) {
-            await setVolume(val, false);
+            await setVolume(volume, isMuted);
         }
-        setState((s) => ({ ...s, isVolumeChanging: !commited, volume: val }));
     };
 
     return (
@@ -68,17 +70,17 @@ function PlayerVolume() {
                 {...bindPopover(popupState)}
                 PaperProps={{
                     style: {
-                        width: 300,
-                        overflowY: "hidden",
+                        width: 320,
+                        overflowY: 'hidden',
                     },
                 }}
                 anchorOrigin={{
-                    vertical: "bottom",
-                    horizontal: "center",
+                    vertical: 'bottom',
+                    horizontal: 'center',
                 }}
                 transformOrigin={{
-                    vertical: "top",
-                    horizontal: "center",
+                    vertical: 'top',
+                    horizontal: 'center',
                 }}
             >
                 <Grid
@@ -90,8 +92,10 @@ function PlayerVolume() {
                         paddingRight: 10,
                     }}
                 >
-                    <Grid item xs={1}>
-                        <VolumeDown />
+                    <Grid item xs={2}>
+                        <IconButton onClick={() => handleVolumeChange(state.volume, !state.isMuted, true)}>
+                            {state.isMuted ? <VolumeOff fontSize="medium" /> : <VolumeUp fontSize="medium" />}
+                        </IconButton>
                     </Grid>
                     <Grid item xs={10} style={{ paddingRight: 10 }}>
                         <Slider
@@ -101,13 +105,13 @@ function PlayerVolume() {
                             marks
                             disabled={!state.isConnected}
                             value={state.volume}
-                            onChange={(e, val) => handleVolumeChange(val as number)}
-                            onChangeCommitted={(e, val) => handleVolumeChange(val as number, true)}
+                            onChange={(e, val) => handleVolumeChange(val as number, state.isMuted)}
+                            onChangeCommitted={(e, val) => handleVolumeChange(val as number, state.isMuted, true)}
+                            style={{
+                                marginTop: 6,
+                            }}
                         />
                     </Grid>
-                    <Grid item xs={1}>
-                        <VolumeUp />
-                    </Grid>
                 </Grid>
             </Popover>
         </Fragment>

diff --git a/CastIt.Server/ClientApp/src/components/playlist/playlist_appbar.tsx b/CastIt.Server/ClientApp/src/components/playlist/playlist_appbar.tsx
@@ -1,25 +1,9 @@
-import {
-    alpha,
-    AppBar,
-    createStyles,
-    Divider,
-    IconButton,
-    InputBase,
-    ListItemText,
-    makeStyles,
-    Menu,
-    MenuItem,
-    Theme,
-    Toolbar,
-    Typography,
-} from '@material-ui/core';
+import { alpha, AppBar, createStyles, IconButton, InputBase, makeStyles, Theme, Toolbar, Typography } from '@material-ui/core';
 import SearchIcon from '@material-ui/icons/Search';
-import { ArrowBack, ArrowUpward, Redo, Audiotrack, HighQuality, Subtitles, Search } from '@material-ui/icons';
-import MenuIcon from '@material-ui/icons/Menu';
+import { ArrowBack, ArrowUpward, Redo } from '@material-ui/icons';
 import { playListsPath } from '../../routes';
 import { useHistory } from 'react-router-dom';
 import { Fragment, useEffect, useState } from 'react';
-import PopupState, { bindMenu, bindTrigger } from 'material-ui-popup-state';
 import PlayListLoopShuffleButton from './playlist_loop_shuffle_button';
 import translations from '../../services/translations';
 import { onPlayerStatusChanged } from '../../services/castithub.service';
@@ -111,11 +95,11 @@ function PlayListAppBar(props: Props) {
         }, 500);
 
         return () => clearTimeout(timeout);
-    }, [props.onSearch, props.searchText, search]);
+    }, [props, search]);
 
     useEffect(() => {
         const onPlayerStatusChangedSubscription = onPlayerStatusChanged.subscribe((status) => {
-            if (!status.playedFile || status.playedFile.playListId != props.id) {
+            if (!status.playedFile || status.playedFile.playListId !== props.id) {
                 if (state.canGoToPlayedFile) {
                     setState((s) => ({ ...s, canGoToPlayedFile: false }));
                 }

diff --git a/CastIt.Server/ClientApp/src/components/playlist/playlist_loading_indicator.tsx b/CastIt.Server/ClientApp/src/components/playlist/playlist_loading_indicator.tsx
@@ -43,7 +43,7 @@ function PlayListLoadingIndicator(props: Props) {
             onFileEndReachedSubscription.unsubscribe();
             onStoppedPlaybackSubscription.unsubscribe();
         };
-    }, []);
+    }, [props.playListId]);
     const loading = !isBusy ? null : <LinearProgress variant="indeterminate" className={classes.loading} />;
     return loading;
 }

diff --git a/CastIt.Server/ClientApp/src/components/playlist/rename_playlist_dialog.tsx b/CastIt.Server/ClientApp/src/components/playlist/rename_playlist_dialog.tsx
@@ -28,7 +28,7 @@ function RenamePlayListDialog(props: Props) {
             ...s,
             name: props.name,
         }));
-    }, []);
+    }, [props.name]);
 
     const handleNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         const newVal = event.target.value;

diff --git a/CastIt.Server/ClientApp/src/context/translations.context.tsx b/CastIt.Server/ClientApp/src/context/translations.context.tsx
@@ -2,7 +2,7 @@ import { useState, createContext, Dispatch, SetStateAction } from 'react';
 import { AppLanguage } from '../enums';
 import translations from '../services/translations';
 
-interface TranslationContext {
+interface ITranslationContext {
     currentLanguage: string;
 }
 
@@ -32,7 +32,7 @@ export const getLanguageEnum = (lang: string): AppLanguage => {
     }
 };
 
-export const TranslationContext = createContext<[TranslationContext | null, Dispatch<SetStateAction<TranslationContext>> | null]>([
+export const TranslationContext = createContext<[ITranslationContext | null, Dispatch<SetStateAction<ITranslationContext>> | null]>([
     null,
     null,
 ]);
@@ -43,7 +43,7 @@ export const TranslationContextProvider = (children: any) => {
         lang = supportedLangs[1];
     }
 
-    const [trans, setTrans] = useState<TranslationContext>({
+    const [trans, setTrans] = useState<ITranslationContext>({
         currentLanguage: lang,
     });
 

diff --git a/CastIt.Server/ClientApp/src/pages/playlists.tsx b/CastIt.Server/ClientApp/src/pages/playlists.tsx
@@ -1,5 +1,4 @@
-import { Container } from '@material-ui/core';
-import { Fragment, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { IGetAllPlayListResponseDto } from '../models';
 import {
     initializeHubConnection,
@@ -17,7 +16,7 @@ import {
 import PlayListCardItem from '../components/playlist/playlist_card_item';
 import PageContent from './page_content';
 import { Grid } from '@material-ui/core';
-import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautiful-dnd';
+import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 
 interface State {
     isBusy: boolean;
@@ -56,7 +55,7 @@ function PlayLists() {
             setState((s) => ({ ...s, playLists: copy }));
         });
 
-        const onPlayListsChangedSubscription = onPlayListsChanged.subscribe(playLists => {
+        const onPlayListsChangedSubscription = onPlayListsChanged.subscribe((playLists) => {
             setState((s) => ({ ...s, playLists: playLists }));
         });
 

diff --git a/CastIt.Server/ClientApp/src/services/translations.ts b/CastIt.Server/ClientApp/src/services/translations.ts
@@ -1,5 +1,5 @@
 import LocalizedStrings, { LocalizedStringsMethods } from 'react-localization';
-import { AppLanguage, AppMessage } from '../enums';
+import { AppMessage } from '../enums';
 
 interface IAppMessageTranslations {
     unknownErrorOccurred: string;