quick and dirty abc render in the tune search

App/Dataclasses/DatabaseFolkTuneDetails.php

@@ -62,4 +62,18 @@ K: {$this->Parts[$counter]->KeySignature}";
         }
         return $builder;
     }
+
+    public function BuildSimple(): string
+    {
+        $builder = "X: {$this->ID}
+L: 1/4";
+
+        $builder .= "
+M: {$this->Parts[0]->TimeSignature}";
+        $previousTimeSignature = $this->Parts[0]->TimeSignature;
+
+        $builder .= "
+{$this->Parts[0]->ABCNotation}";
+        return $builder;
+    }
 }

Public/API/V1/GetABCFile.php

@@ -1,14 +1,13 @@
 <?php
 
 use App\Dataclasses\DatabaseFolkTuneDetails;
-use App\Dataclasses\TuneVariant;
 use App\Wrappers\DatabaseInteractions;
 use App\Wrappers\SQLQueryBuilderWrapper;
 
 require_once __DIR__ . "/../../../vendor/autoload.php";
 
 $tuneDir = __DIR__ . '/../../../LocalStorage/Tunes';
-$targetTuneVariantID = $_GET['tune-variant-id'];
+$targetTuneVariantID = $_GET['tune-id'];
 
 $db = new DatabaseInteractions();
 

Public/API/V1/GetBasicABC.php

@@ -1,53 +0,0 @@
-<?php
-
-use App\Dataclasses\DatabaseFolkTuneDetails;
-use App\Dataclasses\TuneVariant;
-use App\Wrappers\DatabaseInteractions;
-use App\Wrappers\SQLQueryBuilderWrapper;
-
-$tuneDir = __DIR__ . '/../../../LocalStorage/Tunes';
-$targetTuneVariantID = $_GET['tune-variant-id'];
-
-$db = new DatabaseInteractions();
-
-$variantDetails = $db->RunOneSelect(
-    queryBuilder: SQLQueryBuilderWrapper::SELECT_ONE(
-        table: 'TuneVariants',
-        id: $targetTuneVariantID
-    )
-        ->cols([
-            'T.ID AS TuneVariantID',
-            'T.TuneID AS TuneID',
-            "CONCAT('[', GROUP_CONCAT(
-                CONCAT(
-                    '{\"TimeSignature\":', JSON_QUOTE(T_TVP.TimeSignature), ',',
-                    '\"KeySignature\":', JSON_QUOTE(T_TVP.KeySignature), ',',
-                    '\"ABCNotation\":', JSON_QUOTE(T_TVP.ABCNotation), '}'
-                )
-            ), ']') AS Parts"
-        ])
-        ->join(
-            join: 'INNER',
-            spec: 'TuneVariantParts AS T_TVP',
-            cond: 'T.ID = T_TVP.TuneVariantID'
-        )
-        ->groupBy(spec: [
-            'T.ID',
-        ])
-);
-
-$tuneDetails = $db->RunOneSelect(
-    queryBuilder: SQLQueryBuilderWrapper::SELECT_ONE(
-        table: 'Tunes',
-        id: $variantDetails['TuneID']
-    )
-);
-
-
-$tuneDetails = new DatabaseFolkTuneDetails($tuneDetails);
-$variantDetails = new TuneVariant($tuneDetails, $variantDetails);
-
-
-header(header: "Content-type: text/text");
-echo $variantDetails->Build();
-die();

Public/API/V1/GetBasicABCFile.php

@@ -0,0 +1,46 @@
+<?php
+
+use App\Dataclasses\DatabaseFolkTuneDetails;
+use App\Wrappers\DatabaseInteractions;
+use App\Wrappers\SQLQueryBuilderWrapper;
+
+require_once __DIR__ . "/../../../vendor/autoload.php";
+
+$tuneDir = __DIR__ . '/../../../LocalStorage/Tunes';
+$targetTuneVariantID = $_GET['tune-id'];
+
+$db = new DatabaseInteractions();
+
+$tuneDetails = $db->RunOneSelect(
+    queryBuilder: SQLQueryBuilderWrapper::SELECT_ONE(
+        table: 'Tunes',
+        id: $targetTuneVariantID
+    )
+        ->cols([
+            'T.ID AS TuneID',
+            "CONCAT('[', GROUP_CONCAT(
+                CONCAT(
+                    '{\"TimeSignature\":', JSON_QUOTE(T_TP.TimeSignature), ',',
+                    '\"KeySignature\":', JSON_QUOTE(T_TP.KeySignature), ',',
+                    '\"PartLetter\":', JSON_QUOTE(T_TP.PartLetter), ',',
+                    '\"ABCNotation\":', JSON_QUOTE(T_TP.ABCNotation), '}'
+                )
+            ), ']') AS Parts"
+        ])
+        ->join(
+            join: 'INNER',
+            spec: 'TuneParts AS T_TP',
+            cond: 'T.ID = T_TP.TuneID'
+        )
+        ->groupBy(spec: [
+            'T.ID',
+        ])
+);
+
+
+$tuneDetails = new DatabaseFolkTuneDetails($tuneDetails);
+
+
+header(header: "Content-type: text/text");
+echo $tuneDetails->BuildSimple();
+die();

Public/Static/JS/General/AlgoliaInteractions.js

@@ -1,6 +1,45 @@
 
 
 
+
+function renderABCPartA(targetTuneID)
+{
+    console.log(targetTuneID);
+    API_GET_TEXT("/V1/GetBasicABCFile.php?tune-id=" + targetTuneID)
+        .then(payload => {
+            // Ensure required DOM elements exist
+            const notationContainer = document.getElementById("NotationContainer--" + targetTuneID);
+
+            if (!notationContainer) {
+                console.error(`Missing DOM elements for targetTuneID: ${targetTuneID}`);
+                return;
+            }
+
+            // Render the ABC notation
+            const tunes = window.ABCJS.renderAbc(
+                notationContainer.id,
+                payload,
+                {
+                    add_classes: true,
+                    format: {
+                        gchordfont: "Atkinson Hyperlegible",
+                        annotationfont: "Atkinson Hyperlegible",
+                        headerfont: "Atkinson Hyperlegible",
+                        infofont: "Atkinson Hyperlegible",
+                        repeatfont: "Atkinson Hyperlegible",
+                        tempofont: "Atkinson Hyperlegible",
+                        titlefont: "Atkinson Hyperlegible",
+                        voicefont: "Atkinson Hyperlegible",
+                        wordsfont: "Atkinson Hyperlegible",
+                    },
+                }
+            );
+        })
+        .catch(error => {
+            console.error("Error fetching ABC data:", error);
+        });
+}
+
 function searchTunes(query) {
     const resultsDiv = document.getElementById("AlgoliaResults");
 
@@ -15,12 +54,11 @@ function searchTunes(query) {
 <h2><a href="/tune/${hit.objectID}">${hit.title}</a></h2>
 <div class="TuneTimeSignature">time signature: ${hit.time_sig}</div>
 <div class="TuneKeySignature">key signature: ${hit.key_sig}</div>
-<div id="VerovioContainer-${hit.objectID}"></div>
-<script>RenderVerovio("VerovioContainer-${hit.objectID}", '${hit.objectID}');</script>
-
+<div id="NotationContainer--${hit.objectID}"></div>
 </div>
 `;
                 resultsDiv.appendChild(tuneDiv);
+                renderABCPartA(hit.objectID);
             });
         } else {
             resultsDiv.innerHTML = "<p>No tunes found. Try a different search!</p>";
@@ -30,5 +68,3 @@ function searchTunes(query) {
         resultsDiv.innerHTML = "<p>An error occurred. Please try again later.</p>";
     });
 }
-
-

Templates/Pages/tune/uuid.html.twig

@@ -105,7 +105,7 @@
     <script>
         document.addEventListener("DOMContentLoaded", function () {
             const targetTuneID = '{{ TuneDetails.ID }}';
-            API_GET_TEXT("/V1/GetABCFile.php?tune-variant-id=" + targetTuneID)
+            API_GET_TEXT("/V1/GetABCFile.php?tune-id=" + targetTuneID)
                 .then(payload => {
                     // Ensure required DOM elements exist
                     const notationContainer = document.getElementById("NotationContainer--" + targetTuneID);
@@ -117,8 +117,6 @@
                         return;
                     }
 
-                    console.log(window.ABCJS);
-
                     // Render the ABC notation
                     const tunes = window.ABCJS.renderAbc(
                         notationContainer.id,

Templates/Pages/tunes.html.twig

@@ -1,6 +1,8 @@
 {% extends "/Bases/StandardWebPage.html.twig" %}
 
 {% block content %}
+
+    <script src="/Static/JS/ThirdParty/abcjs-basic.js"></script>
     <div class="InnerContent">
         <h1>Folk Tune Search</h1>
         <input type="text" id="SearchInput" placeholder="Search for a tune...">