diff --git a/src/routes/Player/AudioMenu/AudioMenu.less b/src/routes/Player/AudioMenu/AudioMenu.less new file mode 100644 index 000000000..4836cd4d0 --- /dev/null +++ b/src/routes/Player/AudioMenu/AudioMenu.less @@ -0,0 +1,60 @@ +.audio-menu { + height: 25rem; + display: flex; + flex-direction: row; + + .container { + flex: none; + align-self: stretch; + display: flex; + flex-direction: column; + width: 16rem; + + .header { + flex: none; + align-self: stretch; + padding: 1.5rem 2rem; + font-weight: 700; + color: var(--primary-foreground-color); + } + + .list { + flex: 1; + align-self: stretch; + overflow-y: auto; + padding: 0 1rem; + + .option { + display: flex; + flex-direction: row; + align-items: center; + height: 3.5rem; + padding: 0 1.5rem; + margin-bottom: 0.5rem; + border-radius: var(--border-radius); + + &:global(.selected), &:hover { + background-color: var(--overlay-color); + } + + .label { + flex: 1; + max-height: 2.4em; + font-size: 1.1rem; + color: var(--primary-foreground-color); + text-wrap: nowrap; + text-overflow: ellipsis; + } + + .icon { + flex: none; + width: 0.5rem; + height: 0.5rem; + border-radius: 100%; + margin-left: 1rem; + background-color: var(--secondary-accent-color); + } + } + } + } +} \ No newline at end of file diff --git a/src/routes/Player/AudioMenu/AudioMenu.tsx b/src/routes/Player/AudioMenu/AudioMenu.tsx new file mode 100644 index 000000000..1a84b28da --- /dev/null +++ b/src/routes/Player/AudioMenu/AudioMenu.tsx @@ -0,0 +1,65 @@ +import React, { MouseEvent, useCallback } from 'react'; +import { useTranslation } from 'react-i18next'; +import classNames from 'classnames'; +import { Button, languageNames } from 'stremio/common'; +import styles from './AudioMenu.less'; + +type Props = { + className: string, + selectedAudioTrackId: string | null, + audioTracks: AudioTrack[], + onAudioTrackSelected: (id: string) => void, +}; + +const AudioMenu = ({ className, selectedAudioTrackId, audioTracks, onAudioTrackSelected }: Props) => { + const { t } = useTranslation(); + + const onMouseDown = (event: MouseEvent) => { + event.stopPropagation(); + }; + + const onAudioTrackClick = useCallback(({ currentTarget }: MouseEvent) => { + const id = currentTarget.getAttribute('data-id')!; + onAudioTrackSelected && onAudioTrackSelected(id); + }, [onAudioTrackSelected]); + + return ( +