From c94f34c77621b99ff58551b1440d80d0d39df69a Mon Sep 17 00:00:00 2001
From: WakelessSloth56 <wsloth56@foxmail.com>
Date: Wed, 13 Mar 2024 23:07:25 +0800
Subject: [PATCH] fix(player): auto focus player when video canplay

Co-authored-by: lainio24 <lainio24@outlook.com>
---
 src/player.main.ts | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/player.main.ts b/src/player.main.ts
index 5f4fd51..723ec92 100644
--- a/src/player.main.ts
+++ b/src/player.main.ts
@@ -62,7 +62,9 @@ class Player {
             this.options.fullscreen ? this.requestFullscreen() : this.setContainerData('fullscreen', false);
         }
         this.#constructed = true;
-        if (this.options.autoPlay) this.toast('Autoplay');
+        if (this.options.autoPlay) {
+            this.toast('Autoplay');
+        }
         this.focus();
     }
 
@@ -77,6 +79,7 @@ class Player {
             this.setContainerData('paused', this.video.paused);
             this.#overHour = this.video.duration >= 60 * 60;
         });
+        this.onVideoEvent('canplay', () => this.focus());
         this.onVideoEvent('play', () => this.setContainerData('paused', this.video.paused));
         this.onVideoEvent('pause', () => this.setContainerData('paused', this.video.paused));
         this.onVideoEvent('volumechange', () => this.setContainerData('muted', this.video.muted));
@@ -85,18 +88,16 @@ class Player {
             this.setContainerData('fullscreen', fullscreen ? true : false);
             this.firePlayerEvent(fullscreen ? 'fullscreen' : 'fullscreenexit');
         });
-        {
-            new ResizeObserver(() => {
-                this.video.dispatchEvent(
-                    new CustomEvent('resize', {
-                        detail: {
-                            width: this.video.offsetWidth,
-                            height: this.video.offsetHeight,
-                        },
-                    })
-                );
-            }).observe(this.video);
-        }
+        new ResizeObserver(() => {
+            this.video.dispatchEvent(
+                new CustomEvent('resize', {
+                    detail: {
+                        width: this.video.offsetWidth,
+                        height: this.video.offsetHeight,
+                    },
+                })
+            );
+        }).observe(this.video);
         bindMetaEvent(this.container, this.#metadata.playerEvent, this);
         bindMetaEvent(this.video, this.#metadata.videoEvent, this, this.video);
     }