Mercurial > code > home > repos > light9

changeset 2121:486cb74f54df

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
move timeline component for sharing in asco
author drewp@bigasterisk.com
date Thu, 02 Jun 2022 23:21:56 -0700
parents 0745923e912f
children 7c70f3e0af9f
files light9/web/light9-timeline-audio.ts light9/web/timeline/light9-timeline-audio.ts light9/web/timeline/timeline-elements.ts
diffstat 3 files changed, 86 insertions(+), 86 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/light9/web/light9-timeline-audio.ts	Thu Jun 02 23:21:56 2022 -0700
@@ -0,0 +1,85 @@
+import { debug } from "debug";
+
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+const log = debug("audio");
+
+// (potentially-zoomed) spectrogram view
+@customElement("light9-timeline-audio")
+export class Light9TimelineAudio extends LitElement {
+  render() {
+    return html`
+      <style>
+        :host {
+          display: block;
+          /* shouldn't be seen, but black is correct for 'no
+         audio'. Maybe loading stripes would be better */
+          background: #202322;
+        }
+        div {
+          width: 100%;
+          height: 100%;
+          overflow: hidden;
+        }
+        img {
+          height: 100%;
+          position: relative;
+        }
+      </style>
+      <div>
+        <img src="{{imgSrc}}" style="width: {{imgWidth}} ; left: {{imgLeft}}" />
+      </div>
+    `;
+  }
+  //    properties= {
+  //        graph: {type: Object, notify: true},
+  //        show: {type: String, notify: true},
+  //        song: {type: String, notify: true},
+  //        zoom: {type: Object, notify: true},
+  //        imgSrc: { type: String, notify: true},
+  //        imgWidth: { computed: '_imgWidth(zoom)' },
+  //        imgLeft: { computed: '_imgLeft(zoom)' },
+  //    }
+  //    observers= [
+  //        'setImgSrc(graph, show, song)'
+  //    ]
+  ready() {
+    this.zoom = { duration: 0 };
+  }
+  setImgSrc() {
+    graph.runHandler(
+      function () {
+        try {
+          var root = this.graph.stringValue(this.graph.Uri(this.show), this.graph.Uri(":spectrogramUrlRoot"));
+        } catch (e) {
+          return;
+        }
+
+        try {
+          var filename = this.graph.stringValue(this.song, this.graph.Uri(":songFilename"));
+        } catch (e) {
+          return;
+        }
+
+        this.imgSrc = root + "/" + filename.replace(".wav", ".png").replace(".ogg", ".png");
+      }.bind(this),
+      "timeline-audio " + this.song
+    );
+  }
+  _imgWidth(zoom) {
+    if (!zoom.duration) {
+      return "100%";
+    }
+
+    return 100 / ((zoom.t2 - zoom.t1) / zoom.duration) + "%";
+  }
+  _imgLeft(zoom) {
+    if (!zoom.duration) {
+      return "0";
+    }
+
+    var percentPerSec = 100 / (zoom.t2 - zoom.t1);
+    return -percentPerSec * zoom.t1 + "%";
+  }
+}
--- a/light9/web/timeline/light9-timeline-audio.ts	Thu Jun 02 23:21:25 2022 -0700
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,85 +0,0 @@
-import { debug } from "debug";
-
-import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement, property } from "lit/decorators.js";
-
-const log = debug("audio");
-
-// (potentially-zoomed) spectrogram view
-@customElement("light9-timeline-audio")
-export class Light9TimelineAudio extends LitElement {
-  render() {
-    return html`
-      <style>
-        :host {
-          display: block;
-          /* shouldn't be seen, but black is correct for 'no
-         audio'. Maybe loading stripes would be better */
-          background: #202322;
-        }
-        div {
-          width: 100%;
-          height: 100%;
-          overflow: hidden;
-        }
-        img {
-          height: 100%;
-          position: relative;
-        }
-      </style>
-      <div>
-        <img src="{{imgSrc}}" style="width: {{imgWidth}} ; left: {{imgLeft}}" />
-      </div>
-    `;
-  }
-  //    properties= {
-  //        graph: {type: Object, notify: true},
-  //        show: {type: String, notify: true},
-  //        song: {type: String, notify: true},
-  //        zoom: {type: Object, notify: true},
-  //        imgSrc: { type: String, notify: true},
-  //        imgWidth: { computed: '_imgWidth(zoom)' },
-  //        imgLeft: { computed: '_imgLeft(zoom)' },
-  //    }
-  //    observers= [
-  //        'setImgSrc(graph, show, song)'
-  //    ]
-  ready() {
-    this.zoom = { duration: 0 };
-  }
-  setImgSrc() {
-    graph.runHandler(
-      function () {
-        try {
-          var root = this.graph.stringValue(this.graph.Uri(this.show), this.graph.Uri(":spectrogramUrlRoot"));
-        } catch (e) {
-          return;
-        }
-
-        try {
-          var filename = this.graph.stringValue(this.song, this.graph.Uri(":songFilename"));
-        } catch (e) {
-          return;
-        }
-
-        this.imgSrc = root + "/" + filename.replace(".wav", ".png").replace(".ogg", ".png");
-      }.bind(this),
-      "timeline-audio " + this.song
-    );
-  }
-  _imgWidth(zoom) {
-    if (!zoom.duration) {
-      return "100%";
-    }
-
-    return 100 / ((zoom.t2 - zoom.t1) / zoom.duration) + "%";
-  }
-  _imgLeft(zoom) {
-    if (!zoom.duration) {
-      return "0";
-    }
-
-    var percentPerSec = 100 / (zoom.t2 - zoom.t1);
-    return -percentPerSec * zoom.t1 + "%";
-  }
-}
--- a/light9/web/timeline/timeline-elements.ts	Thu Jun 02 23:21:25 2022 -0700
+++ b/light9/web/timeline/timeline-elements.ts	Thu Jun 02 23:21:56 2022 -0700
@@ -2,7 +2,7 @@
 import { debug } from "debug";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
-export {Light9TimelineAudio} from "../timeline/light9-timeline-audio"
+export {Light9TimelineAudio} from "../light9-timeline-audio"
 debug.enable("*");
 /*
  <link rel="import" href="/lib/polymer/polymer.html">