Skip to content

Commit 19ee8e3

Browse files
TechassiTechassi
committed
Initial commit
0 parents  commit 19ee8e3

File tree

12 files changed

+2587
-0
lines changed

12 files changed

+2587
-0
lines changed

‎.eslintrc.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es2021": true
5+
},
6+
"extends": ["plugin:vue/essential", "airbnb-base", "prettier"],
7+
"parserOptions": {
8+
"ecmaVersion": 12,
9+
"sourceType": "module"
10+
},
11+
"plugins": ["vue", "prettier"],
12+
"rules": {
13+
"prettier/prettier": "error",
14+
"quotes": "error",
15+
"indent": ["error", 4]
16+
}
17+
}

‎.gitignore‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
.DS_Store
2+
node_modules/
3+
/dist/
4+
5+
# local env files
6+
.env.local
7+
.env.*.local
8+
9+
# Log files
10+
npm-debug.log*
11+
yarn-debug.log*
12+
yarn-error.log*
13+
14+
# Editor directories and files
15+
.idea
16+
.vscode
17+
*.suo
18+
*.ntvs*
19+
*.njsproj
20+
*.sln
21+
*.sw*

‎.prettierrc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"trailingComma": "es5",
3+
"tabWidth": 4,
4+
"semi": true,
5+
"singleQuote": true
6+
}

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

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
// Copyright © 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.0
5+
import { h, nextTick } from 'vue';
6+
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+
},
27+
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;
34+
}
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+
};
46+
47+
const player = {
48+
name: 'YoutubeIframe',
49+
props: {
50+
playerWidth: {
51+
type: [String, Number],
52+
default: '1280',
53+
},
54+
playerHeight: {
55+
type: [String, Number],
56+
default: '720',
57+
},
58+
playerParameters: {
59+
type: Object,
60+
default: () => ({
61+
autpplay: 0,
62+
time: 0,
63+
mute: 0,
64+
}),
65+
},
66+
videoId: {
67+
type: String,
68+
default: '',
69+
},
70+
},
71+
data() {
72+
return {
73+
elementId: '',
74+
player: {},
75+
};
76+
},
77+
render() {
78+
return h('div', [h('div', { id: this.elementId })]);
79+
},
80+
template: '<div><div :id="elementId"></div></div>',
81+
mounted() {
82+
const { playerHeight, playerWidth, playerParameters, videoId } = this;
83+
84+
manager.register((factory, uid) => {
85+
this.elementId = uid;
86+
nextTick().then(() => {
87+
this.player = new factory.Player(this.elementId, {
88+
width: playerWidth,
89+
height: playerHeight,
90+
...playerParameters,
91+
videoId,
92+
host: 'https://www.youtube.com',
93+
events: {
94+
onReady: (event) => {
95+
const p = event.target;
96+
if (playerParameters.autoplay === 1) {
97+
p.mute();
98+
if (playerParameters?.start !== 0) {
99+
p.seekTo(playerParameters.start);
100+
} else {
101+
p.playVideo();
102+
}
103+
}
104+
this.$emit('ready', event);
105+
},
106+
onStateChange: (event) => {
107+
if (event.data !== -1) {
108+
this.$emit(manager.events[event.data], event);
109+
}
110+
},
111+
onError: (event) => {
112+
this.$emit('error', event);
113+
},
114+
},
115+
});
116+
});
117+
});
118+
},
119+
};
120+
121+
const plugin = {
122+
install: (app) => {
123+
if (typeof window !== 'undefined' && typeof document !== 'undefined') {
124+
const tag = document.createElement('script');
125+
tag.src = 'https://www.youtube.com/player_api';
126+
127+
const firstScriptTag = document.getElementsByTagName('script')[0];
128+
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
129+
130+
app.component('youtube-iframe', player);
131+
132+
window.onYouTubeIframeAPIReady = () => {
133+
manager.registerFactory(window.YT);
134+
manager.registerEvents();
135+
manager.runBacklog();
136+
};
137+
}
138+
},
139+
};
140+
141+
export default plugin;
142+
export { player as YouTubePlayer };

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

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

0 commit comments

Comments
 (0)