fix: #2052

Part-of: <https://dev.funkwhale.audio/funkwhale/funkwhale/-/merge_requests/2346>

front/src/components/Queue.vue

@@ -168,7 +168,16 @@ enum CoverType {
   MILK_DROP
 }
 
+let isWebGLSupported = false
+try {
+  const canvas = document.createElement('canvas')
+  isWebGLSupported = !!canvas.getContext('webgl2')
+} catch (error) {}
+
 const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
+if (!isWebGLSupported) {
+  coverType.value = CoverType.COVER_ART
+}
 </script>
 
 <template>
@@ -212,24 +221,28 @@ const coverType = useStorage('queue:cover-type', CoverType.COVER_ART)
                   v-if="!fullscreen || !idle"
                   class="cover-buttons"
                 >
-                  <button
+                  <tooltip :content="!isWebGLSupported && $t('components.Queue.message.webglUnsupported')">
-                    v-if="coverType === CoverType.COVER_ART"
+                    <button
-                    class="ui secondary button"
+                      v-if="coverType === CoverType.COVER_ART"
-                    :aria-label="labels.showVisualizer"
+                      class="ui secondary button"
-                    :title="labels.showVisualizer"
+                      :aria-label="labels.showVisualizer"
-                    @click="coverType = CoverType.MILK_DROP"
+                      :title="labels.showVisualizer"
-                  >
+                      :disabled="!isWebGLSupported"
-                    <i class="icon signal" />
+                      @click="coverType = CoverType.MILK_DROP"
-                  </button>
+                    >
-                  <button
+                      <i class="icon signal" />
-                    v-else-if="coverType === CoverType.MILK_DROP"
+                    </button>
-                    class="ui secondary button"
+                    <button
-                    :aria-label="labels.showCoverArt"
+                      v-else-if="coverType === CoverType.MILK_DROP"
-                    :title="labels.showCoverArt"
+                      class="ui secondary button"
-                    @click="coverType = CoverType.COVER_ART"
+                      :aria-label="labels.showCoverArt"
-                  >
+                      :title="labels.showCoverArt"
-                    <i class="icon image outline" />
+                      :disabled="!isWebGLSupported"
-                  </button>
+                      @click="coverType = CoverType.COVER_ART"
+                    >
+                      <i class="icon image outline" />
+                    </button>
+                  </tooltip>
 
                   <button
                     v-if="!fullscreen"

front/src/components/common/Tooltip.vue

@@ -1,15 +1,25 @@
 <script setup lang="ts">
 
 interface Props {
-  content: string
+  content: string | false
+  tag?: string
 }
 
-defineProps<Props>()
+withDefaults(defineProps<Props>(), {
+  tag: 'span'
+})
 </script>
 
 <template>
-  <span
+  <component
-    class="tooltip"
+    :is="tag"
+    v-if="content"
     :data-tooltip="content"
-  ><i class="question circle icon" /></span>
+    class="tooltip"
+  >
+    <slot>
+      <i class="question circle icon" />
+    </slot>
+  </component>
+  <slot v-else />
 </template>

front/src/locales/en_US.json

@@ -178,7 +178,8 @@
       },
       "message": {
         "automaticPlay": "The next track will play automatically in a few seconds…",
-        "radio": "New tracks will be appended here automatically."
+        "radio": "New tracks will be appended here automatically.",
+        "webglUnsupported": "Your browser does not support WebGL2 context"
       },
       "warning": {
         "connectivity": "You may have a connectivity issue."

front/src/style/components/_queue.scss

@@ -364,6 +364,11 @@
               opacity: 0;
               transform: translateY(0.5em);
             }
+            
+            .tooltip {
+              z-index: 2;
+              pointer-events: all;
+            }
 
             button {
               z-index: 2;