progress

demweb/static/css-ze-parsed

@@ -0,0 +1 @@
+/home/david/Projects/demboyz/premake/gmake

demweb/static/css/main.css

@@ -0,0 +1,40 @@
+
+.btn-group-xs > .btn, .btn-xs { padding: .25rem .4rem; font-size: .875rem; line-height: .5; border-radius: .2rem; }
+
+.playlist { margin: 2em 0; }
+
+.playlist .playlist-time-scale { height: 30px; }
+
+.playlist .playlist-tracks { background: #e0eff1; }
+
+.playlist .channel { background: grey; }
+
+.playlist .channel-progress { background: orange; }
+
+.playlist .cursor { background: black; }
+
+.playlist .wp-fade { background-color: rgba(0, 0, 0, 0.1); }
+
+.playlist .state-cursor, .playlist .state-select { cursor: text; }
+
+.playlist .state-fadein { cursor: w-resize; }
+
+.playlist .state-fadeout { cursor: e-resize; }
+
+.playlist .state-shift { cursor: ew-resize; }
+
+.playlist .selection.point { background: red; }
+
+.playlist .selection.segment { background: rgba(0, 0, 0, 0.1); }
+
+.playlist .channel-wrapper.silent .channel { opacity: 0.3; }
+
+.playlist .controls { background: white; text-align: center; border: 1px solid black; border-radius: 0.2rem; }
+
+.playlist .controls .track-header { overflow: hidden; color: black; height: 26px; display: flex; align-items: center; justify-content: space-between; padding: 0 0.2rem; font-size: 0.65rem; margin-bottom: -10px; }
+
+.playlist .controls .track-header button { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
+
+.playlist .controls input[type="range"] { display: inline-block; width: 90%; }
+
+.playlist .controls .user-info { word-break: break-word; color: black; align-items: center; justify-content: space-between; padding: 0 0.2rem; font-size: 0.65rem; margin-top: -5px; }

demweb/static/js/main.js

@@ -0,0 +1,129 @@
+var playlist = WaveformPlaylist.init({
+  container: document.getElementById("playlist"),
+  timescale: true,
+  state: 'cursor',
+  samplesPerPixel: 16384,
+  zoomLevels: [2048, 4096, 8192, 16384],
+
+  controls: {
+    show: true,
+    width: 150,
+    widgets: {
+      stereoPan: false,
+    }
+  },
+  waveHeight: 96,
+});
+
+
+function updateTrackInfo(guid, info) {
+  var tracks = $(".playlist-tracks").children();
+  for (var i = 0; i < tracks.length; i++) {
+    var track = tracks[i].firstChild;
+    var trackGuid = track.firstChild.getElementsByTagName('span')[0].innerText;
+    var userInfoElem = track.lastChild;
+    if (userInfoElem.className != 'user-info') {
+      userInfoElem = document.createElement('label');
+      userInfoElem.className = 'user-info';
+      track.appendChild(userInfoElem);
+    }
+    if (guid === null || trackGuid == guid) {
+      userInfoElem.innerText = info;
+    }
+  }
+}
+
+var ee = playlist.getEventEmitter();
+var $container = $("body");
+var $time = $container.find(".audio-pos");
+var $time_ = $container.find(".audio-pos-2");
+
+var audioPos = 0;
+
+function clockFormat(seconds, decimals) {
+  var hours,
+      minutes,
+      secs,
+      result;
+
+  hours = parseInt(seconds / 3600, 10) % 24;
+  minutes = parseInt(seconds / 60, 10) % 60;
+  secs = seconds % 60;
+  secs = secs.toFixed(decimals);
+
+  result = (hours < 10 ? "0" + hours : hours) + ":" + (minutes < 10 ? "0" + minutes : minutes) + ":" + (secs < 10 ? "0" + secs : secs);
+
+  return result;
+}
+
+function updateTime(time) {
+  $time.html(clockFormat(time, 3));
+  audioPos = time;
+
+  var tick = time / g_session.tickinterval;
+  var silenceTicks = 0;
+  for (var i = 0; i < g_session.silence_chunks.length; i++) {
+    var chunk = g_session.silence_chunks[i];
+    if (tick > chunk[0]) {
+      silenceTicks += chunk[1];
+    } else {
+      break;
+    }
+  }
+  var tickedTime = (tick + silenceTicks) * g_session.tickinterval;
+  $time_.html(clockFormat(tickedTime, 3));
+}
+
+updateTime(audioPos);
+
+$container.on("click", ".btn-play", function() {
+  ee.emit("play");
+});
+
+$container.on("click", ".btn-pause", function() {
+  isLooping = false;
+  ee.emit("pause");
+});
+
+$container.on("click", ".btn-stop", function() {
+  isLooping = false;
+  ee.emit("stop");
+});
+
+$container.on("click", ".btn-rewind", function() {
+  isLooping = false;
+  ee.emit("rewind");
+});
+
+$container.on("click", ".btn-fast-forward", function() {
+  isLooping = false;
+  ee.emit("fastforward");
+});
+
+//zoom buttons
+$container.on("click", ".btn-zoom-in", function() {
+  ee.emit("zoomin");
+});
+
+$container.on("click", ".btn-zoom-out", function() {
+  ee.emit("zoomout");
+});
+
+
+$container.on("input change", ".master-gain", function(e){
+  ee.emit("mastervolumechange", e.target.value);
+});
+$container.find(".master-gain").change();
+
+$container.on("change", ".automatic-scroll", function(e){
+  ee.emit("automaticscroll", $(e.target).is(':checked'));
+});
+$container.find(".automatic-scroll").change();
+
+
+ee.on("timeupdate", updateTime);
+
+
+function onFinishedLoading() {
+  updateTrackInfo(null, "name");
+}