From 3ea1e1cdd63edd924457e81b92ea7fc4e29603aa Mon Sep 17 00:00:00 2001 From: Danielku15 Date: Sat, 31 Oct 2026 19:39:53 +0100 Subject: [PATCH 1/5] docs: register reference anchors so the broken anchor check sees them Enum members, settings categories and the alphaTex syntax terms were anchored with plain HTML ids, which Docusaurus does not collect, so the build reported over a hundred broken anchors that resolve in the browser. They are now rendered through Link, which registers the id. The exporter guide and the 1.7 release notes pointed at anchors that do not exist. Broken anchors now fail the build like broken links. --- website/docs/alphatex/syntax.mdx | 11 ++++++----- website/docs/guides/exporter.mdx | 2 +- website/docs/releases/release1_7.mdx | 2 +- website/docusaurus.config.mts | 1 + website/scripts/generate-common.mts | 8 +++++++- website/scripts/generate-typedocs.mts | 2 +- 6 files changed, 17 insertions(+), 9 deletions(-) diff --git a/website/docs/alphatex/syntax.mdx b/website/docs/alphatex/syntax.mdx index c0ce6963d..0eb68615d 100644 --- a/website/docs/alphatex/syntax.mdx +++ b/website/docs/alphatex/syntax.mdx @@ -12,6 +12,7 @@ keywords: - fret notation --- +import Link from '@docusaurus/Link'; import { AlphaTexSample } from '@site/src/components/AlphaTexSample'; This page describes the alphaTex source syntax and defines the vocabulary the rest of the reference uses. Every other page links back to the anchors here on first use of a term. Save alphaTex source with the file extension `.atex`. @@ -55,10 +56,10 @@ Examples: ## Argument lists {#argument-lists} - + An **argument list** is the group of values you pass into a metadata tag or a property. Wrap multiple values in parentheses. Omit the parentheses when you pass a single value. - + Each entry inside the list is called an **argument**. The reference tables describe the matching **parameters** — the positional slots that the language accepts for a given construct. An argument can be: @@ -83,7 +84,7 @@ Argument entries are separated by whitespace. Commas are not used. ## Properties {#properties} - + A **property** is a `name arguments` pair inside curly braces. Properties attach to beats, notes, and metadata tags to add effects, visibility flags, and other optional aspects. Property names are case-insensitive. The argument list of a property follows the rules in [Argument lists](#argument-lists). @@ -96,7 +97,7 @@ C4 { b (0 4) v txt "Bend with Vibrato" } ## Metadata tags {#metadata-tags} - + A **metadata tag** is a backslash-prefixed construct of the form `\name arguments {properties}`. The argument list and the property block are both optional; individual tags decide which arguments and properties they accept. Metadata tag names are case-insensitive. @@ -145,7 +146,7 @@ A property attached to a single note, controlling effects specific to that note. Every reference entry lists one or more **signatures**. A signature is one accepted parameter list for the construct — the parameters it names, their types, and their order. When you write a metadata tag or a property, your argument list must match exactly one of its signatures. - + A construct with more than one signature is **overloaded**. `\title`, for example, accepts a single string in one signature and a title-plus-template-plus-alignment triple in another. The reference page for each construct shows every signature it accepts. ## Case sensitivity {#case-sensitivity} diff --git a/website/docs/guides/exporter.mdx b/website/docs/guides/exporter.mdx index b03c7e686..77dc4d7ec 100644 --- a/website/docs/guides/exporter.mdx +++ b/website/docs/guides/exporter.mdx @@ -66,7 +66,7 @@ using(var fs = new System.IO.FileStream(fileName, System.IO.FileMode.Create)) Starting with 1.7.0 alphaTab can also export the data model to its own music notation language [alphaTex](/docs/alphatex/introduction). The exporter supports all features which the importer can also handle. If you find something, please open a feature request. -Via the exporter settings [`settings.exporter`](/docs/reference/settings.mdx#Exporter) the format of the exported code can be adjusted. +Via the exporter settings [`settings.exporter`](/docs/reference/settings.mdx#exporter) the format of the exported code can be adjusted. Especially the `comments` can be quite useful for alphaTex beginners to learn about the syntax. While you can use the standard `export` to export the code into a byte array, you can also use `exportToString` to get the alphaTex code diff --git a/website/docs/releases/release1_7.mdx b/website/docs/releases/release1_7.mdx index b0ef4b92e..51189a915 100644 --- a/website/docs/releases/release1_7.mdx +++ b/website/docs/releases/release1_7.mdx @@ -195,7 +195,7 @@ The details are now documented in the new [language documentation](/docs/alphate Two key changes in the language, compared to 1.6, are: * The documents do not need to be separated with dots into 3 sections anymore. See [Document Structure](/docs/alphatex/document-structure). -* Metadata tags and properties now follow more a function call approach where values are passed as arguments into them. Single values do not need parenthesis but multiple values should be wrapped. [See Parameters](/docs/alphatex/syntax#parameters--argument-lists). +* Metadata tags and properties now follow more a function call approach where values are passed as arguments into them. Single values do not need parenthesis but multiple values should be wrapped. [See Parameters](/docs/alphatex/syntax#argument-lists). #### alphaTex: Language Server and Monaco Integration https://github.com/CoderLine/alphaTab/pull/2379 diff --git a/website/docusaurus.config.mts b/website/docusaurus.config.mts index 221765c6d..eb5436c6b 100644 --- a/website/docusaurus.config.mts +++ b/website/docusaurus.config.mts @@ -208,6 +208,7 @@ async function createConfig(): Promise { organizationName: "CoderLine", projectName: "alphaTab", onBrokenLinks: "throw", + onBrokenAnchors: "throw", future: { v4: { removeLegacyPostBuildHeadAttribute: true, diff --git a/website/scripts/generate-common.mts b/website/scripts/generate-common.mts index 6d11251fd..0e1d5aa0b 100644 --- a/website/scripts/generate-common.mts +++ b/website/scripts/generate-common.mts @@ -84,6 +84,11 @@ export type ReferencePage = { url: string }; + +function categoryAnchor(category: string) { + return category.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''); +} + export class ReferenceTableData { public readonly categories = new Map(); @@ -108,6 +113,7 @@ export async function writeReferenceTable( await table.writeLine(`import { CodeBadge } from "@site/src/components/CodeBadge";`); await table.writeLine(`import { Signature } from "@site/src/components/Signature";`); + await table.writeLine(`import Link from "@docusaurus/Link";`); await table.writeLine(); await table.writeLine(``); await table.writeLine(` `); @@ -125,7 +131,7 @@ export async function writeReferenceTable( for (const [category, pages] of categoriesSorted) { - await table.writeLine(` `); + await table.writeLine(` `); const sorted = pages .sort((a, b) => { diff --git a/website/scripts/generate-typedocs.mts b/website/scripts/generate-typedocs.mts index 8ab28906a..8d5fd015e 100644 --- a/website/scripts/generate-typedocs.mts +++ b/website/scripts/generate-typedocs.mts @@ -301,7 +301,7 @@ async function writeEnumMembers( await fileStream.write(` \n`); await fileStream.write( - ` \n` + ` \n` ); const numericValue = context.checker.getConstantValue(member); From 3b182f7e4db3ac1b64cc22901e3f8c1608f78f6b Mon Sep 17 00:00:00 2001 From: Danielku15 Date: Sat, 31 Oct 2026 20:10:29 +0100 Subject: [PATCH 2/5] ci: deploy the website only through the publish workflows Publish and Release already build and deploy the website after the web packages, including dry runs. The standalone Website workflow built against whatever the dist-tags served and could deploy a website whose packages were not published yet. --- .github/workflows/website.yml | 32 -------------------------------- 1 file changed, 32 deletions(-) delete mode 100644 .github/workflows/website.yml diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml deleted file mode 100644 index 7cf02191e..000000000 --- a/.github/workflows/website.yml +++ /dev/null @@ -1,32 +0,0 @@ -# Redeploys the website without publishing packages: docs-only changes, and docs hotfixes on main -# (back-merge those to develop). -name: Website - -on: - workflow_dispatch: - inputs: - channel: - type: choice - description: next (develop → next.alphatab.net) or stable (main → alphatab.net) - options: - - next - - stable - default: next - dry_run: - type: boolean - description: Build the website without deploying it - default: false - -permissions: - contents: read - -jobs: - website: - uses: ./.github/workflows/~publish_website.yml - secrets: - DEPLOY_TOKEN: ${{ secrets.DEPLOY_TOKEN }} - with: - channel: ${{ inputs.channel }} - npm_tag: ${{ inputs.channel == 'stable' && 'latest' || 'alpha' }} - deploy_branch: ${{ inputs.channel == 'stable' && 'main' || 'develop' }} - dry_run: ${{ inputs.dry_run }} From 0c70994830a7357863f03746b93df5c04dc4e7e7 Mon Sep 17 00:00:00 2001 From: Danielku15 Date: Sat, 31 Oct 2026 20:10:42 +0100 Subject: [PATCH 3/5] ci: install the website workspaces unconditionally The ui and react packages are part of the monorepo, so the CI and website jobs no longer probe for them before installing and building. --- .github/workflows/build.yml | 26 ++++++-------------------- .github/workflows/~publish_website.yml | 19 +++++-------------- 2 files changed, 11 insertions(+), 34 deletions(-) diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 5625a8c76..354be3f9e 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -180,25 +180,18 @@ jobs: with: node-version: 'lts/*' cache: 'npm' - - id: workspaces - if: steps.dist-cache.outputs.cache-hit != 'true' - run: | - args="" - for ws in packages/alphatab packages/alphatex packages/transpiler packages/tooling packages/lsp packages/monaco packages/webpack packages/vite packages/react; do - if [ -f "$ws/package.json" ]; then args="$args -w $ws"; fi - done - echo "args=$args" >> "$GITHUB_OUTPUT" - if: steps.dist-cache.outputs.cache-hit != 'true' - run: npm ci $WORKSPACES --include-workspace-root - env: - WORKSPACES: ${{ steps.workspaces.outputs.args }} + run: > + npm ci --include-workspace-root + -w packages/alphatab -w packages/alphatex -w packages/transpiler -w packages/tooling + -w packages/lsp -w packages/monaco -w packages/webpack -w packages/vite -w packages/react - if: steps.dist-cache.outputs.cache-hit != 'true' run: npm run build-web - if: steps.dist-cache.outputs.cache-hit != 'true' run: npm run build-language-server - if: steps.dist-cache.outputs.cache-hit != 'true' run: npm run build-monaco - - if: steps.dist-cache.outputs.cache-hit != 'true' && hashFiles('packages/react/package.json') != '' + - if: steps.dist-cache.outputs.cache-hit != 'true' run: npm run build -w packages/react - if: steps.dist-cache.outputs.cache-hit != 'true' run: node scripts/check-published-types.mts @@ -266,14 +259,7 @@ jobs: path: ~/.npm key: npm-website-${{ runner.os }}-${{ hashFiles('package-lock.json') }} restore-keys: npm-website-${{ runner.os }}- - - id: workspaces - run: | - args="-w website" - if [ -f packages/ui/package.json ]; then args="$args -w packages/ui"; fi - echo "args=$args" >> "$GITHUB_OUTPUT" - - run: npm ci $WORKSPACES --include-workspace-root - env: - WORKSPACES: ${{ steps.workspaces.outputs.args }} + - run: npm ci --include-workspace-root -w website -w packages/ui - uses: actions/download-artifact@v8 with: name: web-dist diff --git a/.github/workflows/~publish_website.yml b/.github/workflows/~publish_website.yml index f5368351a..4c1da20ae 100644 --- a/.github/workflows/~publish_website.yml +++ b/.github/workflows/~publish_website.yml @@ -90,21 +90,12 @@ jobs: path: ~/.npm key: npm-website-${{ runner.os }}-${{ hashFiles('package-lock.json') }} restore-keys: npm-website-${{ runner.os }}- - - id: workspaces - run: | - args="-w website" - if [ -f packages/ui/package.json ]; then args="$args -w packages/ui"; fi - # building react from source needs the alphaTab sources and the shared build tooling - if [ -f packages/react/package.json ]; then - args="$args -w packages/react -w packages/alphatab -w packages/transpiler -w packages/tooling" - fi - echo "args=$args" >> "$GITHUB_OUTPUT" - - run: npm ci $WORKSPACES --include-workspace-root - env: - WORKSPACES: ${{ steps.workspaces.outputs.args }} + # building react from source needs the alphaTab sources and the shared build tooling + - run: > + npm ci --include-workspace-root -w website -w packages/ui + -w packages/react -w packages/alphatab -w packages/transpiler -w packages/tooling - - if: hashFiles('packages/react/package.json') != '' - run: | + - run: | npm run generate-typescript npm run build -w packages/react From 5241998cd95ad7db240f838fe4cff11cb631dfc0 Mon Sep 17 00:00:00 2001 From: Danielku15 Date: Sat, 31 Oct 2026 20:10:50 +0100 Subject: [PATCH 4/5] ci: deploy the website without the enable switch The deploy is live; whether a run deploys is decided by the website and dry run inputs of the publish workflows and by the website environments. --- .github/workflows/~publish_website.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/~publish_website.yml b/.github/workflows/~publish_website.yml index 4c1da20ae..694ac8a51 100644 --- a/.github/workflows/~publish_website.yml +++ b/.github/workflows/~publish_website.yml @@ -141,7 +141,7 @@ jobs: deploy: needs: build - if: ${{ !cancelled() && needs.build.result == 'success' && !inputs.dry_run && vars.WEBSITE_DEPLOY_ENABLED == 'true' }} + if: ${{ !cancelled() && needs.build.result == 'success' && !inputs.dry_run }} runs-on: ubuntu-latest environment: name: website From 845a2101a80490f63da85ce30c1f160b086f2233 Mon Sep 17 00:00:00 2001 From: Danielku15 Date: Sat, 31 Oct 2026 20:16:20 +0100 Subject: [PATCH 5/5] fix(website): give the playback demos a play button, keep the rest silent The feature demos built on AlphaTabProvider turned the player on but had no control to start it, so pages loaded the synthesizer and SoundFont without a way to play. Demos about rendering, import, export and layout no longer enable the player; the alphaTex live preview and the range selection demo get a shared play/pause button. --- .../src/components/AlphaTabPetaluma/index.tsx | 1 - .../AlphaTexExporterSample/index.tsx | 2 +- .../components/AlphaTexLivePreview/index.tsx | 2 ++ website/src/components/BarRangeDemo/index.tsx | 2 +- .../components/BoundsLookupViewer/index.tsx | 2 +- .../components/BracketModeSwitch/index.tsx | 2 +- .../src/components/BytesLoadDemo/index.tsx | 2 +- .../ChordDiagramLayoutSwitch/index.tsx | 2 +- .../src/components/ColoringExample/index.tsx | 2 +- .../components/CoveragePaletteDemo/index.tsx | 2 +- .../src/components/DemoPlayButton/index.tsx | 29 +++++++++++++++++++ .../DemoPlayButton/styles.module.scss | 5 ++++ .../components/DirectImporterDemo/index.tsx | 2 +- .../FormattingTemplateSample/index.tsx | 2 +- .../src/components/Gp7ExporterDemo/index.tsx | 2 +- .../components/GpVersionSwitcher/index.tsx | 2 +- .../components/HideDynamicsToggle/index.tsx | 2 +- .../components/ImporterKnobsDemo/index.tsx | 2 +- .../src/components/LoadErrorDemo/index.tsx | 2 +- .../src/components/MidiExporterDemo/index.tsx | 2 +- .../components/MultiBarRestToggle/index.tsx | 2 +- .../components/MutateModelExample/index.tsx | 2 +- .../ProgrammaticScoreExample/index.tsx | 2 +- .../components/ResponsiveResizeDemo/index.tsx | 2 +- .../src/components/ScoreJsonDemo/index.tsx | 2 +- .../components/ScoreLoadedInspector/index.tsx | 2 +- .../components/SelectionHandleDemo/index.tsx | 2 ++ .../SelectionHandleDemo/styles.module.scss | 5 +++- .../src/components/SettingsJsonDemo/index.tsx | 1 - .../components/SpacingSlidersDemo/index.tsx | 1 - .../components/SystemSeparatorDemo/index.tsx | 2 +- .../components/ToggleElementsDemo/index.tsx | 2 +- .../components/TrackNamePolicyDemo/index.tsx | 2 +- .../src/components/TrackSwitcher/index.tsx | 2 +- .../src/components/TuningModeSwitch/index.tsx | 1 - .../src/components/UrlLoadSwitcher/index.tsx | 2 +- .../src/components/ZoomSliderDemo/index.tsx | 1 - 37 files changed, 69 insertions(+), 33 deletions(-) create mode 100644 website/src/components/DemoPlayButton/index.tsx create mode 100644 website/src/components/DemoPlayButton/styles.module.scss diff --git a/website/src/components/AlphaTabPetaluma/index.tsx b/website/src/components/AlphaTabPetaluma/index.tsx index 64bdd379b..788e29941 100644 --- a/website/src/components/AlphaTabPetaluma/index.tsx +++ b/website/src/components/AlphaTabPetaluma/index.tsx @@ -35,7 +35,6 @@ export const AlphaTabPetaluma: React.FC = ({ }) => { const tex = typeof children === "string" ? children : undefined; const site = useSiteAlphaTabSettings({ - player: true, settings: { core: { // Plain object form is accepted by settings.fillFromJson at runtime; diff --git a/website/src/components/AlphaTexExporterSample/index.tsx b/website/src/components/AlphaTexExporterSample/index.tsx index cceb37f3d..fa2beb027 100644 --- a/website/src/components/AlphaTexExporterSample/index.tsx +++ b/website/src/components/AlphaTexExporterSample/index.tsx @@ -75,7 +75,7 @@ const AlphaTexExporterInner: FC = () => { }; export const AlphaTexExporterSample: FC = () => { - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); return ( { spellCheck={false} onChange={(e) => onChange(e.target.value)} /> + {showCode ? {code} : null} diff --git a/website/src/components/BarRangeDemo/index.tsx b/website/src/components/BarRangeDemo/index.tsx index 4bb0b77bf..c7f645a37 100644 --- a/website/src/components/BarRangeDemo/index.tsx +++ b/website/src/components/BarRangeDemo/index.tsx @@ -40,7 +40,7 @@ export const BarRangeDemo: React.FC = ({ () => ({ display: { startBar, barCount } }), [startBar, barCount], ); - const site = useSiteAlphaTabSettings({ player: true, settings: rangeSettings }); + const site = useSiteAlphaTabSettings({ settings: rangeSettings }); const useTex = !file; const texContent = useTex ? tex ?? DEFAULT_TEX : undefined; diff --git a/website/src/components/BoundsLookupViewer/index.tsx b/website/src/components/BoundsLookupViewer/index.tsx index 9128f9666..0b50dc694 100644 --- a/website/src/components/BoundsLookupViewer/index.tsx +++ b/website/src/components/BoundsLookupViewer/index.tsx @@ -197,7 +197,7 @@ export const BoundsLookupViewer: React.FC = ({ }; const tex = typeof children === "string" ? children : undefined; - const site = useSiteAlphaTabSettings({ player: true, settings: NOTE_BOUNDS_SETTINGS }); + const site = useSiteAlphaTabSettings({ settings: NOTE_BOUNDS_SETTINGS }); return ( <> diff --git a/website/src/components/BracketModeSwitch/index.tsx b/website/src/components/BracketModeSwitch/index.tsx index 347dc9b26..17a537456 100644 --- a/website/src/components/BracketModeSwitch/index.tsx +++ b/website/src/components/BracketModeSwitch/index.tsx @@ -37,7 +37,7 @@ export const BracketModeSwitch: React.FC = ({ showCode = true, }) => { const [mode, setMode] = useState("GroupStaves"); - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); const code = `api.scoreLoaded.on((score) => { score.stylesheet.bracketExtendMode = diff --git a/website/src/components/BytesLoadDemo/index.tsx b/website/src/components/BytesLoadDemo/index.tsx index 3b70fb804..fe3ea9567 100644 --- a/website/src/components/BytesLoadDemo/index.tsx +++ b/website/src/components/BytesLoadDemo/index.tsx @@ -125,7 +125,7 @@ export const BytesLoadDemo: React.FC = ({ }) => { const [byteCount, setByteCount] = useState(null); const [format, setFormat] = useState(""); - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); const code = `const bytes = new Uint8Array( await fetch('/scores/song.gp').then((r) => r.arrayBuffer()) diff --git a/website/src/components/ChordDiagramLayoutSwitch/index.tsx b/website/src/components/ChordDiagramLayoutSwitch/index.tsx index e32d56347..a2884d2cb 100644 --- a/website/src/components/ChordDiagramLayoutSwitch/index.tsx +++ b/website/src/components/ChordDiagramLayoutSwitch/index.tsx @@ -37,7 +37,7 @@ export const ChordDiagramLayoutSwitch: React.FC< ChordDiagramLayoutSwitchProps > = ({ showCode = true }) => { const [placement, setPlacement] = useState("Top"); - const site = useSiteAlphaTabSettings({ player: true, settings: BAR_COUNT_SETTINGS }); + const site = useSiteAlphaTabSettings({ settings: BAR_COUNT_SETTINGS }); const code = `api.scoreLoaded.on((score) => { score.stylesheet.globalDisplayChordDiagramsOnTop = ${placement === "Top"}; diff --git a/website/src/components/ColoringExample/index.tsx b/website/src/components/ColoringExample/index.tsx index 73049d293..fa0126f0c 100644 --- a/website/src/components/ColoringExample/index.tsx +++ b/website/src/components/ColoringExample/index.tsx @@ -85,7 +85,7 @@ function ApplyColors() { export const ColoringExample: React.FC = ({ showCode = true, }) => { - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); const codeLines = ` const api = new alphaTab.AlphaTabApi(...); diff --git a/website/src/components/CoveragePaletteDemo/index.tsx b/website/src/components/CoveragePaletteDemo/index.tsx index 1afc2d165..d2e75d221 100644 --- a/website/src/components/CoveragePaletteDemo/index.tsx +++ b/website/src/components/CoveragePaletteDemo/index.tsx @@ -38,7 +38,7 @@ export const CoveragePaletteDemo: React.FC = ({ () => ({ display: { resources: palette } }), [palette], ); - const site = useSiteAlphaTabSettings({ player: true, settings: paletteSettings }); + const site = useSiteAlphaTabSettings({ settings: paletteSettings }); const set = (key: Field, value: string) => { setPalette((p) => ({ ...p, [key]: value })); diff --git a/website/src/components/DemoPlayButton/index.tsx b/website/src/components/DemoPlayButton/index.tsx new file mode 100644 index 000000000..c3437eecf --- /dev/null +++ b/website/src/components/DemoPlayButton/index.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import * as alphaTab from "@coderline/alphatab"; +import { useAlphaTabApi, useAlphaTabEventValue } from "@coderline/alphatab-react"; +import { IconPause, IconPlay } from "@coderline/alphatab-ui"; +import styles from "./styles.module.scss"; + +const isPlayingState = (state: alphaTab.synth.PlayerState) => state === alphaTab.synth.PlayerState.Playing; + +/** Play/pause for the score of the surrounding `AlphaTabProvider`; disabled until the player is ready. */ +export const DemoPlayButton: React.FC<{ className?: string }> = ({ className }) => { + const api = useAlphaTabApi(); + const ready = useAlphaTabEventValue("playerReady", () => true, (a) => a.isReadyForPlayback) ?? false; + const isPlaying = + useAlphaTabEventValue("playerStateChanged", (e) => isPlayingState(e.state), (a) => isPlayingState(a.playerState)) ?? + false; + + return ( + + ); +}; diff --git a/website/src/components/DemoPlayButton/styles.module.scss b/website/src/components/DemoPlayButton/styles.module.scss new file mode 100644 index 000000000..27369f388 --- /dev/null +++ b/website/src/components/DemoPlayButton/styles.module.scss @@ -0,0 +1,5 @@ +.play { + align-self: flex-start; + display: inline-flex; + align-items: center; +} diff --git a/website/src/components/DirectImporterDemo/index.tsx b/website/src/components/DirectImporterDemo/index.tsx index bcb3b5486..b9ad97b00 100644 --- a/website/src/components/DirectImporterDemo/index.tsx +++ b/website/src/components/DirectImporterDemo/index.tsx @@ -79,7 +79,7 @@ export const DirectImporterDemo: React.FC = ({ showCode = true, }) => { const [info, setInfo] = useState(null); - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); const code = `import * as alphaTab from '@coderline/alphatab'; diff --git a/website/src/components/FormattingTemplateSample/index.tsx b/website/src/components/FormattingTemplateSample/index.tsx index 56607bf1f..5fe9887d7 100644 --- a/website/src/components/FormattingTemplateSample/index.tsx +++ b/website/src/components/FormattingTemplateSample/index.tsx @@ -58,7 +58,7 @@ const FormattingTemplateInner: React.FC = () => { }; export const FormattingTemplateSample: React.FC = () => { - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); const codeLines = ` function adjustStyle(score: alphaTab.model.Score) { diff --git a/website/src/components/Gp7ExporterDemo/index.tsx b/website/src/components/Gp7ExporterDemo/index.tsx index 8bbec8ad3..f2b246edb 100644 --- a/website/src/components/Gp7ExporterDemo/index.tsx +++ b/website/src/components/Gp7ExporterDemo/index.tsx @@ -105,7 +105,7 @@ const Gp7ExporterControls: React.FC = () => { export const Gp7ExporterDemo: React.FC = ({ showCode = true, }) => { - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); return (
= ({ showCode = true, }) => { const [active, setActive] = useState(INITIAL_VARIANT); - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); const code = `const api = new alphaTab.AlphaTabApi(container, { core: { file: '/scores/song.gp' }, // GP7/8 ZIP archive diff --git a/website/src/components/HideDynamicsToggle/index.tsx b/website/src/components/HideDynamicsToggle/index.tsx index 9b5ce0261..383d56b8f 100644 --- a/website/src/components/HideDynamicsToggle/index.tsx +++ b/website/src/components/HideDynamicsToggle/index.tsx @@ -31,7 +31,7 @@ export const HideDynamicsToggle: React.FC = ({ showCode = true, }) => { const [hidden, setHidden] = useState(false); - const site = useSiteAlphaTabSettings({ player: true, settings: BAR_COUNT_SETTINGS }); + const site = useSiteAlphaTabSettings({ settings: BAR_COUNT_SETTINGS }); const code = `api.scoreLoaded.on((score) => { score.stylesheet.hideDynamics = ${hidden}; diff --git a/website/src/components/ImporterKnobsDemo/index.tsx b/website/src/components/ImporterKnobsDemo/index.tsx index dd27ccacb..ecba163aa 100644 --- a/website/src/components/ImporterKnobsDemo/index.tsx +++ b/website/src/components/ImporterKnobsDemo/index.tsx @@ -123,7 +123,7 @@ export const ImporterKnobsDemo: React.FC = ({ }) => { const [beatTextAsLyrics, setBeatTextAsLyrics] = useState(false); const [encoding, setEncoding] = useState("windows-1252"); - const site = useSiteAlphaTabSettings({ player: true, settings: IMPORTER_SETTINGS }); + const site = useSiteAlphaTabSettings({ settings: IMPORTER_SETTINGS }); const code = `const api = new alphaTab.AlphaTabApi(container, { core: { file: '/scores/oldfile.gp5' }, diff --git a/website/src/components/LoadErrorDemo/index.tsx b/website/src/components/LoadErrorDemo/index.tsx index bd05b9871..c1ea6eca6 100644 --- a/website/src/components/LoadErrorDemo/index.tsx +++ b/website/src/components/LoadErrorDemo/index.tsx @@ -164,7 +164,7 @@ export const LoadErrorDemo: React.FC = ({ }) => { const [record, setRecord] = useState(null); const [success, setSuccess] = useState(null); - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); const code = `api.error.on((error) => { if (error instanceof alphaTab.importer.UnsupportedFormatError) { diff --git a/website/src/components/MidiExporterDemo/index.tsx b/website/src/components/MidiExporterDemo/index.tsx index 34c6ca968..0802a33f2 100644 --- a/website/src/components/MidiExporterDemo/index.tsx +++ b/website/src/components/MidiExporterDemo/index.tsx @@ -133,7 +133,7 @@ const MidiExporterControls: React.FC = () => { export const MidiExporterDemo: React.FC = ({ showCode = true, }) => { - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); return (
= ({ showCode = true, }) => { const [enabled, setEnabled] = useState(true); - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); const code = `api.scoreLoaded.on((score) => { score.stylesheet.multiTrackMultiBarRest = ${enabled}; diff --git a/website/src/components/MutateModelExample/index.tsx b/website/src/components/MutateModelExample/index.tsx index df47f15c1..5a63ab532 100644 --- a/website/src/components/MutateModelExample/index.tsx +++ b/website/src/components/MutateModelExample/index.tsx @@ -152,7 +152,7 @@ const MutateModelInner: React.FC = () => { }; export const MutateModelExample: React.FC = () => { - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); return (
{ export const ProgrammaticScoreExample: React.FC = ({ showCode = true, }) => { - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); return (
= ({ const [width, setWidth] = useState(null); const [dragging, setDragging] = useState(false); const [displayWidth, setDisplayWidth] = useState(0); - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); useEffect(() => { if (!dragging) { return; } diff --git a/website/src/components/ScoreJsonDemo/index.tsx b/website/src/components/ScoreJsonDemo/index.tsx index 98d1d0e81..6e3d1d0a0 100644 --- a/website/src/components/ScoreJsonDemo/index.tsx +++ b/website/src/components/ScoreJsonDemo/index.tsx @@ -162,7 +162,7 @@ const ScoreJsonControls: React.FC = () => { export const ScoreJsonDemo: React.FC = ({ showCode = true, }) => { - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); return (
{ export const ScoreLoadedInspector: React.FC = ({ showCode = true, }) => { - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); const code = `const api = new alphaTab.AlphaTabApi(container, { core: { file: '/scores/song.gp5' }, }); diff --git a/website/src/components/SelectionHandleDemo/index.tsx b/website/src/components/SelectionHandleDemo/index.tsx index 371a1a1af..06ce7e1b7 100644 --- a/website/src/components/SelectionHandleDemo/index.tsx +++ b/website/src/components/SelectionHandleDemo/index.tsx @@ -11,6 +11,7 @@ import { } from "@coderline/alphatab-react"; import { SelectionHandles } from "@coderline/alphatab-ui"; import { useSiteAlphaTabSettings } from "@site/src/alphatab-settings"; +import { DemoPlayButton } from "@site/src/components/DemoPlayButton"; import styles from "./styles.module.scss"; export interface SelectionHandleDemoProps { @@ -88,6 +89,7 @@ export const SelectionHandleDemo: React.FC = ({ settings={site.settings} > {showEventLog && } + } /> {showEventLog && ( diff --git a/website/src/components/SelectionHandleDemo/styles.module.scss b/website/src/components/SelectionHandleDemo/styles.module.scss index 669b5f00a..0148ee9d0 100644 --- a/website/src/components/SelectionHandleDemo/styles.module.scss +++ b/website/src/components/SelectionHandleDemo/styles.module.scss @@ -59,4 +59,7 @@ line-height: 1.5; white-space: pre; font-variant-numeric: tabular-nums; -} \ No newline at end of file +} +.play { + margin-bottom: 0.5rem; +} diff --git a/website/src/components/SettingsJsonDemo/index.tsx b/website/src/components/SettingsJsonDemo/index.tsx index 734d73b05..05b4ed9b5 100644 --- a/website/src/components/SettingsJsonDemo/index.tsx +++ b/website/src/components/SettingsJsonDemo/index.tsx @@ -245,7 +245,6 @@ export const SettingsJsonDemo: React.FC = ({ showCode = true, }) => { const site = useSiteAlphaTabSettings({ - player: true, settings: { display: { scale: 1.0 } }, }); return ( diff --git a/website/src/components/SpacingSlidersDemo/index.tsx b/website/src/components/SpacingSlidersDemo/index.tsx index 617d6441e..04b8c1747 100644 --- a/website/src/components/SpacingSlidersDemo/index.tsx +++ b/website/src/components/SpacingSlidersDemo/index.tsx @@ -24,7 +24,6 @@ export const SpacingSlidersDemo: React.FC = ({ const [spacingRatio, setSpacingRatio] = useState(1.5); const [lastSystemFillThreshold, setLastSystemFillThreshold] = useState(0.5); const site = useSiteAlphaTabSettings({ - player: true, settings: { display: { stretchForce, diff --git a/website/src/components/SystemSeparatorDemo/index.tsx b/website/src/components/SystemSeparatorDemo/index.tsx index 539c577ca..64002f564 100644 --- a/website/src/components/SystemSeparatorDemo/index.tsx +++ b/website/src/components/SystemSeparatorDemo/index.tsx @@ -41,7 +41,7 @@ export const SystemSeparatorDemo: React.FC = ({ showCode = true, }) => { const [enabled, setEnabled] = useState(true); - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); const code = `api.scoreLoaded.on((score) => { score.stylesheet.useSystemSignSeparator = ${enabled}; diff --git a/website/src/components/ToggleElementsDemo/index.tsx b/website/src/components/ToggleElementsDemo/index.tsx index 8d2c33d70..766ca8cf4 100644 --- a/website/src/components/ToggleElementsDemo/index.tsx +++ b/website/src/components/ToggleElementsDemo/index.tsx @@ -76,7 +76,7 @@ export const ToggleElementsDemo: React.FC = ({ EffectPalmMute: true, }); - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); const flip = (key: ElementKey) => { setVisibility((v) => ({ ...v, [key]: !v[key] })); diff --git a/website/src/components/TrackNamePolicyDemo/index.tsx b/website/src/components/TrackNamePolicyDemo/index.tsx index 51aebe278..b0a2f4468 100644 --- a/website/src/components/TrackNamePolicyDemo/index.tsx +++ b/website/src/components/TrackNamePolicyDemo/index.tsx @@ -65,7 +65,7 @@ export const TrackNamePolicyDemo: React.FC = ({ const [mode, setMode] = useState("FullName"); const [orientation, setOrientation] = useState("Horizontal"); - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); const code = `api.scoreLoaded.on((score) => { const s = score.stylesheet; diff --git a/website/src/components/TrackSwitcher/index.tsx b/website/src/components/TrackSwitcher/index.tsx index d34226a47..d7d877290 100644 --- a/website/src/components/TrackSwitcher/index.tsx +++ b/website/src/components/TrackSwitcher/index.tsx @@ -129,7 +129,7 @@ const Inner: React.FC = () => { export const TrackSwitcher: React.FC = ({ showCode = true, }) => { - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); const code = `const api = new alphaTab.AlphaTabApi(container, { core: { file: '/scores/song.gp5', diff --git a/website/src/components/TuningModeSwitch/index.tsx b/website/src/components/TuningModeSwitch/index.tsx index 26027bcfa..b1539b8de 100644 --- a/website/src/components/TuningModeSwitch/index.tsx +++ b/website/src/components/TuningModeSwitch/index.tsx @@ -49,7 +49,6 @@ export const TuningModeSwitch: React.FC = ({ const [mode, setMode] = useState("Score"); const [hidden, setHidden] = useState(false); const site = useSiteAlphaTabSettings({ - player: true, settings: { display: { barCount: 12 } }, }); diff --git a/website/src/components/UrlLoadSwitcher/index.tsx b/website/src/components/UrlLoadSwitcher/index.tsx index c6f89e228..fea401d35 100644 --- a/website/src/components/UrlLoadSwitcher/index.tsx +++ b/website/src/components/UrlLoadSwitcher/index.tsx @@ -65,7 +65,7 @@ export const UrlLoadSwitcher: React.FC = ({ showCode = true, }) => { const [currentUrl, setCurrentUrl] = useState(CHORDS_URL); - const site = useSiteAlphaTabSettings({ player: true }); + const site = useSiteAlphaTabSettings(); const code = `const api = new alphaTab.AlphaTabApi(container, { core: { file: '/scores/chords.gp5' }, diff --git a/website/src/components/ZoomSliderDemo/index.tsx b/website/src/components/ZoomSliderDemo/index.tsx index 8686feec6..ab361c309 100644 --- a/website/src/components/ZoomSliderDemo/index.tsx +++ b/website/src/components/ZoomSliderDemo/index.tsx @@ -23,7 +23,6 @@ export const ZoomSliderDemo: React.FC = ({ const [scale, setScale] = useState(1.3); const [pendingScale, setPendingScale] = useState(1.3); const site = useSiteAlphaTabSettings({ - player: true, settings: { display: { scale } }, });
${category}
${category}
\`${member.name.getText()}\`\`${member.name.getText()}\`