Resize iframe

src/app/component/viewer/viewer.component.html

@@ -19,6 +19,8 @@
             [search]="lensSearch"></app-lens>
   <div *ngIf="currentTags.includes('plugin/embed')"
        class="embed-container"
+       [appResizeHandle]="true"
+       [child]="iframe"
        [class.twitter]="twitter">
     <app-loading *ngIf="!embedReady"></app-loading>
     <iframe #iframe

src/app/directive/resize-handle.directive.ts

@@ -13,6 +13,12 @@ export class ResizeHandleDirective {
   @Input()
   hitArea = 24;
 
+  @Input()
+  appResizeHandle?: boolean | string = true;
+
+  @Input()
+  child?: HTMLElement;
+
   dragging = false;
   x = 0;
   y = 0;
@@ -29,6 +35,10 @@ export class ResizeHandleDirective {
     return this.config.mobile ? 'row-resize' : 'se-resize';
   }
 
+  get enabled() {
+    return this.dragging !== false;
+  }
+
   @HostListener('pointerdown', ['$event'])
   onPointerDown(event: PointerEvent) {
     if (event.button) return;
@@ -51,8 +61,8 @@ export class ResizeHandleDirective {
       this.zone.run(() => {
         const dx = event.clientX - this.x;
         const dy = event.clientY - this.y;
-        this.el.nativeElement.style.width = (this.width + dx) + 'px';
-        this.el.nativeElement.style.height = (this.height + dy) + 'px';
+        this.setWidth(this.el.nativeElement.style.width = (this.width + dx) + 'px');
+        this.setHeight(this.el.nativeElement.style.height = (this.height + dy) + 'px');
         event.preventDefault();
         event.stopPropagation();
         event.stopImmediatePropagation();
@@ -79,4 +89,14 @@ export class ResizeHandleDirective {
     return x + y < this.hitArea;
   }
 
+  private setWidth(width: string) {
+    this.el.nativeElement.style.width = width;
+    if (this.child) this.child.style.width = width;
+  }
+
+  private setHeight(height: string) {
+    this.el.nativeElement.style.height = height;
+    if (this.child) this.child.style.height = height;
+  }
+
 }

src/app/mods/embed.ts

@@ -47,12 +47,19 @@ export const embedPlugin: Plugin = {
           min: 'Height must be at least 200px.'
         }
       }
+    }, {
+      key: 'resize',
+      type: 'boolean',
+      props: {
+        label: $localize`Resizeable:`
+      }
     }],
   },
   defaults: {},
   schema: {
     optionalProperties: {
       url: { type: 'string' },
+      resize: { type: 'boolean' },
       width: { type: 'int32', nullable: true },
       height: { type: 'int32', nullable: true },
     },