Skip to content

Commit a394dd6

Browse files
TechassiTechassi
committed
Add d.ts files, change TS rollup plugin
1 parent 92110d9 commit a394dd6

12 files changed

+996
-78
lines changed

‎lib/types/helper.d.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
/// <reference types="youtube" />
2+
/**
3+
* seekIfAutoplay seeks to the provided timestamp if autoplay is enabled
4+
* @param player The player instance
5+
* @param playerVars The player vars
6+
*/
7+
export declare function seekIfAutoplay(player: YT.Player, playerVars: YT.PlayerVars): void;

‎lib/types/index.d.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { App } from 'vue';
2+
import YouTubePlayer from './player';
3+
declare const plugin: {
4+
install: (app: App) => void;
5+
};
6+
export { YouTubePlayer };
7+
export default plugin;

‎lib/types/manager.d.ts‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
/// <reference types="youtube" />
2+
export declare type ManagerCallbackFunction = (factory: object, uid: string) => void;
3+
export interface Manager {
4+
factory: object | undefined;
5+
players: Array<ManagerCallbackFunction>;
6+
events: Record<string, string>;
7+
uid: number;
8+
/**
9+
* registerFactory registers the player factory
10+
* @param factory The underlying YT factory (usually window.YT)
11+
*/
12+
registerFactory(factory: YT.Player): void;
13+
/**
14+
* registerEvents registers all player state events
15+
*/
16+
registerEvents(): void;
17+
/**
18+
* register registers a new player via the manager
19+
* @param callback the callback function executed when the player gets loaded into the component
20+
*/
21+
register(callback: ManagerCallbackFunction): void;
22+
/**
23+
* runBacklog iterates over registered players, which were unable to initiate because the YouTube API script wasn't
24+
* ready yet
25+
*/
26+
runBacklog(): void;
27+
}
28+
export declare function createManager(): Manager;
29+
export declare const manager: Manager;

‎lib/types/player.d.ts‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/// <reference types="youtube" />
2+
declare const player: import("vue").DefineComponent<{
3+
playerWidth: {
4+
type: (StringConstructor | NumberConstructor)[];
5+
default: string;
6+
};
7+
playerHeight: {
8+
type: (StringConstructor | NumberConstructor)[];
9+
default: string;
10+
};
11+
playerParameters: {
12+
type: ObjectConstructor;
13+
default: () => {
14+
autoplay: number;
15+
time: number;
16+
mute: number;
17+
};
18+
};
19+
videoId: {
20+
type: StringConstructor;
21+
default: string;
22+
};
23+
noCookie: {
24+
type: BooleanConstructor;
25+
default: boolean;
26+
};
27+
}, unknown, {
28+
elementId: string;
29+
player: YT.Player;
30+
}, {}, {
31+
cueVideoById(videoId: string, startSeconds?: number | undefined, suggestedQuality?: "default" | "small" | "medium" | "large" | "hd720" | "hd1080" | "highres" | undefined): void;
32+
loadVideoById(videoId: string, startSeconds?: number | undefined, suggestedQuality?: "default" | "small" | "medium" | "large" | "hd720" | "hd1080" | "highres" | undefined): void;
33+
cueVideoByUrl(mediaContentUrl: string, startSeconds?: number | undefined, suggestedQuality?: "default" | "small" | "medium" | "large" | "hd720" | "hd1080" | "highres" | undefined): void;
34+
loadVideoByUrl(mediaContentUrl: string, startSeconds?: number | undefined, suggestedQuality?: "default" | "small" | "medium" | "large" | "hd720" | "hd1080" | "highres" | undefined): void;
35+
cuePlaylist(playlist: string | string[], index?: number | undefined, startSeconds?: number | undefined, suggestedQuality?: "default" | "small" | "medium" | "large" | "hd720" | "hd1080" | "highres" | undefined): void;
36+
loadPlaylist(playlist: string | string[], index?: number | undefined, startSeconds?: number | undefined, suggestedQuality?: "default" | "small" | "medium" | "large" | "hd720" | "hd1080" | "highres" | undefined): void;
37+
playVideo(): void;
38+
pauseVideo(): void;
39+
stopVideo(): void;
40+
seekTo(seconds: number, allowSeekAhead: boolean): void;
41+
nextVideo(): void;
42+
previousVideo(): void;
43+
playVideoAt(index: number): void;
44+
mute(): void;
45+
unMute(): void;
46+
isMuted(): boolean;
47+
setVolume(volume: number): void;
48+
getVolume(): number;
49+
setSize(width: number, height: number): void;
50+
getPlaybackRate(): number;
51+
setPlaybackRate(suggestedRate: number): void;
52+
getAvailablePlaybackRates(): number[];
53+
setLoop(loopPlaylists: boolean): void;
54+
setShuffle(shufflePlaylist: boolean): void;
55+
getVideoLoadedFraction(): number;
56+
getPlayerState(): YT.PlayerState;
57+
getCurrentTime(): number;
58+
getPlaybackQuality(): YT.SuggestedVideoQuality;
59+
setPlaybackQuality(suggestedQuality: YT.SuggestedVideoQuality): void;
60+
getAvailableQualityLevels(): YT.SuggestedVideoQuality[];
61+
getDuration(): number;
62+
getVideoUrl(): string;
63+
getVideoEmbedCode(): string;
64+
getPlaylist(): string[];
65+
getPlaylistIndex(): number;
66+
getIframe(): HTMLIFrameElement;
67+
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
68+
playerWidth: string | number;
69+
playerHeight: string | number;
70+
playerParameters: Record<string, any>;
71+
videoId: string;
72+
noCookie: boolean;
73+
} & {}>, {
74+
playerWidth: string | number;
75+
playerHeight: string | number;
76+
playerParameters: Record<string, any>;
77+
videoId: string;
78+
noCookie: boolean;
79+
}>;
80+
export declare function createPlayer(factory: any, id: string, options: YT.PlayerOptions): YT.Player;
81+
export default player;

‎lib/vue-youtube-iframe.cjs.js‎

Lines changed: 128 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,13 @@ function createManager() {
4545
}
4646
const manager = createManager();
4747

48-
function skipIfAutoplay(player, playerVars) {
49-
if (playerVars.autoplay != undefined &&
50-
playerVars.autoplay == YT.AutoPlay.AutoPlay) {
48+
/**
49+
* seekIfAutoplay seeks to the provided timestamp if autoplay is enabled
50+
* @param player The player instance
51+
* @param playerVars The player vars
52+
*/
53+
function seekIfAutoplay(player, playerVars) {
54+
if (playerVars.autoplay != undefined && playerVars.autoplay == YT.AutoPlay.AutoPlay) {
5155
player.mute();
5256
if (playerVars.start != undefined && playerVars.start != 0) {
5357
player.seekTo(playerVars.start, true);
@@ -58,7 +62,7 @@ function skipIfAutoplay(player, playerVars) {
5862
}
5963
}
6064

61-
const player = {
65+
const player = vue.defineComponent({
6266
name: 'YoutubeIframe',
6367
props: {
6468
playerWidth: {
@@ -96,23 +100,131 @@ const player = {
96100
return vue.h('div', [vue.h('div', { id: this.elementId })]);
97101
},
98102
template: '<div><div :id="elementId"></div></div>',
103+
methods: {
104+
cueVideoById(videoId, startSeconds, suggestedQuality) {
105+
this.player.cueVideoById(videoId, startSeconds, suggestedQuality);
106+
},
107+
loadVideoById(videoId, startSeconds, suggestedQuality) {
108+
this.player.loadVideoById(videoId, startSeconds, suggestedQuality);
109+
},
110+
cueVideoByUrl(mediaContentUrl, startSeconds, suggestedQuality) {
111+
this.player.cueVideoByUrl(mediaContentUrl, startSeconds, suggestedQuality);
112+
},
113+
loadVideoByUrl(mediaContentUrl, startSeconds, suggestedQuality) {
114+
this.player.loadVideoByUrl(mediaContentUrl, startSeconds, suggestedQuality);
115+
},
116+
cuePlaylist(playlist, index, startSeconds, suggestedQuality) {
117+
this.player.cuePlaylist(playlist, index, startSeconds, suggestedQuality);
118+
},
119+
loadPlaylist(playlist, index, startSeconds, suggestedQuality) {
120+
this.player.loadPlaylist(playlist, index, startSeconds, suggestedQuality);
121+
},
122+
playVideo() {
123+
this.player.playVideo();
124+
},
125+
pauseVideo() {
126+
this.player.pauseVideo();
127+
},
128+
stopVideo() {
129+
this.player.stopVideo();
130+
},
131+
seekTo(seconds, allowSeekAhead) {
132+
this.player.seekTo(seconds, allowSeekAhead);
133+
},
134+
nextVideo() {
135+
this.player.nextVideo();
136+
},
137+
previousVideo() {
138+
this.player.previousVideo();
139+
},
140+
playVideoAt(index) {
141+
this.player.playVideoAt(index);
142+
},
143+
mute() {
144+
this.player.mute();
145+
},
146+
unMute() {
147+
this.player.unMute();
148+
},
149+
isMuted() {
150+
return this.player.isMuted();
151+
},
152+
setVolume(volume) {
153+
this.player.setVolume(volume);
154+
},
155+
getVolume() {
156+
return this.player.getVolume();
157+
},
158+
setSize(width, height) {
159+
this.player.setSize(width, height);
160+
},
161+
getPlaybackRate() {
162+
return this.player.getPlaybackRate();
163+
},
164+
setPlaybackRate(suggestedRate) {
165+
this.player.setPlaybackRate(suggestedRate);
166+
},
167+
getAvailablePlaybackRates() {
168+
return this.player.getAvailablePlaybackRates();
169+
},
170+
setLoop(loopPlaylists) {
171+
this.player.setLoop(loopPlaylists);
172+
},
173+
setShuffle(shufflePlaylist) {
174+
this.player.setShuffle(shufflePlaylist);
175+
},
176+
getVideoLoadedFraction() {
177+
return this.player.getVideoLoadedFraction();
178+
},
179+
getPlayerState() {
180+
return this.player.getPlayerState();
181+
},
182+
getCurrentTime() {
183+
return this.player.getCurrentTime();
184+
},
185+
getPlaybackQuality() {
186+
return this.player.getPlaybackQuality();
187+
},
188+
setPlaybackQuality(suggestedQuality) {
189+
this.player.setPlaybackQuality(suggestedQuality);
190+
},
191+
getAvailableQualityLevels() {
192+
return this.player.getAvailableQualityLevels();
193+
},
194+
getDuration() {
195+
return this.player.getDuration();
196+
},
197+
getVideoUrl() {
198+
return this.player.getVideoUrl();
199+
},
200+
getVideoEmbedCode() {
201+
return this.player.getVideoEmbedCode();
202+
},
203+
getPlaylist() {
204+
return this.player.getPlaylist();
205+
},
206+
getPlaylistIndex() {
207+
return this.player.getPlaylistIndex();
208+
},
209+
getIframe() {
210+
return this.player.getIframe();
211+
},
212+
},
99213
mounted() {
100214
const { playerHeight, playerWidth, playerParameters, videoId } = this;
101215
manager.register((factory, uid) => {
102-
const host = this.noCookie
103-
? 'https://www.youtube-nocookie.com'
104-
: 'https://www.youtube.com';
216+
const host = this.noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';
105217
this.elementId = uid;
106218
vue.nextTick().then(() => {
107-
this.player = new factory.Player(this.elementId, {
219+
this.player = createPlayer(factory, this.elementId, {
108220
width: playerWidth,
109221
height: playerHeight,
110222
...playerParameters,
111223
videoId,
112224
host,
113225
events: {
114226
onReady: (event) => {
115-
skipIfAutoplay(event.target, playerParameters);
227+
seekIfAutoplay(event.target, playerParameters);
116228
this.$emit('ready', event);
117229
},
118230
onStateChange: (event) => {
@@ -128,7 +240,13 @@ const player = {
128240
});
129241
});
130242
},
131-
};
243+
unmounted() {
244+
this.player.destroy();
245+
},
246+
});
247+
function createPlayer(factory, id, options) {
248+
return new factory.Player(id, options);
249+
}
132250

133251
const plugin = {
134252
install: (app) => {

0 commit comments

Comments
 (0)