Merge pull request #329 from Asvarox/redesign-remote-language-filter

redesign language filters in remote mic song list fixes #316
Asvarox · Sep 26, 2024 · da2c4ef · da2c4ef
2 parents 94c806f + 3202898
commit da2c4ef
Show file tree

Hide file tree

Showing 24 changed files with 58 additions and 49 deletions.
diff --git a/src/modules/Elements/Modal.tsx b/src/modules/Elements/Modal.tsx
@@ -9,26 +9,15 @@ export default function Modal({ children, onClose }: Props) {
   return (
     <>
       <Backdrop onClick={onClose} />
-      <Container onClick={onClose}>
-        <div onClick={(e) => e.stopPropagation()}>{children}</div>
-      </Container>
+      <div onClick={onClose} className="fixed top-0 left-0 w-screen h-screen z-[20001] overflow-auto">
+        <div className="flex items-center justify-center min-h-full">
+          <div onClick={(e) => e.stopPropagation()}>{children}</div>
+        </div>
+      </div>
     </>
   );
 }
 
-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/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 (
-    <video width={size.w} height={size.h} autoPlay={autoplay ?? true} controls={controls} ref={player}>
+    <video style={{ width: size.w, height: size.h }} autoPlay={autoplay ?? true} controls={controls} ref={player}>
       <source src={video} />
     </video>
   );

diff --git a/src/modules/Elements/VideoPlayer/Offline.tsx b/src/modules/Elements/VideoPlayer/Offline.tsx
@@ -2,13 +2,16 @@ import { ComponentProps, ForwardedRef, forwardRef } from 'react';
 
 import DirectVideo from 'modules/Elements/VideoPlayer/DirectVideo';
 import Youtube, { VideoPlayerRef } from './Youtube';
-import dummyVideo from './dummy.mp4';
+import dummyLongVideo from './dummy-video-long.webm';
+import dummyVideo from './dummy-video.webm';
 
 type Props = ComponentProps<typeof Youtube>;
 
 export default forwardRef(function OfflineVideoPlayer(
   { video, controls, ...restProps }: Props,
   ref: ForwardedRef<VideoPlayerRef>,
 ) {
-  return <DirectVideo ref={ref} video={dummyVideo} controls {...restProps} />;
+  return (
+    <DirectVideo ref={ref} video={video === 'Vueyx9TBEqE' ? dummyLongVideo : dummyVideo} controls {...restProps} />
+  );
 });
diff --git a/src/modules/Elements/VideoPlayer/dummy-video-long.webm b/src/modules/Elements/VideoPlayer/dummy-video-long.webm
diff --git a/src/modules/Elements/VideoPlayer/dummy-video.webm b/src/modules/Elements/VideoPlayer/dummy-video.webm
diff --git a/src/modules/Elements/VideoPlayer/dummy.mp4 b/src/modules/Elements/VideoPlayer/dummy.mp4
diff --git a/src/modules/Elements/VideoPlayer/index.tsx b/src/modules/Elements/VideoPlayer/index.tsx
@@ -1,10 +1,11 @@
+import isE2E from 'modules/utils/isE2E';
 import { ComponentProps, ForwardedRef, forwardRef } from 'react';
 import OfflineVideoPlayer from './Offline';
 import YoutubeVideoPlayer, { VideoPlayerRef } from './Youtube';
 
 const VideoPlayer = forwardRef(
   (props: ComponentProps<typeof YoutubeVideoPlayer>, ref: ForwardedRef<VideoPlayerRef>) => {
-    if (import.meta.env.VITE_APP_OFFLINE) {
+    if (import.meta.env.VITE_APP_OFFLINE || isE2E()) {
       return <OfflineVideoPlayer {...props} ref={ref} />;
     } else {
       return <YoutubeVideoPlayer {...props} ref={ref} />;

diff --git a/src/modules/Songs/utils/__snapshots__/convertSongToTxt.test.ts.snap b/src/modules/Songs/utils/__snapshots__/convertSongToTxt.test.ts.snap
@@ -5,7 +5,7 @@ exports[`convertSongToTxt > should properly convert the song 1`] = `
 #TITLE:Multitrack
 #BPM:350
 #YEAR:1994
-#VIDEO:v=W9nZ6u15yis
+#VIDEO:v=koBUXESJZ8g
 #LANGUAGE:Polish
 #GAP:1000
 #ALLKARAOKE_ID:multitrack

diff --git a/src/modules/Songs/utils/song-fixture.ts b/src/modules/Songs/utils/song-fixture.ts
@@ -5,7 +5,7 @@ export const mulitrack: Song = {
   artist: 'E2ETest',
   artistOrigin: undefined,
   title: 'Multitrack',
-  video: 'W9nZ6u15yis',
+  video: 'koBUXESJZ8g',
   language: ['Polish'],
   year: '1994',
   gap: 1000,

diff --git 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 && (
-        <Modal onClose={() => setOpen(false)}>
+        <Modal onClose={handleClose}>
           <MenuContainer data-test="languages-container" className="!gap-1">
-            {languageList
-              .filter((lang) => lang.count > MIN_SONGS_COUNT)
-              .map(({ name, count }) => (
+            {filteredLanguageList.map(({ name, count }) => {
+              const isExcluded = excludedLanguages.length && excludedLanguages.includes(name);
+              return (
                 <MenuButton
                   size={'small'}
                   key={name}
                   data-active={!!excludedLanguages.length && !excludedLanguages.includes(name)}
                   onClick={() => excludeLanguage(name)}
-                  data-test={name}>
-                  <span className={excludedLanguages.length && !excludedLanguages.includes(name) ? 'text-active' : ''}>
+                  data-test={name}
+                  className={`flex !justify-between ${isExcluded && `line-through decoration-white opacity-25`}`}>
+                  <span className={isExcluded ? 'line-through decoration-white' : ''}>
                     {name}
-                  </span>{' '}
-                  <small className="text-2xl pl-2">({count})</small>
+                    <small className="text-2xl pl-2">({count})</small>
+                  </span>
+                  <Flag language={[name]} className=" h-full w-32 object-cover" />
                 </MenuButton>
-              ))}
+              );
+            })}
+            <hr />
+            <MenuButton size="small" onClick={handleClose} data-test="close-language-filter">
+              Close
+            </MenuButton>
           </MenuContainer>
         </Modal>
       )}

diff --git a/src/stories/songFixture.ts b/src/stories/songFixture.ts
@@ -7,7 +7,7 @@ export const txtfile = `
 #VOLUME:0.25
 #YEAR:1992
 #VIDEOGAP:0
-#VIDEOID:W9nZ6u15yis
+#VIDEOID:koBUXESJZ8g
 #BPM:200
 #GAP:500
 R 0 4 1 When

diff --git 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,
       },

diff --git a/tests/convert-and-sing-a-song.spec.ts b/tests/convert-and-sing-a-song.spec.ts
@@ -12,7 +12,7 @@ test.beforeEach(async ({ page, context, browser }) => {
 });
 const authorName = 'allKaraoke Test';
 const sourceURL = 'https://example.com/source-url';
-const videoID = 'W9nZ6u15yis';
+const videoID = 'koBUXESJZ8g';
 const songArtist = 'convert';
 const songTitle = 'test';
 const songYear = '1992';

diff --git a/tests/edit-song.spec.ts b/tests/edit-song.spec.ts
@@ -19,7 +19,7 @@ const editedSong = {
   url: 'sourceUrl',
   authorName: 'author',
   authorURL: 'authorUrl',
-  videoURL: 'https://www.youtube.com/watch?v=W9nZ6u15yis',
+  videoURL: 'https://www.youtube.com/watch?v=koBUXESJZ8g',
   language: 'English',
   releaseYear: '1995',
   bpm: '200',

diff --git a/tests/fixtures/songs/e2e-christmas-english-1995.txt b/tests/fixtures/songs/e2e-christmas-english-1995.txt
@@ -3,7 +3,7 @@
 #CREATOR:author
 #BPM:200
 #YEAR:1995
-#VIDEO:v=W9nZ6u15yis
+#VIDEO:v=koBUXESJZ8g
 #LANGUAGE:English
 #GAP:1000
 #EDITION:Christmas

diff --git a/tests/fixtures/songs/e2e-croissant-french-1994.txt b/tests/fixtures/songs/e2e-croissant-french-1994.txt
@@ -5,7 +5,7 @@
 #LANGUAGE:French
 #GAP:1000
 #ALLKARAOKE_ID:e2e-croissant-french-1994
-#VIDEO:v=W9nZ6u15yis
+#VIDEO:v=koBUXESJZ8g
 : 15 2 -3 It
 : 18 2 -3 was
 : 24 10 2 Christ

diff --git a/tests/fixtures/songs/e2e-english-polish-1994.txt b/tests/fixtures/songs/e2e-english-polish-1994.txt
@@ -2,7 +2,7 @@
 #TITLE:Multilanguage
 #BPM:350
 #YEAR:1994
-#VIDEO:v=W9nZ6u15yis
+#VIDEO:v=koBUXESJZ8g
 #LANGUAGE:English, Polish
 #GAP:1000
 #ALLKARAOKE_ID:e2e-english-polish-1994

diff --git a/tests/fixtures/songs/e2e-multitrack-polish-1994.txt b/tests/fixtures/songs/e2e-multitrack-polish-1994.txt
@@ -2,7 +2,7 @@
 #TITLE:Multitrack
 #BPM:350
 #YEAR:1994
-#VIDEO:v=W9nZ6u15yis
+#VIDEO:v=koBUXESJZ8g
 #LANGUAGE:Polish
 #GAP:1000
 #ALLKARAOKE_ID:e2e-multitrack-polish-1994

diff --git a/tests/fixtures/songs/e2e-new-english-1995.txt b/tests/fixtures/songs/e2e-new-english-1995.txt
@@ -3,7 +3,7 @@
 #CREATOR:author
 #BPM:200
 #YEAR:1995
-#VIDEO:v=W9nZ6u15yis
+#VIDEO:v=koBUXESJZ8g
 #LANGUAGE:English
 #GAP:1000
 #ALLKARAOKE_ID:e2e-new-english-1995

diff --git a/tests/fixtures/songs/e2e-pass-test-spanish-1994.txt b/tests/fixtures/songs/e2e-pass-test-spanish-1994.txt
@@ -5,7 +5,7 @@
 #LANGUAGE:Spanish
 #GAP:1000
 #ALLKARAOKE_ID:e2e-pass-test-spanish-1994
-#VIDEO:v=W9nZ6u15yis
+#VIDEO:v=koBUXESJZ8g
 #ALLKARAOKE_VOLUME:0,65
 : 15 2 -3 It
 : 18 2 -3 was

diff --git a/tests/fixtures/songs/e2e-single-english-1995.txt b/tests/fixtures/songs/e2e-single-english-1995.txt
@@ -3,7 +3,7 @@
 #CREATOR:author
 #BPM:200
 #YEAR:1995
-#VIDEO:v=W9nZ6u15yis
+#VIDEO:v=koBUXESJZ8g
 #LANGUAGE:English
 #GAP:1000
 #ALLKARAOKE_ID:e2e-single-english-1995

diff --git a/tests/fixtures/songs/zzz-last-polish-1994.txt b/tests/fixtures/songs/zzz-last-polish-1994.txt
@@ -2,7 +2,7 @@
 #TITLE:Last song
 #BPM:350
 #YEAR:1994
-#VIDEO:v=W9nZ6u15yis
+#VIDEO:v=koBUXESJZ8g
 #LANGUAGE:Polish
 #GAP:1000
 #ALLKARAOKE_ID:zzz-last-polish-1994

diff --git a/tests/mobile-phone-mode.spec.ts b/tests/mobile-phone-mode.spec.ts
@@ -107,7 +107,7 @@ test('Mobile phone mode should be playable', async ({ browser, context, page, br
     await remoteMicBluePage._page.getByTestId('ready-button').click();
     await remoteMicRed._page.getByTestId('ready-button').click();
     await expect(remoteMicRed._page.getByTestId('keyboard-enter')).not.toBeDisabled({ timeout: 8_000 });
-    await page.waitForTimeout(1500);
+    await page.waitForTimeout(500);
     await remoteMicRed._page.getByTestId('keyboard-enter').click();
 
     await expect(page.getByTestId('skip-animation-button')).toBeVisible({ timeout: 15_000 });

diff --git a/tests/selection-playlist.spec.ts b/tests/selection-playlist.spec.ts
@@ -30,7 +30,7 @@ const convertedSong = {
   title: 'New convert song',
   author: 'Selection txt',
   sourceURL: 'https://example.com/source-url',
-  videoID: 'W9nZ6u15yis',
+  videoID: 'koBUXESJZ8g',
 };
 
 const unpopularSong = {