Update share buttons to not show an error on abort

client/components/stats/YearInReview.vue

@@ -40,10 +40,10 @@ export default {
 
       const createRoundedRect = (x, y, w, h) => {
         const grd1 = ctx.createLinearGradient(x, y, x + w, y + h)
-        grd1.addColorStop(0, '#44444466')
-        grd1.addColorStop(1, '#ffffff22')
+        grd1.addColorStop(0, '#44444455')
+        grd1.addColorStop(1, '#ffffff11')
         ctx.fillStyle = grd1
-        ctx.strokeStyle = '#C0C0C0aa'
+        ctx.strokeStyle = '#C0C0C088'
         ctx.beginPath()
         ctx.roundRect(x, y, w, h, [20])
         ctx.fill()
@@ -258,7 +258,9 @@ export default {
             })
             .catch((error) => {
               console.error('Failed to share', error)
-              this.$toast.error('Failed to share: ' + error.message)
+              if (error.name !== 'AbortError') {
+                this.$toast.error('Failed to share: ' + error.message)
+              }
             })
         } else {
           this.$toast.error('Cannot share natively on this device')

client/components/stats/YearInReviewBanner.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-4">
+  <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-1 sm:p-4 mb-4">
     <!-- hack to get icon fonts loaded on init -->
     <div class="h-0 w-0 overflow-hidden opacity-0">
       <span class="material-icons-outlined">close</span>
@@ -26,7 +26,8 @@
         <ui-btn v-if="showShareButton" small :disabled="processingYearInReview" class="inline-flex sm:hidden items-center font-semibold ml-1 sm:ml-2" @click="shareYearInReview"> Share </ui-btn>
 
         <div class="flex-grow" />
-        <p class="text-lg font-semibold">Your Year <span class="hidden md:inline-block">in Review&nbsp;</span>({{ yearInReviewVariant + 1 }})</p>
+        <p class="hidden sm:block text-lg font-semibold">Your Year in Review ({{ yearInReviewVariant + 1 }})</p>
+        <p class="block sm:hidden text-lg font-semibold">{{ yearInReviewVariant + 1 }}</p>
         <div class="flex-grow" />
 
         <!-- refresh button -->
@@ -44,6 +45,8 @@
 
       <!-- your year in review short -->
       <div class="w-full max-w-[800px] mx-auto my-4">
+        <!-- share button -->
+        <ui-btn v-if="showShareButton" small :disabled="processingYearInReviewShort" class="inline-flex sm:hidden items-center font-semibold mb-1" @click="shareYearInReviewShort"> Share </ui-btn>
         <stats-year-in-review-short ref="yearInReviewShort" :year="yearInReviewYear" :processing.sync="processingYearInReviewShort" />
       </div>
 
@@ -52,14 +55,15 @@
         <div class="flex items-center justify-center mb-2">
           <!-- previous button -->
           <ui-btn small :disabled="!yearInReviewServerVariant || processingYearInReviewServer" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant--">
-            <span class="material-icons-outlined text-lg px-1 sm:pr-1 py-px sm:py-0">chevron_left</span>
+            <span class="material-icons text-lg sm:pr-1 py-px sm:py-0">chevron_left</span>
             <span class="hidden sm:inline-block pr-2">Previous</span>
           </ui-btn>
           <!-- share button -->
           <ui-btn v-if="showShareButton" small :disabled="processingYearInReviewServer" class="inline-flex sm:hidden items-center font-semibold ml-1 sm:ml-2" @click="shareYearInReviewServer"> Share </ui-btn>
 
           <div class="flex-grow" />
-          <p class="text-lg font-semibold">Server <span class="hidden md:inline-block">Year in Review&nbsp;</span>({{ yearInReviewServerVariant + 1 }})</p>
+          <p class="hidden sm:block text-lg font-semibold">Server Year in Review ({{ yearInReviewServerVariant + 1 }})</p>
+          <p class="block sm:hidden text-lg font-semibold">{{ yearInReviewServerVariant + 1 }}</p>
           <div class="flex-grow" />
 
           <!-- refresh button -->
@@ -70,7 +74,7 @@
           <!-- next button -->
           <ui-btn small :disabled="yearInReviewServerVariant >= 2 || processingYearInReviewServer" class="inline-flex items-center font-semibold" @click="yearInReviewServerVariant++">
             <span class="hidden sm:inline-block pl-2">Next</span>
-            <span class="material-icons-outlined text-lg px-1 sm:pl-1 py-px sm:py-0">chevron_right</span>
+            <span class="material-icons-outlined text-lg sm:pl-1 py-px sm:py-0">chevron_right</span>
           </ui-btn>
         </div>
       </div>
@@ -105,6 +109,9 @@ export default {
     shareYearInReview() {
       this.$refs.yearInReview.share()
     },
+    shareYearInReviewShort() {
+      this.$refs.yearInReviewShort.share()
+    },
     refreshYearInReviewServer() {
       this.$refs.yearInReviewServer.refresh()
     },

client/components/stats/YearInReviewServer.vue

@@ -40,10 +40,10 @@ export default {
 
       const createRoundedRect = (x, y, w, h) => {
         const grd1 = ctx.createLinearGradient(x, y, x + w, y + h)
-        grd1.addColorStop(0, '#44444466')
-        grd1.addColorStop(1, '#ffffff22')
+        grd1.addColorStop(0, '#44444455')
+        grd1.addColorStop(1, '#ffffff11')
         ctx.fillStyle = grd1
-        ctx.strokeStyle = '#C0C0C0aa'
+        ctx.strokeStyle = '#C0C0C088'
         ctx.beginPath()
         ctx.roundRect(x, y, w, h, [20])
         ctx.fill()
@@ -234,7 +234,9 @@ export default {
             })
             .catch((error) => {
               console.error('Failed to share', error)
-              this.$toast.error('Failed to share: ' + error.message)
+              if (error.name !== 'AbortError') {
+                this.$toast.error('Failed to share: ' + error.message)
+              }
             })
         } else {
           this.$toast.error('Cannot share natively on this device')

client/components/stats/YearInReviewShort.vue

@@ -15,6 +15,7 @@ export default {
   },
   data() {
     return {
+      canvas: null,
       dataUrl: null,
       yearStats: null
     }
@@ -146,8 +147,32 @@ export default {
       addText('books listened to', '20px', 'normal', tanColor, '0px', 400, 155)
       addIcon('local_library', 'white', '42px', 345, 130)
 
+      this.canvas = canvas
       this.dataUrl = canvas.toDataURL('png')
     },
+    share() {
+      this.canvas.toBlob((blob) => {
+        const file = new File([blob], 'yearinreviewserver.png', { type: blob.type + 'cat' })
+        const shareData = {
+          files: [file]
+        }
+        if (navigator.canShare(shareData)) {
+          navigator
+            .share(shareData)
+            .then(() => {
+              console.log('Share success')
+            })
+            .catch((error) => {
+              console.error('Failed to share', error)
+              if (error.name !== 'AbortError') {
+                this.$toast.error('Failed to share: ' + error.message)
+              }
+            })
+        } else {
+          this.$toast.error('Cannot share natively on this device')
+        }
+      })
+    },
     refresh() {
       this.init()
     },