fix: fix app-plyr useCustomControls when room.isWriteable:false can't sync

Author: hqer927

packages/app-plyr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netless/app-plyr",
-  "version": "0.2.6",
+  "version": "0.2.7",
   "description": "Netless App Media Player, based on plyr.io.",
   "repository": "netless-io/netless-app",
   "license": "MIT",

packages/app-plyr/src/controller.ts

@@ -949,6 +949,9 @@ export class CustomPlyrControls {
   }
 
   private syncPlay = () => {
+    if (!this.controller.context.getIsWritable()) {
+      return;
+    }
     if (this.PlayButton.classList.contains("playing")) {
       this.controller.pause();
     } else {
@@ -970,10 +973,16 @@ export class CustomPlyrControls {
    * @param seekTime 播放进度, 单位秒
    */
   private syncSeek = (seekTime: number) => {
+    if (!this.controller.context.getIsWritable()) {
+      return;
+    }
     this.controller.seekTime(seekTime);
   };
 
   private eventSeek = (e: PointerEvent) => {
+    if (!this.controller.context.getIsWritable()) {
+      return;
+    }
     const offsetX = e.offsetX;
     const width = this.ProgressSliderContainer.offsetWidth;
     const progress = offsetX / width;
@@ -997,6 +1006,9 @@ export class CustomPlyrControls {
     if (e.cancelable) {
       e.preventDefault();
     }
+    if (!this.controller.context.getIsWritable()) {
+      return;
+    }
     this._isDraggingProgress = true;
     const offsetX = e.offsetX + this.ProgressSliderButton.offsetLeft;
     this.dragStartX = [e.clientX, offsetX];
@@ -1009,6 +1021,9 @@ export class CustomPlyrControls {
     if (e.cancelable) {
       e.preventDefault();
     }
+    if (!this.controller.context.getIsWritable()) {
+      return;
+    }
     if (!this.dragStartX) {
       return;
     }
@@ -1029,6 +1044,9 @@ export class CustomPlyrControls {
     if (e.cancelable) {
       e.preventDefault();
     }
+    if (!this.controller.context.getIsWritable()) {
+      return;
+    }
     if (!this.dragStartX) {
       return;
     }