Skip to content

Commit 62908d3

Browse files
TechassiTechassi
committed
Rewrite in TS, add first batch of typings
1 parent edb063c commit 62908d3

19 files changed

+3985
-2123
lines changed

‎.eslintignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
node_modules
2+
lib

‎.eslintrc.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
module.exports = {
2+
root: true,
3+
env: {
4+
browser: true,
5+
es2021: true,
6+
node: true,
7+
},
8+
extends: [
9+
'plugin:vue/vue3-essential',
10+
'eslint:recommended',
11+
'@vue/typescript/recommended',
12+
'@vue/prettier',
13+
'@vue/prettier/@typescript-eslint',
14+
],
15+
parserOptions: {
16+
ecmaVersion: 2020,
17+
sourceType: 'module',
18+
},
19+
plugins: ['vue', 'prettier'],
20+
rules: {
21+
'prettier/prettier': 'error',
22+
quotes: ['error', 'single'],
23+
indent: ['error', 4],
24+
},
25+
};

‎.eslintrc.json‎

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎.prettierrc‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,5 +2,6 @@
22
"trailingComma": "es5",
33
"tabWidth": 4,
44
"semi": true,
5-
"singleQuote": true
5+
"singleQuote": true,
6+
"printWidth": 120
67
}

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

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
// Copyright (c) 2020-present Techassi
2+
// Use of this source code is governed by a MIT-style
3+
// license that can be found in the LICENSE file.
4+
// vue-youtube-iframe 1.0.3
5+
'use strict';
6+
7+
Object.defineProperty(exports, '__esModule', { value: true });
8+
9+
var vue = require('vue');
10+
11+
function createManager() {
12+
return {
13+
factory: undefined,
14+
players: [],
15+
events: {},
16+
uid: 0,
17+
registerFactory(factory) {
18+
this.factory = factory;
19+
},
20+
registerEvents() {
21+
this.events[YT.PlayerState.ENDED] = 'ended';
22+
this.events[YT.PlayerState.PLAYING] = 'playing';
23+
this.events[YT.PlayerState.PAUSED] = 'paused';
24+
this.events[YT.PlayerState.BUFFERING] = 'buffering';
25+
this.events[YT.PlayerState.CUED] = 'cued';
26+
},
27+
register(callback) {
28+
this.uid++;
29+
if (this.factory != undefined) {
30+
callback(this.factory, `vue-youtube-iframe-${this.uid}`);
31+
return;
32+
}
33+
this.players.push(callback);
34+
},
35+
runBacklog() {
36+
this.players.forEach((callback) => {
37+
if (this.factory != undefined) {
38+
this.uid++;
39+
callback(this.factory, `vue-youtube-iframe-${this.uid}`);
40+
}
41+
this.players = [];
42+
});
43+
},
44+
};
45+
}
46+
const manager = createManager();
47+
48+
function skipIfAutoplay(player, playerVars) {
49+
if (playerVars.autoplay != undefined &&
50+
playerVars.autoplay == YT.AutoPlay.AutoPlay) {
51+
player.mute();
52+
if (playerVars.start != undefined && playerVars.start != 0) {
53+
player.seekTo(playerVars.start, true);
54+
}
55+
else {
56+
player.playVideo();
57+
}
58+
}
59+
}
60+
61+
const player = {
62+
name: 'YoutubeIframe',
63+
props: {
64+
playerWidth: {
65+
type: [String, Number],
66+
default: '1280',
67+
},
68+
playerHeight: {
69+
type: [String, Number],
70+
default: '720',
71+
},
72+
playerParameters: {
73+
type: Object,
74+
default: () => ({
75+
autoplay: 0,
76+
time: 0,
77+
mute: 0,
78+
}),
79+
},
80+
videoId: {
81+
type: String,
82+
default: '',
83+
},
84+
noCookie: {
85+
type: Boolean,
86+
default: false,
87+
},
88+
},
89+
data() {
90+
return {
91+
elementId: '',
92+
player: {},
93+
};
94+
},
95+
render() {
96+
return vue.h('div', [vue.h('div', { id: this.elementId })]);
97+
},
98+
template: '<div><div :id="elementId"></div></div>',
99+
mounted() {
100+
const { playerHeight, playerWidth, playerParameters, videoId } = this;
101+
manager.register((factory, uid) => {
102+
const host = this.noCookie
103+
? 'https://www.youtube-nocookie.com'
104+
: 'https://www.youtube.com';
105+
this.elementId = uid;
106+
vue.nextTick().then(() => {
107+
this.player = new factory.Player(this.elementId, {
108+
width: playerWidth,
109+
height: playerHeight,
110+
...playerParameters,
111+
videoId,
112+
host,
113+
events: {
114+
onReady: (event) => {
115+
skipIfAutoplay(event.target, playerParameters);
116+
this.$emit('ready', event);
117+
},
118+
onStateChange: (event) => {
119+
if (event.data !== -1) {
120+
this.$emit(manager.events[event.data], event);
121+
}
122+
},
123+
onError: (event) => {
124+
this.$emit('error', event);
125+
},
126+
},
127+
});
128+
});
129+
});
130+
},
131+
};
132+
133+
const plugin = {
134+
install: (app) => {
135+
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
136+
const tag = document.createElement('script');
137+
tag.src = 'https://www.youtube.com/player_api';
138+
const firstScriptTag = document.getElementsByTagName('script')[0];
139+
if (firstScriptTag.parentNode != null) {
140+
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
141+
app.component('youtube-iframe', player);
142+
window.onYouTubeIframeAPIReady = () => {
143+
manager.registerFactory(window.YT);
144+
manager.registerEvents();
145+
manager.runBacklog();
146+
};
147+
}
148+
}
149+
},
150+
};
151+
152+
exports.YouTubePlayer = player;
153+
exports.default = plugin;

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

Lines changed: 60 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,58 @@
1-
// Copyright © 2020-present Techassi
1+
// Copyright (c) 2020-present Techassi
22
// Use of this source code is governed by a MIT-style
33
// license that can be found in the LICENSE file.
4-
// vue-youtube-iframe 1.0.2
4+
// vue-youtube-iframe 1.0.3
55
import { h, nextTick } from 'vue';
66

7-
const manager = {
8-
factory: null,
9-
players: [],
10-
events: {},
11-
uid: 0,
12-
13-
// registerFactory registers the YT Factory (e.g. create a new Player)
14-
registerFactory(YT) {
15-
this.factory = YT;
16-
},
17-
18-
// registerEvents registers the YT Player events to be emitted by the component
19-
registerEvents() {
20-
const { PlayerState } = this.factory;
21-
this.events[PlayerState.ENDED] = 'ended';
22-
this.events[PlayerState.PLAYING] = 'playing';
23-
this.events[PlayerState.PAUSED] = 'paused';
24-
this.events[PlayerState.BUFFERING] = 'buffering';
25-
this.events[PlayerState.CUED] = 'cued';
26-
},
7+
function createManager() {
8+
return {
9+
factory: undefined,
10+
players: [],
11+
events: {},
12+
uid: 0,
13+
registerFactory(factory) {
14+
this.factory = factory;
15+
},
16+
registerEvents() {
17+
this.events[YT.PlayerState.ENDED] = 'ended';
18+
this.events[YT.PlayerState.PLAYING] = 'playing';
19+
this.events[YT.PlayerState.PAUSED] = 'paused';
20+
this.events[YT.PlayerState.BUFFERING] = 'buffering';
21+
this.events[YT.PlayerState.CUED] = 'cued';
22+
},
23+
register(callback) {
24+
this.uid++;
25+
if (this.factory != undefined) {
26+
callback(this.factory, `vue-youtube-iframe-${this.uid}`);
27+
return;
28+
}
29+
this.players.push(callback);
30+
},
31+
runBacklog() {
32+
this.players.forEach((callback) => {
33+
if (this.factory != undefined) {
34+
this.uid++;
35+
callback(this.factory, `vue-youtube-iframe-${this.uid}`);
36+
}
37+
this.players = [];
38+
});
39+
},
40+
};
41+
}
42+
const manager = createManager();
2743

28-
// register registers a new player to be initalizied and runs callback
29-
register(callback) {
30-
this.uid += 1;
31-
if (this.factory) {
32-
callback(this.factory, `vue-youtube-iframe-${this.uid}`);
33-
return;
44+
function skipIfAutoplay(player, playerVars) {
45+
if (playerVars.autoplay != undefined &&
46+
playerVars.autoplay == YT.AutoPlay.AutoPlay) {
47+
player.mute();
48+
if (playerVars.start != undefined && playerVars.start != 0) {
49+
player.seekTo(playerVars.start, true);
3450
}
35-
this.players.push(callback);
36-
},
37-
38-
// runBacklog runs backlogged initializations (when the YT factory wasn't set yet)
39-
runBacklog() {
40-
this.players.forEach((callback) => {
41-
callback(this.factory, `vue-youtube-iframe-${this.uid}`);
42-
});
43-
this.players = [];
44-
},
45-
};
51+
else {
52+
player.playVideo();
53+
}
54+
}
55+
}
4656

4757
const player = {
4858
name: 'YoutubeIframe',
@@ -58,7 +68,7 @@ const player = {
5868
playerParameters: {
5969
type: Object,
6070
default: () => ({
61-
autpplay: 0,
71+
autoplay: 0,
6272
time: 0,
6373
mute: 0,
6474
}),
@@ -84,13 +94,11 @@ const player = {
8494
template: '<div><div :id="elementId"></div></div>',
8595
mounted() {
8696
const { playerHeight, playerWidth, playerParameters, videoId } = this;
87-
8897
manager.register((factory, uid) => {
8998
const host = this.noCookie
9099
? 'https://www.youtube-nocookie.com'
91100
: 'https://www.youtube.com';
92101
this.elementId = uid;
93-
94102
nextTick().then(() => {
95103
this.player = new factory.Player(this.elementId, {
96104
width: playerWidth,
@@ -100,21 +108,7 @@ const player = {
100108
host,
101109
events: {
102110
onReady: (event) => {
103-
const p = event.target;
104-
if (
105-
playerParameters.autoplay !== 'undefined' &&
106-
playerParameters.autoplay === 1
107-
) {
108-
p.mute();
109-
if (
110-
playerParameters.start !== 'undefined' &&
111-
playerParameters.start !== 0
112-
) {
113-
p.seekTo(playerParameters.start);
114-
} else {
115-
p.playVideo();
116-
}
117-
}
111+
skipIfAutoplay(event.target, playerParameters);
118112
this.$emit('ready', event);
119113
},
120114
onStateChange: (event) => {
@@ -137,17 +131,16 @@ const plugin = {
137131
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
138132
const tag = document.createElement('script');
139133
tag.src = 'https://www.youtube.com/player_api';
140-
141134
const firstScriptTag = document.getElementsByTagName('script')[0];
142-
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
143-
144-
app.component('youtube-iframe', player);
145-
146-
window.onYouTubeIframeAPIReady = () => {
147-
manager.registerFactory(window.YT);
148-
manager.registerEvents();
149-
manager.runBacklog();
150-
};
135+
if (firstScriptTag.parentNode != null) {
136+
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
137+
app.component('youtube-iframe', player);
138+
window.onYouTubeIframeAPIReady = () => {
139+
manager.registerFactory(window.YT);
140+
manager.registerEvents();
141+
manager.runBacklog();
142+
};
143+
}
151144
}
152145
},
153146
};

0 commit comments

Comments
 (0)