Add opus support, various improvements

package.json

@@ -96,6 +96,7 @@
     "electron-updater": "^6.1.4",
     "fuse.js": "^7.0.0",
     "ini": "^4.1.1",
+    "lodash": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",

release/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "drum-hero",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Play your favorite Clone Hero drum tracks",
   "license": "MIT",
   "author": {

src/main/main.ts

@@ -44,15 +44,15 @@ ipcMain.on('load-song', async (event, id) => {
   const songData = (store.get('songs') as StorageSchema['songs'])[id];
 
   glob(
-    `${songData.dir}/*(*.mid|*.ogg)`,
+    `${songData.dir}/*(*.mid|*.ogg|*.opus)`,
     { ignore: [`${songData.dir}/crowd.ogg`, `${songData.dir}/preview.ogg`] },
     (err, files) => {
       const midiFilePath = files.find((file) => path.extname(file) === '.mid');
       if (!midiFilePath) {
         return;
       }
       const audio = files
-        .filter((file) => path.extname(file) === '.ogg')
+        .filter((file) => ['.ogg', '.opus'].includes(path.extname(file)))
         .map((file) => ({
           src: `gh://${file}`,
           name: path.parse(file).name,

src/midi-parser/renderer.ts

@@ -11,6 +11,7 @@ import {
   Dot,
   Barline,
   Tuplet,
+  Voice,
 } from 'vexflow';
 import { Measure, MidiParser } from './parser';
 
@@ -47,7 +48,7 @@ export function renderMusic(
   const renderer = new Renderer(elementRef.current, Renderer.Backends.SVG);
 
   const context = renderer.getContext();
-  const lineHeight = showBarNumbers ? 150 : 110;
+  const lineHeight = showBarNumbers ? 180 : 130;
 
   renderer.resize(
     STAVE_WIDTH * STAVE_PER_ROW + 10,
@@ -135,22 +136,31 @@ function renderMeasure(
     return staveNote;
   });
 
+  const voice = new Voice({
+    num_beats: measure.timeSig[0],
+    beat_value: measure.timeSig[1],
+  })
+    .setStrict(false)
+    .addTickables(notes);
+
   const drawableTuplets = tuplets.map((tupletNotes) => new Tuplet(tupletNotes));
 
   const beams = Beam.generateBeams(notes, {
     flat_beams: true,
     stem_direction: -1,
   });
 
-  Formatter.FormatAndDraw(context, stave, notes);
+  new Formatter().joinVoices([voice]).format([voice], STAVE_WIDTH - 40);
 
-  drawableTuplets.forEach((tuplet) => {
-    tuplet.setContext(context).draw();
-  });
+  voice.draw(context, stave);
 
   beams.forEach((b) => {
     b.setContext(context).draw();
   });
 
+  drawableTuplets.forEach((tuplet) => {
+    tuplet.setContext(context).draw();
+  });
+
   return stave;
 }

src/renderer/components/SongList/SongList.tsx

@@ -1,6 +1,6 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useRef } from 'react';
-import { VirtualList, Wrapper } from './styles';
+import { VirtualList, VirtualListItem, Wrapper } from './styles';
 import { SongListItem } from '../SongListItem/SongListItem';
 import { SongData } from '../../../types';
 
@@ -30,15 +30,18 @@ export function SongList({ songList, className, onLikeChange }: SongListProps) {
           const songData = songList[virtualItem.index];
 
           return (
-            <SongListItem
-              songData={songData}
-              onLikeChange={onLikeChange}
+            <VirtualListItem
+              ref={rowVirtualizer.measureElement}
               key={songData.id}
+              data-index={virtualItem.index}
               style={{
-                height: `${virtualItem.size}px`,
-                transform: `translateY(${virtualItem.start}px)`,
+                transform: `translateY(${
+                  virtualItem.start - rowVirtualizer.options.scrollMargin
+                }px)`,
               }}
-            />
+            >
+              <SongListItem songData={songData} onLikeChange={onLikeChange} />
+            </VirtualListItem>
           );
         })}
       </VirtualList>

src/renderer/components/SongList/styles.ts

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { theme } from '../../theme';
 
 export const Wrapper = styled.div`
   height: 100%;
@@ -9,3 +10,16 @@ export const VirtualList = styled.div`
   width: 100%;
   position: relative;
 `;
+
+export const VirtualListItem = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  display: flex;
+
+  &:hover {
+    box-shadow: ${theme.boxShadow.soft};
+    z-index: 1;
+  }
+`;

src/renderer/components/SongListItem/SongListItem.tsx

@@ -1,4 +1,3 @@
-import { CSSProperties } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faChartSimple,
@@ -21,17 +20,15 @@ import { SongData } from '../../../types';
 
 export interface SongListItemProps {
   songData: SongData;
-  style: CSSProperties;
   onLikeChange: (id: string, liked: boolean) => void;
 }
 
 export function SongListItem({
   songData: { albumCover, id, name, artist, charter, diff_drums, liked },
-  style,
   onLikeChange,
 }: SongListItemProps) {
   return (
-    <Wrapper to={{ pathname: `/${id}` }} style={style}>
+    <Wrapper to={{ pathname: `/${id}` }}>
       <Album src={albumCover} />
       <MainInfo>
         <Name>{name}</Name>

src/renderer/components/SongListItem/styles.ts

@@ -1,12 +1,8 @@
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { theme } from '../../theme';
 
 export const Wrapper = styled(Link)`
-  position: absolute;
-  top: 0;
-  left: 0;
   width: 100%;
   display: flex;
   border-bottom: 1px solid #e5e1da;
@@ -16,15 +12,10 @@ export const Wrapper = styled(Link)`
   background: ${theme.color.foreground};
   align-items: center;
   transition: box-shadow 0.15s ease-in-out;
-
-  &:hover {
-    box-shadow: ${theme.boxShadow.soft};
-    z-index: 1;
-  }
 `;
 
 export const Album = styled.img`
-  height: 100%;
+  height: 80px;
   width: auto;
   object-fit: contain;
   aspect-ratio: 1;

yarn.lock

@@ -7328,7 +7328,7 @@ lodash.uniqby@^4.7.0:
 
 lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21:
   version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 log-symbols@^4.1.0: