update: observe container resize

tsukumijima · Jan 2, 2023 · 4b12f56 · 4b12f56
1 parent 6ebc025
commit 4b12f56
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/src/css/player.scss b/src/css/player.scss
@@ -94,7 +94,7 @@
         }
     }
 
-    &.dplayer-arrow {
+    &.dplayer-narrow {
         .dplayer-danmaku {
             font-size: 18px;
         }

diff --git a/src/js/player.js b/src/js/player.js
@@ -57,11 +57,26 @@ class DPlayer {
         if (utils.isMobile) {
             this.container.classList.add('dplayer-mobile');
         }
-        this.arrow = this.container.offsetWidth <= 500;
-        if (this.arrow) {
-            this.container.classList.add('dplayer-arrow');
+        this.narrow = this.container.offsetWidth <= 500;
+        if (this.narrow) {
+            this.container.classList.add('dplayer-narrow');
         }
 
+        // observe container resize
+        this.resizeObserver = new ResizeObserver((entries) => {
+            for (const entry of entries) {
+                if (entry.target === this.container) {
+                    this.narrow = this.container.offsetWidth <= 500;
+                    if (this.narrow) {
+                        this.container.classList.add('dplayer-narrow');
+                    } else {
+                        this.container.classList.remove('dplayer-narrow');
+                    }
+                }
+            }
+        });
+        this.resizeObserver.observe(this.container);
+
         this.template = new Template({
             container: this.container,
             options: this.options,
@@ -1002,6 +1017,7 @@ class DPlayer {
         this.video.src = '';
         this.container.innerHTML = '';
         this.events.trigger('destroy');
+        this.resizeObserver.disconnect();
     }
 
     static get version() {