From c5d3f5f5299023aef73714258618a5fcd02c9630 Mon Sep 17 00:00:00 2001 From: Aleksander Tatarczyk Date: Wed, 25 Sep 2024 17:50:14 +0200 Subject: [PATCH 1/2] redesign language filters in remote mic song list fixes #316 --- src/modules/Elements/Modal.tsx | 21 +++------- .../Panels/RemoteSongList/LanguageFilter.tsx | 40 +++++++++++++------ tailwind.config.js | 2 +- 3 files changed, 34 insertions(+), 29 deletions(-) diff --git a/src/modules/Elements/Modal.tsx b/src/modules/Elements/Modal.tsx index 9ddb3407e..e3ac51bb3 100644 --- a/src/modules/Elements/Modal.tsx +++ b/src/modules/Elements/Modal.tsx @@ -9,26 +9,15 @@ export default function Modal({ children, onClose }: Props) { return ( <> - -
e.stopPropagation()}>{children}
- +
+
+
e.stopPropagation()}>{children}
+
+
); } -const Container = styled.div` - position: fixed; - top: 0; - left: 0; - width: 100vw; - height: 100vh; - display: flex; - align-items: center; - justify-content: center; - z-index: 20001; - overflow: auto; -`; - const Backdrop = styled.div` position: fixed; top: 0; diff --git a/src/routes/RemoteMic/Panels/RemoteSongList/LanguageFilter.tsx b/src/routes/RemoteMic/Panels/RemoteSongList/LanguageFilter.tsx index 755417c47..90d3aa6fa 100644 --- a/src/routes/RemoteMic/Panels/RemoteSongList/LanguageFilter.tsx +++ b/src/routes/RemoteMic/Panels/RemoteSongList/LanguageFilter.tsx @@ -1,3 +1,4 @@ +import { Flag } from 'modules/Elements/Flag'; import { MenuButton, MenuContainer } from 'modules/Elements/Menu'; import Modal from 'modules/Elements/Modal'; import isE2E from 'modules/utils/isE2E'; @@ -16,12 +17,20 @@ const MIN_SONGS_COUNT = isE2E() ? 0 : 30; export default function LanguageFilter({ children, languageList, excludedLanguages, onListChange }: Props) { const [open, setOpen] = useState(false); + const handleClose = () => setOpen(false); + + const filteredLanguageList = languageList.filter((lang) => lang.count > MIN_SONGS_COUNT); + + console.log(excludedLanguages); const excludeLanguage = (name: string) => { - if (excludedLanguages.length === 0) { + const visibleExcludedLanguages = excludedLanguages.filter((lang) => + filteredLanguageList.find((l) => l.name === lang), + ); + if (visibleExcludedLanguages.length === 0) { onListChange(languageList.filter((lang) => lang.name !== name).map((lang) => lang.name)); - } else if (excludedLanguages.includes(name)) { + } else if (visibleExcludedLanguages.includes(name)) { onListChange(excludedLanguages.filter((lang) => lang !== name)); - } else if (excludedLanguages.length === languageList.length - 1) { + } else if (visibleExcludedLanguages.length === filteredLanguageList.length - 1) { onListChange([]); } else { onListChange([...excludedLanguages, name]); @@ -31,23 +40,30 @@ export default function LanguageFilter({ children, languageList, excludedLanguag return ( <> {open && ( - setOpen(false)}> + - {languageList - .filter((lang) => lang.count > MIN_SONGS_COUNT) - .map(({ name, count }) => ( + {filteredLanguageList.map(({ name, count }) => { + const isExcluded = excludedLanguages.length && excludedLanguages.includes(name); + return ( excludeLanguage(name)} - data-test={name}> - + data-test={name} + className={`flex !justify-between ${isExcluded && `line-through decoration-white opacity-25`}`}> + {name} - {' '} - ({count}) + ({count}) + + - ))} + ); + })} +
+ + Close + )} diff --git a/tailwind.config.js b/tailwind.config.js index 6a1552197..d3028d730 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -8,7 +8,7 @@ module.exports = { text: { default: styles.colors.text.default, active: styles.colors.text.active, - inactive: styles.colors.text.active, + inactive: styles.colors.text.inactive, }, active: styles.colors.text.active, }, From 3202898b577c3f071873f7fdcc2beadcb5fd2927 Mon Sep 17 00:00:00 2001 From: Aleksander Tatarczyk Date: Thu, 26 Sep 2024 10:18:00 +0200 Subject: [PATCH 2/2] change e2e test video to native video as a workaround --- .../Elements/VideoPlayer/DirectVideo.tsx | 4 ++-- src/modules/Elements/VideoPlayer/Offline.tsx | 7 +++++-- .../Elements/VideoPlayer/dummy-video-long.webm | Bin 0 -> 57560 bytes .../Elements/VideoPlayer/dummy-video.webm | Bin 0 -> 16994 bytes src/modules/Elements/VideoPlayer/dummy.mp4 | Bin 581146 -> 0 bytes src/modules/Elements/VideoPlayer/index.tsx | 3 ++- .../convertSongToTxt.test.ts.snap | 2 +- src/modules/Songs/utils/song-fixture.ts | 2 +- src/stories/songFixture.ts | 2 +- tests/convert-and-sing-a-song.spec.ts | 2 +- tests/edit-song.spec.ts | 2 +- .../songs/e2e-christmas-english-1995.txt | 2 +- .../songs/e2e-croissant-french-1994.txt | 2 +- .../fixtures/songs/e2e-english-polish-1994.txt | 2 +- .../songs/e2e-multitrack-polish-1994.txt | 2 +- tests/fixtures/songs/e2e-new-english-1995.txt | 2 +- .../songs/e2e-pass-test-spanish-1994.txt | 2 +- .../fixtures/songs/e2e-single-english-1995.txt | 2 +- tests/fixtures/songs/zzz-last-polish-1994.txt | 2 +- tests/mobile-phone-mode.spec.ts | 2 +- tests/selection-playlist.spec.ts | 2 +- 21 files changed, 24 insertions(+), 20 deletions(-) create mode 100644 src/modules/Elements/VideoPlayer/dummy-video-long.webm create mode 100644 src/modules/Elements/VideoPlayer/dummy-video.webm delete mode 100644 src/modules/Elements/VideoPlayer/dummy.mp4 diff --git a/src/modules/Elements/VideoPlayer/DirectVideo.tsx b/src/modules/Elements/VideoPlayer/DirectVideo.tsx index 7ddf5783d..981c2b06a 100644 --- a/src/modules/Elements/VideoPlayer/DirectVideo.tsx +++ b/src/modules/Elements/VideoPlayer/DirectVideo.tsx @@ -41,7 +41,7 @@ export default forwardRef(function DirectVideoPlayer( playerRef?.removeEventListener('ended', onEnded); // playerRef?.removeEventListener('loadstart', onLoadstart); }; - }, [player.current, setStatus]); + }, [setStatus]); useEffect(() => { onStateChange?.(status); @@ -83,7 +83,7 @@ export default forwardRef(function DirectVideoPlayer( useImperativeHandle(ref, () => playerApi); return ( -