vime icon indicating copy to clipboard operation
vime copied to clipboard

Suggestions for simpler use with Angular

Open jbjhjm opened this issue 3 years ago • 0 comments

Hi, just wanted to let you know about this, think Angular works well without using the adapter. That's because it can be set up to work with native web components beautifully. This will make it easy to use Vime+Angular and makes the whole adapter irrelevant.

A small mock of what the setup looks like:

// import everything you need for webpack bundling
import { defineCustomElements } from '@vime/core';
defineCustomElements();

@Component({
	selector: 'vime-wrapper',
	template: `
                        <!-- here we can use the core vime web components! -->
                        <!-- note the #player attribute, we use this to access API using @ViewChild('player') -->
			<vm-player *ngIf="url" playsinline class="vime-element" #player >
				<vm-video cross-origin="true" [poster]="posterUrl" >
					<source [src]="url" type="video/mp4" />
				</vm-video>
				<vm-default-ui></vm-default-ui>
			</vm-player>
	`,
})
export class VimePlayerComponent implements AfterViewInit, OnDestroy {
	@Input() public url: string;

        // we can use #player to get a reference of the HTMLVmPlayerElement for full API use
	@ViewChild('player') protected nativePlayer: ElementRef<HTMLVmPlayerElement>;

	async ngAfterViewInit() {
		// here we can use the reference to subscribe to events manually
		const player = this.nativePlayer.nativeElement;
		player.addEventListener('vmPlaybackReady', ()=>{...})
	}
}

@NgModule({
	imports: [
		CommonModule,
		// VimeModule -- no vime module import, we can skip this!
	],
	schemas:[CUSTOM_ELEMENTS_SCHEMA], // allow VimePlayerComponent to use custom web components
	declarations:[VimePlayerComponent],
	exports: [VimePlayerComponent],
  })
  export class VideoPlayerModule {}

jbjhjm avatar Jun 28 '21 10:06 jbjhjm