diff --git a/locales/app/en.json b/locales/app/en.json index 0176ceae0..668d47a54 100644 --- a/locales/app/en.json +++ b/locales/app/en.json @@ -114,9 +114,15 @@ "player.back_10s": "Back 10s", "player.close": "Close", "player.download": "Download", + "player.exit_full_screen": "Exit Full Screen", "player.forward_10s": "Forward 10s", + "player.full_screen": "Full Screen", + "player.mute": "Mute", "player.open_entry": "Open Entry", + "player.pause": "Pause", + "player.play": "Play", "player.playback_rate": "Playback Rate", + "player.unmute": "Unmute", "player.volume": "Volume", "search.empty.no_results": "No results found.", "search.group.entries": "Entries", diff --git a/src/renderer/src/components/ui/media/VideoPlayer.tsx b/src/renderer/src/components/ui/media/VideoPlayer.tsx index bbabc9996..4d80fd5fc 100644 --- a/src/renderer/src/components/ui/media/VideoPlayer.tsx +++ b/src/renderer/src/components/ui/media/VideoPlayer.tsx @@ -20,6 +20,7 @@ import { useState, } from "react" import { useHotkeys } from "react-hotkeys-hook" +import { useTranslation } from "react-i18next" import { createContext, useContext, useContextSelector } from "use-context-selector" import { useEventCallback } from "usehooks-ts" @@ -208,6 +209,7 @@ const FloatMutedButton = () => { } const ControlBar = memo(() => { + const { t } = useTranslation() const controls = useContextSelector(VideoPlayerContext, (v) => v.controls) const isPaused = useContextSelector(VideoPlayerContext, (v) => v.state.paused) const dragControls = useDragControls() @@ -235,7 +237,7 @@ const ControlBar = memo(() => { { if (isPaused) { @@ -268,6 +270,7 @@ const ControlBar = memo(() => { }) const FullScreenControl = () => { + const { t } = useTranslation() const ref = useContextSelector(VideoPlayerContext, (v) => v.wrapperRef) const [isFullScreen, setIsFullScreen] = useState(!!document.fullscreenElement) @@ -283,7 +286,7 @@ const FullScreenControl = () => { return ( { @@ -306,6 +309,7 @@ const FullScreenControl = () => { } const DownloadVideo = () => { + const { t } = useTranslation() const src = useContextSelector(VideoPlayerContext, (v) => v.src) const [isDownloading, setIsDownloading] = useState(false) const download = useEventCallback(() => { @@ -324,7 +328,7 @@ const DownloadVideo = () => { }) return ( - + {isDownloading ? ( ) : ( @@ -334,6 +338,7 @@ const DownloadVideo = () => { ) } const VolumeControl = () => { + const { t } = useTranslation() const hasAudio = useContextSelector(VideoPlayerContext, (v) => v.state.hasAudio) const controls = useContextSelector(VideoPlayerContext, (v) => v.controls) @@ -352,7 +357,11 @@ const VolumeControl = () => { }} labelDelayDuration={1} > - {muted ? : } + {muted ? ( + + ) : ( + + )} ) } @@ -446,7 +455,7 @@ const ActionIcon = ({ {children || } - + {label} {shortcut && {shortcut}}