Skip to content

Commit

Permalink
feat(vgMedia): Now we can create our custom media elements
Browse files Browse the repository at this point in the history 
Now we can create our custom media elements, so this allows us to play anything that has a begin and
an end.

BREAKING CHANGE: Now `vgMedia` expects a view reference as param. Created a new property for
`vgMaster`.

Before: `<video vgMedia="master">`

After: `<video #myMedia [vgMedia]="myMedia"
[vgMaster]="true">`
  • Loading branch information
@Elecash
Elecash committed Mar 18, 2017
1 parent d28461f commit 86ff6bc
Show file tree
Hide file tree
Showing 9 changed files with 48 additions and 38 deletions.
2 changes: 1 addition & 1 deletion docs/getting-started.md
View file
Expand Up @@ -107,7 +107,7 @@ Create your video player with HTML in your template:
<vg-fullscreen></vg-fullscreen>
</vg-controls>

<video vgMedia #media id="singleVideo" preload="auto" crossorigin>
<video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin>
<source *ngFor="let video of sources" [src]="video.src" [type]="video.type">
<track kind="subtitles" label="English" src="http://static.videogular.com/assets/subs/pale-blue-dot.vtt" srclang="en" default>
<track kind="subtitles" label="Español" src="http://static.videogular.com/assets/subs/pale-blue-dot-es.vtt" srclang="es">
Expand Down
4 changes: 2 additions & 2 deletions docs/how-it-works.md
View file
Expand Up @@ -16,7 +16,7 @@ For example, this is the most basic video player that you can create with Videog

```html
<vg-player>
<video vgMedia id="singleVideo" preload="auto" controls>
<video [vgMedia]="media" #media id="singleVideo" preload="auto" controls>
<source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
</video>
</vg-player>
Expand Down Expand Up @@ -52,7 +52,7 @@ Let's go to add an overlay play and a custom control bar.
<vg-fullscreen></vg-fullscreen>
</vg-controls>

<video vgMedia id="singleVideo" preload="auto">
<video [vgMedia]="media" #media id="singleVideo" preload="auto">
<source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
</video>
</vg-player>
Expand Down
8 changes: 4 additions & 4 deletions docs/master-media.md
View file
Expand Up @@ -32,11 +32,11 @@ In this example we have two videos and `masterVideo` is the master video because
<vg-fullscreen></vg-fullscreen>
</vg-controls>

<video vgMedia="master" id="masterVideo" preload="auto">
<video [vgMedia]="master" #master [vgMaster]="true" id="masterVideo" preload="auto">
<source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
</video>

<video vgMedia id="slaveVideo" preload="auto">
<video [vgMedia]="slave" #slave id="slaveVideo" preload="auto">
<source src="http://static.videogular.com/assets/videos/vr-demo.mp4" type="video/mp4">
</video>
</vg-player>
Expand Down Expand Up @@ -73,7 +73,7 @@ Now you can add `vgFor="video-id"` to decide which `vgMedia` target when a user
<vg-fullscreen vgFor="leftVideo"></vg-fullscreen>
</vg-controls>

<video vgMedia id="leftVideo" preload="auto">
<video [vgMedia]="left" #left id="leftVideo" preload="auto">
<source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
</video>
</div>
Expand All @@ -94,7 +94,7 @@ Now you can add `vgFor="video-id"` to decide which `vgMedia` target when a user
<vg-fullscreen vgFor="rightVideo"></vg-fullscreen>
</vg-controls>

<video vgMedia id="rightVideo" preload="auto">
<video [vgMedia]="right" #right id="rightVideo" preload="auto">
<source src="http://static.videogular.com/assets/videos/vr-demo.mp4" type="video/mp4">
</video>
</div>
Expand Down
2 changes: 1 addition & 1 deletion docs/using-the-api.md
View file
Expand Up @@ -34,7 +34,7 @@ To start using the API first you need to grab it from the player. To do that lis
<vg-fullscreen></vg-fullscreen>
</vg-controls>

<video vgMedia #media id="singleVideo" preload="auto" crossorigin>
<video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin>
<source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
</video>
</vg-player>
Expand Down
2 changes: 1 addition & 1 deletion docs/vg-cue-points/vg-cue-points.md
View file
Expand Up @@ -19,7 +19,7 @@ VgCuePoints will add `cues` property to the track element with all the `VTTCue`

```html
<vg-player>
<video id="vid" preload="auto">
<video #media [vgMedia]="media" id="vid" preload="auto">
<source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">

<track src="../data/cue-points.vtt" kind="metadata" label="Cue Points" default
Expand Down
4 changes: 2 additions & 2 deletions docs/vg-player/vg-player.md
View file
Expand Up @@ -6,7 +6,7 @@ currentMenu: vg-player/vg-player

Main component responsible of the creation of the API. This should be your root component and all videogular components must be placed inside this component.

To create VgAPI, videogular needs that each `vgMedia` directive haves an `id` to build an internal map with all media objects.
To create VgAPI, videogular needs that each `vgMedia` directive has an `id` to build an internal map with all media objects.

## Outputs

Expand All @@ -18,6 +18,6 @@ To create VgAPI, videogular needs that each `vgMedia` directive haves an `id` to

```html
<vg-player (onPlayerReady)="onPlayerReady($event)">
<video vgMedia id="my-video" src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
<video #myMedia [vgMedia]="myMedia" id="my-video" src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
</vg-player>
```
5 changes: 4 additions & 1 deletion src/controls/vg-controls.ts
View file
Expand Up @@ -112,7 +112,10 @@ export class VgControls implements OnInit, AfterViewInit {
clearTimeout(this.timer);
this.hideControls = false;
this.hidden.state(false);
this.hideAsync();

if (this.vgAutohide) {
this.hideAsync();
}
}

private hideAsync() {
Expand Down
5 changes: 3 additions & 2 deletions src/core/vg-media/vg-media.spec.ts
View file
Expand Up @@ -33,7 +33,8 @@ describe('Videogular Media', () => {
};

api = new VgAPI();
media = new VgMedia(ref, api);
media = new VgMedia(api);
media.vgMedia = elem;
});

xit('Should load a new media if a change on dom have been happened', () => {
Expand All @@ -54,7 +55,7 @@ describe('Videogular Media', () => {
});

it('Should not be master by default', () => {
expect(media.vgMedia).toBeFalsy();
expect(media.vgMaster).toBeFalsy();
});

it('Should have a play method', () => {
Expand Down
54 changes: 30 additions & 24 deletions src/core/vg-media/vg-media.ts
View file
Expand Up @@ -17,7 +17,8 @@ import 'rxjs/add/observable/combineLatest';
export class VgMedia implements OnInit, OnDestroy, IPlayable {
elem: any;

@Input() vgMedia: string;
@Input() vgMedia: any;
@Input() vgMaster: boolean;

state: string = VgStates.VG_PAUSED;

Expand Down Expand Up @@ -59,13 +60,19 @@ export class VgMedia implements OnInit, OnDestroy, IPlayable {
volumeChangeObs: Subscription;
errorObs: Subscription;

isMaster: boolean;
constructor(private api: VgAPI) {

constructor(ref: ElementRef, private api: VgAPI) {
this.elem = ref.nativeElement;
}

ngOnInit() {
if (this.vgMedia.nodeName) {
// It's a native element
this.elem = this.vgMedia;
} else {
// It's an Angular Class
this.elem = this.vgMedia.elem;
}

this.subscriptions = {
// Native events
abort: Observable.fromEvent(<any>this.elem, VgEvents.VG_ABORT),
Expand Down Expand Up @@ -99,6 +106,7 @@ export class VgMedia implements OnInit, OnDestroy, IPlayable {
// See changes on <source> child elements to reload the video file
mutation: Observable.create(
(observer: any) => {

let domObs = new MutationObserver((mutations) => {
observer.next(mutations);
});
Expand Down Expand Up @@ -137,9 +145,7 @@ export class VgMedia implements OnInit, OnDestroy, IPlayable {
this.volumeChangeObs = this.subscriptions.volumeChange.subscribe(this.onVolumeChange.bind(this));
this.errorObs = this.subscriptions.error.subscribe(this.onError.bind(this));

this.isMaster = (this.vgMedia === 'master');

if (this.isMaster) {
if (this.vgMaster) {
this.api.playerReadyEvent.subscribe(
() => {
this.prepareSync();
Expand Down Expand Up @@ -197,56 +203,56 @@ export class VgMedia implements OnInit, OnDestroy, IPlayable {
}

onMutation(mutations: any) {
this.elem.pause();
this.elem.currentTime = 0;
this.vgMedia.pause();
this.vgMedia.currentTime = 0;

// TODO: This is ugly, we should find something cleaner
setTimeout(() => this.elem.load(), 1);
setTimeout(() => this.vgMedia.load(), 1);
}

play() {
this.elem.play();
this.vgMedia.play();
}

pause() {
this.elem.pause();
this.vgMedia.pause();
}

get id() {
return this.elem.id;
return this.vgMedia.id;
}

get duration() {
return this.elem.duration;
return this.vgMedia.duration;
}

set currentTime(seconds) {
this.elem.currentTime = seconds;
this.vgMedia.currentTime = seconds;
// this.elem.dispatchEvent(new CustomEvent(VgEvents.VG_SEEK));
}

get currentTime() {
return this.elem.currentTime;
return this.vgMedia.currentTime;
}

set volume(volume) {
this.elem.volume = volume;
this.vgMedia.volume = volume;
}

get volume() {
return this.elem.volume;
return this.vgMedia.volume;
}

set playbackRate(rate) {
this.elem.playbackRate = rate;
this.vgMedia.playbackRate = rate;
}

get playbackRate() {
return this.elem.playbackRate;
return this.vgMedia.playbackRate;
}

get buffered() {
return this.elem.buffered;
return this.vgMedia.buffered;
}

onCanPlay(event: any) {
Expand Down Expand Up @@ -287,7 +293,7 @@ export class VgMedia implements OnInit, OnDestroy, IPlayable {
onPlay(event: any) {
this.state = VgStates.VG_PLAYING;

if (this.isMaster) {
if (this.vgMaster) {
if (!this.syncSubscription || this.syncSubscription.closed) {
this.startSync();
}
Expand All @@ -301,7 +307,7 @@ export class VgMedia implements OnInit, OnDestroy, IPlayable {
onPause(event: any) {
this.state = VgStates.VG_PAUSED;

if (this.isMaster) {
if (this.vgMaster) {
if (!this.playAtferSync) {
this.syncSubscription.unsubscribe();
}
Expand Down Expand Up @@ -386,7 +392,7 @@ export class VgMedia implements OnInit, OnDestroy, IPlayable {
}

ngOnDestroy() {
this.elem.src = '';
this.vgMedia.src = '';
this.mutationObs.unsubscribe();
this.canPlayObs.unsubscribe();
this.canPlayThroughObs.unsubscribe();
Expand Down

0 comments on commit 86ff6bc

Please sign in to comment.