diff --git a/CastIt.Server/ClientApp/src/app.tsx b/CastIt.Server/ClientApp/src/app.tsx index d0a5f3cf..94a5ad39 100644 --- 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 = ( - + diff --git a/CastIt.Server/ClientApp/src/components/player/player_devices.tsx b/CastIt.Server/ClientApp/src/components/player/player_devices.tsx index e89f2e41..2f6ac417 100644 --- 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 index 5e9736c3..96f2ab6f 100644 --- 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 index 16a50cfa..b1b6ecd0 100644 --- 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 index e9cbaefb..dc8eb3df 100644 --- 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 => { - //TODO: MUTED + const handleVolumeChange = async (volume: number, isMuted: boolean, commited: boolean = false): Promise => { + 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', }} > - - + + handleVolumeChange(state.volume, !state.isMuted, true)}> + {state.isMuted ? : } + 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, + }} /> - - - diff --git a/CastIt.Server/ClientApp/src/components/playlist/playlist_appbar.tsx b/CastIt.Server/ClientApp/src/components/playlist/playlist_appbar.tsx index b557558a..b1d7d36b 100644 --- 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 index 2305cfba..4371d42f 100644 --- 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 : ; 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 index a60dd451..03475c0e 100644 --- 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) => { 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 index 6adcc7b4..c0bcc6b8 100644 --- 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> | null]>([ +export const TranslationContext = createContext<[ITranslationContext | null, Dispatch> | null]>([ null, null, ]); @@ -43,7 +43,7 @@ export const TranslationContextProvider = (children: any) => { lang = supportedLangs[1]; } - const [trans, setTrans] = useState({ + const [trans, setTrans] = useState({ currentLanguage: lang, }); diff --git a/CastIt.Server/ClientApp/src/pages/playlists.tsx b/CastIt.Server/ClientApp/src/pages/playlists.tsx index 3a09c453..9faeab2f 100644 --- 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 index c692c7ed..cbe6e796 100644 --- 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;