vime
vime copied to clipboard
Suggestions for simpler use with Angular
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 {}