Audio sync fixes

app/.vscode/launch.json

@@ -0,0 +1,17 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Attach",
+            "port": 9229,
+            "request": "attach",
+            "skipFiles": [
+                "<node_internals>/**"
+            ],
+            "type": "node"
+        }
+    ]
+}

app/client/chordsheet.less

@@ -54,8 +54,9 @@
     }
   }
 
-  .inlineRefs .ref,
-  h3 {
+  .hideRefs h3,
+  .inlineRefs h3,
+  .inlineRefs .ref {
     font-size: 1em;
     margin: 0;
 
@@ -218,56 +219,66 @@
     }
   }
 
-  .interactive,
-  .addanchor,
-  .playfromline {
+  .interactive {
     .select(none);
     cursor: pointer;
 
-    .ref,
     .inlineReference {
-      display: none;
+      filter: grayscale(0.3);
+      background-color: var(--bg-list);
+      h3 {
+        display: none;
+      }
     }
 
     // interim UI for to know which datapoint to delete
-    .line::before {
-      content: attr(data-line-cnt);
+    .line .rowidx {
+      width: 0;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: end;
       opacity: 0.5;
+    }
+    &.isVideoActive .line .rowidx {
+      width: 100px;
       position: absolute;
-      margin-left: -3.8em;
+      margin-left: -110px;
       text-align: right;
-      width: 2em;
       line-height: 1.4em;
-    }
 
-    .line:hover::before {
-      opacity: 1;
+      b {
+        &.newtime {
+          opacity: 0.1;
+        }
+        line-height: 15px;
+        color: var(--text-inverted);
+        padding: 3px;
+        margin-right: 2px;
+        border-top-left-radius: 10px;
+        border-bottom-left-radius: 10px;
+        background-color: var(--accent-flat);
+      }
+
+      &:hover {
+        opacity: 1;
+
+        &:not(.newtime) {
+        text-decoration: line-through;
+        }
+      }
     }
   }
 
-  // .addanchor {
-  //   .line:hover {
-  //     border-top: 2px solid var(--accent);
-  //     &::before {
-  //       content: "+" attr(data-line-cnt);
-  //     }
-  //   }
-  // }
-  .playfromline {
-    .line {
-      i {
-        transition: color 0.2s;
-      }
-      &:hover i {
-        color: var(--accent);
-        transition: color 0s;
-      }
+  span.line :not(li) {
+    transition: color 0.2s;
+    &:hover :not(li) {
+      color: var(--accent);
+      transition: color 0s;
     }
   }
 
-  .interactive,
-  .addanchor,
-  .playfromline {
+  .interactive {
     i {
       line-height: 1.4em;
       text-indent: 0 !important;
@@ -387,6 +398,16 @@
     } // before aka. chords
   } // i
 
+  .interactive .line {
+    // https://stackoverflow.com/questions/22270078/css-hover-on-a-div-but-not-if-hover-on-his-children
+    &:hover:not(:has(*:hover)) {
+      &::after {
+        content: "++++";
+        border-top: solid 3px;
+      }
+    }
+  }
+
   .interactive .line i .before {
     // Re-allow chord text selection when editing.
     .select(text);
@@ -422,7 +443,7 @@
     }
   }
   .song-video-preview {
-    position: absolute;
+    position: fixed;
     top: 0;
     right: 50%;
   }
@@ -443,16 +464,4 @@
       aspect-ratio: 3/2;
     }
   }
-  .time-insert-indicator {
-    display: flex;
-    align-items: end;
-    span {
-      color: var(--text-inverted);
-      padding: 2px;
-      width: 50px;
-      border-top-right-radius: 10px;
-      border-bottom-right-radius: 10px;
-      background-color: var(--accent-flat);
-    }
-  }
 } // .chordsheet

app/imports/api/collections.ts

@@ -4,14 +4,15 @@ import { parse, HTMLElement } from "node-html-parser";
 import slug from "slug";
 import { Meteor } from "meteor/meteor";
 import { parseRechordsDown } from "./parseRechordsDown";
+import { extractData } from "./extractData";
 
 const DATACHORD = "data-chord";
 
 function isDefined<T>(a: T | null | undefined): a is T {
   return a !== null && a !== undefined;
 }
 
-export const rmd_version = 11;
+export const rmd_version = 12;
 
 export class Song {
   _id?: string;
@@ -32,6 +33,8 @@ export class Song {
   last_editor?: string;
 
   revision_cache?: Revision[];
+
+  video_data?: { ytId: string; anchors: [number, number][] };
   has_video: boolean = false;
 
   constructor(doc: { text: string }) {
@@ -144,6 +147,12 @@ export class Song {
         .getElementsByTagName("pre")?.[0]
         ?.childNodes[0]?.rawText.includes("language-yt") ?? false;
 
+    if (this.has_video) {
+      let data = dom.getElementsByTagName("pre")?.[0]?.childNodes[0]?.rawText;
+      data = data.replace('<code class="yt language-yt">', "");
+      data = data.replace("</code>", "");
+      this.video_data = extractData(data);
+    }
     this.tags = RmdHelpers.collectTags(dom);
     this.chords = RmdHelpers.collectChords(dom);
     this.parsed_rmd_version = rmd_version;
@@ -155,7 +164,7 @@ export class Song {
         { of: this._id },
         {
           sort: { timestamp: -1 },
-        },
+        }
       ).fetch();
     }
     return this.revision_cache;
@@ -192,7 +201,7 @@ export class RmdHelpers {
       .map((li) =>
         Array.from(li.childNodes)
           .map((child) => child.textContent)
-          .join(":"),
+          .join(":")
       );
   }
 

app/imports/api/extractData.ts

@@ -0,0 +1,9 @@
+
+export function extractData(data: string): {
+  ytId: string;
+  anchors: [number, number][];
+} {
+  const [ytId, ..._anchors] = data.split("\n");
+  const anchors = _anchors.map((line) => line.split(/\s+/).map(parseFloat));
+  return { ytId, anchors };
+}