display error in player

src/components/VideoPlayer.vue

@@ -25,6 +25,11 @@
             <span v-t="'actions.skip_segment'" />
             <i class="material-icons-round">skip_next</i>
         </button>
+        <span
+            v-if="error > 0"
+            v-t="{ path: 'player.failed', args: [error] }"
+            class="absolute top-8 bg-black/80 backdrop-blur-sm p-2 text-lg rounded"
+        />
     </div>
 </template>
 
@@ -67,6 +72,7 @@ export default {
             isHoveringTimebar: false,
             currentTime: 0,
             seekbarPadding: 2,
+            error: 0,
         };
     },
     computed: {
@@ -517,7 +523,9 @@ export default {
                 quality > 0 && (this.video.audioStreams.length > 0 || this.video.livestream) && !disableVideo;
             if (qualityConds) this.$player.configure("abr.enabled", false);
 
-            player.load(uri, 0, mime).then(() => {
+            player
+                .load(uri, 0, mime)
+                .then(() => {
                     const isSafari = window.navigator?.vendor?.includes("Apple");
 
                     if (!isSafari) {
@@ -583,6 +591,10 @@ export default {
 
                     const autoDisplayCaptions = this.getPreferenceBoolean("autoDisplayCaptions", false);
                     this.$player.setTextTrackVisibility(autoDisplayCaptions);
+                })
+                .catch(e => {
+                    console.error(e);
+                    this.error = e.code;
                 });
 
             // expand the player to fullscreen when the fullscreen query equals true

src/locales/en.json

@@ -18,7 +18,8 @@
         "dearrow": "DeArrow"
     },
     "player": {
-        "watch_on": "Watch on {0}"
+        "watch_on": "Watch on {0}",
+        "failed": "Failed with error code {0}, refer logs for more info"
     },
     "actions": {
         "subscribe": "Subscribe - {count}",