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/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 }} diff --git a/.github/workflows/~publish_website.yml b/.github/workflows/~publish_website.yml index f5368351a..694ac8a51 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 @@ -150,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 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); 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()}\`