Add exports popup

Author: augustin64

score-display/loaders/wd_data.js

@@ -70,8 +70,7 @@ export class WdDataLoader {
   }
 
   async exportAs(format) {
-    console.error("WdDataLoader can't generate an export.");
-    return
+    throw "WdDataLoader can't generate an export.";
   }
 
   async destroy() {}

score-display/loaders/webmscore.js

@@ -154,7 +154,7 @@ export class WebMscoreLoader {
     if (format == "ogg")
       return score.saveAudio("ogg");
 
-    console.error(`Unknown download format ${format}`);
+    throw `Unknown download format ${format}`;
   }
 
   async destroy() {

score-display/score-display.css

@@ -193,4 +193,72 @@
 
 .slcwd-button:hover+.slcwd-playback-tooltip {
   display: unset;
+}
+
+.slcwd-exports {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 3;
+
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  min-width: 400px;
+  padding: 12px;
+  padding-top: 40px;
+  border: 1px solid #ccc;
+  background: #fff;
+  box-shadow: rgba(17, 17, 26, 0.12) 0px 8px 24px;
+
+  border-radius: 10px;
+}
+
+.slcwd-exports-close {
+  position: absolute;
+  right: 8px;
+  top: 8px;
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+}
+
+.slcwd-exports-close:hover {
+  color: red;
+}
+
+.slcwd-exports > div {
+  display: flex;
+}
+
+.slcwd-exports .slcwd-button {
+  width: 100%;
+  text-align: left;
+  padding: 8px 10px;
+  border-radius: 5px;
+  white-space: nowrap;
+}
+
+.slcwd-export-error {
+  color: red;
+}
+
+.slcwd-spinner {
+  animation-name: slcwd-spin;
+  animation-duration: 3s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+  color: #0B67FF;
+}
+
+@keyframes slcwd-spin {
+    from {
+        transform:rotate(0deg);
+    }
+    to {
+        transform:rotate(360deg);
+    }
 }

score-display/score-display.global.js

@@ -48,23 +48,27 @@ loadStylesheet("https://maxst.icons8.com/vue-static/landings/line-awesome/line-a
       downloads: Object
     },
     setup(props, ctx) {
-      console.log(props);
-
       function close() {
         ctx.emit('close')
       }
 
       function download(element) {
-        ctx.emit('download', element)
+        if (element.isLoading || element.errored) return;
+
+        element.isLoading = true;
+        ctx.emit('download', element, () => {element.isLoading = false}, () => {element.errored = true})
       }
 
       return { close, download }
     },
     template: /*html*/`
       <div class="slcwd-exports" ref="ref">
-        <button @click="close">x</button>
+        <button class="slcwd-exports-close" @click="close"><i class="las la-times"></i></button>
         <div v-for="el of downloads">
           <button class="slcwd-button" @click="() => download(el)">
+            <i v-if="el.errored" class="las la-exclamation-circle slcwd-export-error"></i>
+            <i v-else-if="el.isLoading" class="las la-circle-notch slcwd-spinner"></i>
+            <i v-else class="las la-file-download"></i>
             {{ el.name }}
           </button>
         </div>
@@ -292,8 +296,8 @@ loadStylesheet("https://maxst.icons8.com/vue-static/landings/line-awesome/line-a
         ctx.emit('select', ret)
       }
 
-      function download(element) {
-        ctx.emit('download', element);
+      function download(element, callback, errcallback) {
+        ctx.emit('download', element, callback, errcallback);
       }
 
       function closeExportPopup () {
@@ -345,7 +349,7 @@ loadStylesheet("https://maxst.icons8.com/vue-static/landings/line-awesome/line-a
         </button>
         <button
           v-if="downloads.length == 1"
-          @click="() => download(downloads[0])"
+          @click="() => download(downloads[0], () => {}, () => {})"
           class="slcwd-button"
         >
             <i class="las la-file-download"></i> <span class="label">{{ downloads[0].name }}</span>
@@ -357,13 +361,13 @@ loadStylesheet("https://maxst.icons8.com/vue-static/landings/line-awesome/line-a
         >
           <i class="las la-file-download"></i> <span class="label">Download</span>
         </button>
-        <ExportPopup
-          v-if="showExportPopup"
-          :downloads=downloads
-          @close="closeExportPopup"
-          @download="download"
-        />
       </div>
+      <ExportPopup
+        v-show="showExportPopup"
+        :downloads=downloads
+        @close="closeExportPopup"
+        @download="download"
+      />
     `
   }
 
@@ -786,26 +790,31 @@ loadStylesheet("https://maxst.icons8.com/vue-static/landings/line-awesome/line-a
         }
       )
 
-      async function download(element) {
-        let dataLoc = element.href;
-        let filename = null; // If null, will get it from URL
-        if (dataLoc.startsWith("mscz/export:")) {
-          if (!WebMscoreSupported.includes(props.type)) {// We have no mscz source file
-            console.error("Could not save file, score is not loaded from websmcore", element);
-            return;
-          }
-          if (loader.value == null) {
-            console.error("Loader not available.");
-            return;
+      async function download(element, callback, errcallback) {
+        try {
+          let dataLoc = element.href;
+          let filename = null;
+          if (dataLoc.startsWith("mscz/export:")) {
+            if (!WebMscoreSupported.includes(props.type)) // We have no mscz source file
+              throw "Could not save file, score is not loaded from websmcore";
+            if (loader.value == null)
+              throw "Loader not available.";
+
+            const exportFormat = dataLoc.split(":")[1];
+            const data = await loader.value.exportAs(exportFormat);
+            filename = `${scoreMeta.value.title}.${exportFormat}`;
+            dataLoc = new Blob([data]);
+          } else {
+            filename = element.href.substr(element.href.lastIndexOf("/")+1);
           }
+          
+          saveAs(dataLoc, filename);
+          callback();
 
-          const exportFormat = dataLoc.split(":")[1];
-          const data = await loader.value.exportAs(exportFormat);
-          filename = `${scoreMeta.value.title}.${exportFormat}`;
-          dataLoc = new Blob([data]);
+        } catch (error) {
+          console.error(`While exporting for "${element.name}" : ${error}`);
+          errcallback();
         }
-        
-        saveAs(dataLoc, filename);
       }
 
 

viewer.html

@@ -36,6 +36,12 @@
       document.getElementById("score-container").innerHTML += `
         <score-display id="score-display" src="data:.${extension};base64,${base64score}" type="${extension}">
           <score-track type="mscz/synth:all">Tutti</score-track>
+
+          <score-download href="mscz/export:mscz">Download mscz</score-download>
+          <score-download href="mscz/export:pdf">Download pdf</score-download>
+          <score-download href="mscz/export:mxl">Download mxl</score-download>
+          <score-download href="mscz/export:musicxml">Download MusicXML</score-download>
+          <score-download href="mscz/export:ogg">Download audio (ogg)</score-download>
         </score-display>
       `;