feat: Base implementation for media sync editor

.vscode/settings.json

@@ -25,5 +25,7 @@
         "titleBar.inactiveBackground": "#21573299",
         "titleBar.inactiveForeground": "#e7e7e799"
     },
-    "peacock.color": "#215732"
+    "peacock.color": "#215732",
+    "editor.snippetSuggestions": "bottom",
+    "emmet.showSuggestionsAsSnippets": true,
 }

docs/playground/playground.mdx

@@ -11,8 +11,8 @@ import { AlphaTabPlayground } from "@site/src/components/AlphaTabPlayground";
 <AlphaTabPlayground
     settings={{
         core: {
-            file: "/files/canon.gp",
-            tracks: [0],
+            file: "/files/canon-full.gp",
+            tracks: [0,1],
         },
     }}
 />

package.json

@@ -16,16 +16,18 @@
     "generate-alphatabdoc": "tsx scripts/generate-alphatabdoc.mts"
   },
   "dependencies": {
-    "@coderline/alphatab": "^1.5.0-alpha.1394",
+    "@coderline/alphatab": "^1.6.0-alpha.1416",
     "@docusaurus/core": "^3.7.0",
     "@docusaurus/preset-classic": "^3.7.0",
     "@docusaurus/theme-mermaid": "^3.7.0",
     "@fontsource/noto-sans": "^5.1.1",
     "@fontsource/noto-serif": "^5.1.1",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-regular-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@mdx-js/react": "^3.1.0",
+    "@react-hook/resize-observer": "^2.0.2",
     "@uidotdev/usehooks": "^2.4.1",
     "@uiw/react-color": "^2.5.5",
     "@uiw/react-color-chrome": "^2.5.5",

src/components/AlphaTabPlayground/index.tsx

@@ -1,16 +1,17 @@
 'use client';
 
-import type * as alphaTab from '@coderline/alphatab';
-import React, { useEffect, useState } from 'react';
+import * as alphaTab from '@coderline/alphatab';
+import React, { useState } from 'react';
 import { useAlphaTab, useAlphaTabEvent } from '@site/src/hooks';
 import styles from './styles.module.scss';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as solid from '@fortawesome/free-solid-svg-icons';
 import { openFile } from '@site/src/utils';
-import { PlayerControlsGroup, SidePanel } from './player-controls-group';
+import { BottomPanel, PlayerControlsGroup, SidePanel } from './player-controls-group';
 import { PlaygroundSettings } from './playground-settings';
 import { Tooltip } from 'react-tooltip';
 import { PlaygroundTrackSelector } from './track-selector';
+import { MediaSyncEditor } from './media-sync-editor';
 
 interface AlphaTabPlaygroundProps {
     settings?: alphaTab.json.SettingsJson;
@@ -20,12 +21,13 @@ export const AlphaTabPlayground: React.FC<AlphaTabPlaygroundProps> = ({ settings
     const viewPortRef = React.createRef<HTMLDivElement>();
     const [isLoading, setLoading] = useState(true);
     const [sidePanel, setSidePanel] = useState(SidePanel.None);
+    const [bottomPanel, setBottomPanel] = useState(BottomPanel.None);
 
     const [api, element] = useAlphaTab(s => {
         s.core.engine = 'svg';
         s.player.scrollElement = viewPortRef.current!;
         s.player.scrollOffsetY = -10;
-        s.player.enablePlayer = true;
+        s.player.playerMode = alphaTab.PlayerMode.EnabledAutomatic;
         if (settings) {
             s.fillFromJson(settings);
         }
@@ -88,7 +90,18 @@ export const AlphaTabPlayground: React.FC<AlphaTabPlaygroundProps> = ({ settings
                 </div>
 
                 <div className={styles['at-footer']}>
-                    {api && <PlayerControlsGroup api={api} sidePanel={sidePanel} onSidePanelChange={setSidePanel} />}
+                    {api && api?.score && bottomPanel === BottomPanel.MediaSyncEditor && (
+                        <MediaSyncEditor api={api} score={api!.score} />
+                    )}
+                    {api && (
+                        <PlayerControlsGroup
+                            api={api}
+                            sidePanel={sidePanel}
+                            onSidePanelChange={setSidePanel}
+                            bottomPanel={bottomPanel}
+                            onBottomPanelChange={setBottomPanel}
+                        />
+                    )}
                 </div>
             </div>
             <Tooltip anchorSelect="[data-tooltip-content]" id="tooltip-playground" style={{ zIndex: 1200 }} />