x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-22 13:21:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

update docs

Browse Source
This commit is contained in:
Harvey committed 2022-05-06 10:46:17 +08:00
1 parent 194c65778b
commit d88a992efb
51 files changed
+219 -220
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer-document/docs/en/Overview.mdx
+6 -6
View File
@@ -79,7 +79,7 @@ The size of the player depends on the size of the `container`, so your `containe
<!DOCTYPE html>
<html>
<head>
<title>ArtPlayer Demo</title>
<title>ArtPlayer</title>
<meta charset="UTF-8" />
<style>
.artplayer-app {
@@ -104,12 +104,12 @@ The size of the player depends on the size of the `container`, so your `containe
### Use in `Vue.js` or `Nuxt.js`
<Tabs>
<TabItem value="Vue.js" label="Vue.js">
<TabItem value="Vue.js" label="Vue.js Template">
[artplayer-template/vue.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/vue.js)
</TabItem>
<TabItem value="Nuxt.js" label="Nuxt.js">
<TabItem value="Nuxt.js" label="Nuxt.js Template">
[artplayer-template/nuxt.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/nuxt.js)
@@ -200,12 +200,12 @@ export default {
### Use in `React.js` or `Next.js`
<Tabs>
<TabItem value="React.js" label="React.js">
<TabItem value="React.js" label="React.js Template">
[artplayer-template/react.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/react.js)
</TabItem>
<TabItem value="Next.js" label="Next.js">
<TabItem value="Next.js" label="Next.js Template">
[artplayer-template/next.js](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-template/next.js)
@@ -216,7 +216,7 @@ export default {
<TabItem value="ArtPlayer.jsx" label="ArtPlayer.jsx">
```jsx showLineNumbers
import React, { useEffect, useRef } from 'react';
import { useEffect, useRef } from 'react';
import Artplayer from 'artplayer';
export default function Player({ option, getInstance, ...rest }) {
packages/artplayer-document/docs/zh-cn/Overview.mdx
+1 -1
View File
@@ -216,7 +216,7 @@ export default {
<TabItem value="ArtPlayer.jsx" label="ArtPlayer.jsx">
```jsx showLineNumbers
import React, { useEffect, useRef } from 'react';
import { useEffect, useRef } from 'react';
import Artplayer from 'artplayer';
export default function Player({ option, getInstance, ...rest }) {
packages/artplayer-template/next.js/pages/ArtPlayer.js
+2 -1
View File
@@ -1,7 +1,7 @@
import { useEffect, useRef } from 'react';
import Artplayer from 'artplayer';
export default function ({ option, getInstance, ...rest }) {
export default function Player({ option, getInstance, ...rest }) {
const artRef = useRef();
useEffect(() => {
@@ -19,6 +19,7 @@ export default function ({ option, getInstance, ...rest }) {
art.destroy(false);
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
return <div ref={artRef} {...rest}></div>;
packages/artplayer-template/next.js/pages/index.js
+21 -19
View File
@@ -1,21 +1,23 @@
import { useRef } from "react";
import Artplayer from "./Artplayer";
import React from 'react';
import Artplayer from './ArtPlayer';
export default function Home() {
const option = useRef({
url: "https://artplayer.org/assets/sample/video.mp4",
autoSize: true,
});
return (
<Artplayer
option={option.current}
style={{
width: "600px",
height: "400px",
margin: "60px auto 0",
}}
getInstance={(art) => console.log(art)}
/>
);
function App() {
return (
<div>
<Artplayer
option={{
url: 'https://artplayer.org/assets/sample/video.mp4',
autoSize: true,
}}
style={{
width: '600px',
height: '400px',
margin: '60px auto 0',
}}
getInstance={(art) => console.log(art)}
/>
</div>
);
}
export default App;
packages/artplayer-template/nuxt.js/Artplayer.vue
+1 -1
View File
@@ -29,7 +29,7 @@ export default {
},
beforeUnmount() {
if (this.instance && this.instance.destroy) {
this.instance.destroy();
this.instance.destroy(false);
}
},
};
packages/artplayer-template/nuxt.js/app.vue
+4 -8
View File
@@ -1,18 +1,11 @@
<template>
<div>
<client-only placeholder="loading...">
<Artplayer @get-instance="getInstance" :option="option" :style="style" />
</client-only>
</div>
<Artplayer @get-instance="getInstance" :option="option" :style="style" />
</template>
<script>
import Artplayer from './Artplayer.vue';
export default {
components: {
Artplayer,
},
data() {
return {
option: {
@@ -26,6 +19,9 @@ export default {
},
};
},
components: {
Artplayer,
},
methods: {
getInstance(art) {
console.log(art);
packages/artplayer-template/react.js/src/ArtPlayer.js
+1 -1
View File
@@ -1,4 +1,4 @@
import React, { useEffect, useRef } from 'react';
import { useEffect, useRef } from 'react';
import Artplayer from 'artplayer';
export default function Player({ option, getInstance, ...rest }) {
packages/artplayer-template/vue.js/src/App.vue
+22 -22
View File
@@ -1,31 +1,31 @@
<template>
<Artplayer @get-instance="getInstance" :option="option" :style="style" />
<Artplayer @get-instance="getInstance" :option="option" :style="style" />
</template>
<script>
import Artplayer from "./Artplayer.vue";
import Artplayer from './Artplayer.vue';
export default {
data() {
return {
option: {
url: "https://artplayer.org/assets/sample/video.mp4",
autoSize: true,
},
style: {
width: "600px",
height: "400px",
margin: "60px auto 0",
},
};
},
components: {
Artplayer,
},
methods: {
getInstance(art) {
console.log(art);
data() {
return {
option: {
url: 'https://artplayer.org/assets/sample/video.mp4',
autoSize: true,
},
style: {
width: '600px',
height: '400px',
margin: '60px auto 0',
},
};
},
components: {
Artplayer,
},
methods: {
getInstance(art) {
console.log(art);
},
},
},
};
</script>
packages/artplayer-template/vue.js/src/Artplayer.vue
+26 -26
View File
@@ -1,36 +1,36 @@
<template>
<div ref="artRef"></div>
<div ref="artRef"></div>
</template>
<script>
import Artplayer from "artplayer";
import Artplayer from 'artplayer';
export default {
data() {
return {
instance: null,
};
},
props: {
option: {
type: Object,
required: true,
data() {
return {
instance: null,
};
},
},
mounted() {
this.instance = new Artplayer({
...this.option,
container: this.$refs.artRef,
});
props: {
option: {
type: Object,
required: true,
},
},
mounted() {
this.instance = new Artplayer({
...this.option,
container: this.$refs.artRef,
});
this.$nextTick(() => {
this.$emit("get-instance", this.instance);
});
},
beforeUnmount() {
if (this.instance && this.instance.destroy) {
this.instance.destroy();
}
},
this.$nextTick(() => {
this.$emit('get-instance', this.instance);
});
},
beforeUnmount() {
if (this.instance && this.instance.destroy) {
this.instance.destroy(false);
}
},
};
</script>