Skip to content

Commit 161c48a

Browse files
redxtechredxtech
committed
v6
1 parent 31bd1fb commit 161c48a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+1607
-29957
lines changed

‎.browserslistrc‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
> 1%
22
last 2 versions
3-
not ie <= 8
3+
not ie <= 8

‎.editorconfig‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
[*.{js, jsx, ts, tsx, vue}]
2+
indent_style = space
3+
indent_size = 2
4+
trim_trailing_whitespace = true
5+
insert_final_newline = true

‎.eslintrc.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
module.exports = {
22
root: true,
33
env: {
4-
browser: true
4+
node: true
55
},
66
'extends': [
7-
'plugin:vue/essential',
7+
'plugin:vue/recommended',
88
'@vue/standard'
99
],
1010
rules: {

‎.gitignore‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,4 @@ yarn-error.log*
1818
*.ntvs*
1919
*.njsproj
2020
*.sln
21-
*.sw*
22-
23-
# Demo files
24-
.nuxt
21+
*.sw?

‎README.md‎

Lines changed: 10 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# vue-plyr
2-
>v5.1.3 - [Changelog](https://github.com/redxtech/vue-plyr/blob/master/changelog.md)
2+
>v6.0.0 - [Changelog](https://github.com/redxtech/vue-plyr/blob/master/changelog.md)
33
4-
>A set of Vue components for the plyr video & audio player.
4+
>A vue component for the plyr video & audio player.
55
66
This is useful for when you want a nice video player in your Vue app.
77

@@ -13,27 +13,17 @@ enhancement), and Vimeo (div & progressive enhancement).
1313
## Installation
1414

1515
```bash
16-
yarn add vue-plyr # or npm i vue-plyr
16+
yarn add vue-plyr plyr # or npm i vue-plyr plyr
1717
```
1818

19-
### Browser
20-
21-
Just include Vue, the script file, and the css. e.g.:
22-
23-
```html
24-
<script type="text/javascript" src="https://unpkg.com/vue"></script>
25-
<script type="text/javascript" src="https://unpkg.com/vue-plyr/dist/vue-plyr.js"></script>
26-
<link rel="stylesheet" href="https://unpkg.com/vue-plyr/dist/vue-plyr.css">
27-
```
2819
### Module
2920

3021
```js
3122
// In your main vue file - the one where you create the initial vue instance.
3223
import Vue from 'vue'
3324
import VuePlyr from 'vue-plyr'
34-
import 'vue-plyr/dist/vue-plyr.css' // only if your build system can import css, otherwise import it wherever you would import your css.
3525

36-
// Second argument with defaults can be omitted
26+
// The second argument is the default config values which can be omitted.
3727
Vue.use(VuePlyr, {
3828
plyr: {
3929
fullscreen: { enabled: false }
@@ -105,21 +95,16 @@ method is to access the player through the `refs` attribute.
10595
<vue-plyr ref="plyr"></vue-plyr>
10696
</template>
10797
<script>
108-
name: 'Component',
98+
'Component',
10999
mounted () {
110100
console.log(this.player)
111101
},
112-
computed: {
102+
{
113103
player () { return this.$refs.plyr.player }
114104
}
115105
</script>
116106
```
117107

118-
You are also able to access it through the `@player` event **(soon to be
119-
removed)** which is emitted when the component is mounted. The payload
120-
is the player object. You can use this to manipulate the instance
121-
directly.
122-
123108
## Events
124109

125110
If you want to capture events from the plyr instance, there are a few
@@ -136,17 +121,17 @@ Valid events are [here](https://github.com/sampotts/plyr#events).
136121
<vue-plyr ref="plyr"></vue-plyr>
137122
</template>
138123
<script>
139-
name: 'Component',
124+
'Component',
140125
mounted () {
141126
this.player.on('event', () => console.log('event fired'))
142127
},
143-
computed: {
128+
{
144129
player () { return this.$refs.plyr.player }
145130
}
146131
</script>
147132
```
148133

149-
The other way **(soon to be removed)** is to just pass an array of the
134+
The other way is to just pass an array of the
150135
events you want emitted.
151136

152137
```html
@@ -170,7 +155,7 @@ only the three lines:
170155
import Vue from 'vue'
171156
import VuePlyr from 'vue-plyr'
172157

173-
// Second argument with defaults can be omitted
158+
// The second argument is the default config values which can be omitted.
174159
Vue.use(VuePlyr, {
175160
plyr: {
176161
fullscreen: { enabled: false }
@@ -188,9 +173,6 @@ The `nuxt.config.js` file should at minimum include this:
188173
export default {
189174
plugins: [
190175
'~/plugins/vue-plyr'
191-
],
192-
css: [
193-
'vue-plyr/dist/vue-plyr.css'
194176
]
195177
}
196178
```

‎babel.config.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
presets: [
3+
'@vue/cli-plugin-babel/preset'
4+
]
5+
}

‎bili.config.js‎

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

‎changelog.md‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
# Changelog
22

3-
#### 5.1.3
4-
- Fix empty npm push.
3+
#### 6.0.0
4+
- Change import to be more natural.
5+
- Move to esm export.
6+
- Change demo.
7+
- Revamp how using the plugin works.
8+
- Remove player event.
59

610
#### 5.1.2
711
- Fix readme because I forgot to bump it previously.

‎demo/App.vue‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<template>
2+
<div id="app">
3+
<h1>Video Player</h1>
4+
<vue-plyr>
5+
<video
6+
crossorigin
7+
playsinline
8+
poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg"
9+
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
10+
>
11+
<source
12+
size="576"
13+
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
14+
type="video/mp4"
15+
>
16+
<source
17+
size="720"
18+
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4"
19+
type="video/mp4"
20+
>
21+
<source
22+
size="1080"
23+
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4"
24+
type="video/mp4"
25+
>
26+
<track
27+
default
28+
kind="captions"
29+
label="English"
30+
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
31+
srclang="en"
32+
>
33+
<track
34+
kind="captions"
35+
label="Français"
36+
src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"
37+
srclang="fr"
38+
>
39+
<a
40+
download=""
41+
href="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4"
42+
>
43+
Download
44+
</a>
45+
46+
</video>
47+
</vue-plyr>
48+
49+
<h1>Audio Player</h1>
50+
<vue-plyr>
51+
<audio
52+
crossorigin
53+
playsinline
54+
>
55+
<source
56+
src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3"
57+
type="audio/mp3"
58+
>
59+
<source
60+
src="https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg"
61+
type="audio/ogg"
62+
>
63+
</audio>
64+
</vue-plyr>
65+
66+
<h1>YouTube</h1>
67+
<vue-plyr>
68+
<div class="plyr__video-embed">
69+
<iframe
70+
allow="autoplay"
71+
allowfullscreen
72+
allowtransparency
73+
src="https://www.youtube.com/embed/bTqVqk7FSmY?iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1"
74+
/>
75+
</div>
76+
</vue-plyr>
77+
78+
<h1>Vimeo</h1>
79+
<vue-plyr>
80+
<div class="plyr__video-embed">
81+
<iframe
82+
allow="autoplay"
83+
allowfullscreen
84+
allowtransparency
85+
src="https://player.vimeo.com/video/76979871?loop=false&byline=false&portrait=false&title=false&speed=true&transparent=0&gesture=media"
86+
/>
87+
</div>
88+
</vue-plyr>
89+
90+
<h1>YouTube (Not Progressive Enhancement)</h1>
91+
<vue-plyr>
92+
<div
93+
data-plyr-embed-id="bTqVqk7FSmY"
94+
data-plyr-provider="youtube"
95+
/>
96+
</vue-plyr>
97+
98+
<h1>Vimeo (Not Progressive Enhancement)</h1>
99+
<vue-plyr>
100+
<div
101+
data-plyr-embed-id="76979871"
102+
data-plyr-provider="vimeo"
103+
/>
104+
</vue-plyr>
105+
</div>
106+
</template>
107+
108+
<script>
109+
// import VuePlyr from './VuePlyr'
110+
111+
export default {
112+
name: 'App'
113+
// components: {
114+
// VuePlyr
115+
// }
116+
}
117+
</script>
118+
119+
<style>
120+
#app {
121+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
122+
-webkit-font-smoothing: antialiased;
123+
-moz-osx-font-smoothing: grayscale;
124+
text-align: center;
125+
color: #2c3e50;
126+
margin-top: 60px;
127+
}
128+
</style>

‎demo/main.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Vue from 'vue'
2+
import App from './App.vue'
3+
// import VuePlyr from '../src/main'
4+
import VuePlyr from '../dist/vue-plyr'
5+
6+
Vue.config.productionTip = false
7+
8+
Vue.use(VuePlyr)
9+
10+
new Vue({
11+
render: h => h(App)
12+
}).$mount('#app')

0 commit comments

Comments
 (0)