add art.quality

This commit is contained in:
Harvey Zack committed 2023-05-13 19:53:04 +08:00
1 parent 8582259dd4
commit 6c5393b691
16 files changed
+250 -148

No files matched your search

@@ -1,25 +1,25 @@
// ../../node_modules/vitepress/dist/client/theme-default/index.js
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/fonts.css";
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/fonts.css";
// ../../node_modules/vitepress/dist/client/theme-default/without-fonts.js
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/vars.css";
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/base.css";
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/utils.css";
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/custom-block.css";
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code.css";
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code-group.css";
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/vp-doc.css";
import "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/vp-sponsor.css";
import VPBadge from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPBadge.vue";
import Layout from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/Layout.vue";
import { default as default2 } from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPHomeHero.vue";
import { default as default3 } from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPHomeFeatures.vue";
import { default as default4 } from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPHomeSponsors.vue";
import { default as default5 } from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPDocAsideSponsors.vue";
import { default as default6 } from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPTeamPage.vue";
import { default as default7 } from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageTitle.vue";
import { default as default8 } from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageSection.vue";
import { default as default9 } from "C:/Users/laozh/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPTeamMembers.vue";
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/vars.css";
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/base.css";
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/utils.css";
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/custom-block.css";
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code.css";
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code-group.css";
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/vp-doc.css";
import "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/styles/components/vp-sponsor.css";
import VPBadge from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPBadge.vue";
import Layout from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/Layout.vue";
import { default as default2 } from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPHomeHero.vue";
import { default as default3 } from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPHomeFeatures.vue";
import { default as default4 } from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPHomeSponsors.vue";
import { default as default5 } from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPDocAsideSponsors.vue";
import { default as default6 } from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPTeamPage.vue";
import { default as default7 } from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageTitle.vue";
import { default as default8 } from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageSection.vue";
import { default as default9 } from "/Users/zhaohaiwei/Desktop/github/ArtPlayer/node_modules/vitepress/dist/client/theme-default/components/VPTeamMembers.vue";
var theme = {
Layout,
enhanceApp: ({ app }) => {
@@ -1,17 +1,17 @@
{
"hash": "87e13f7a",
"browserHash": "17e94e99",
"hash": "49bbf3cf",
"browserHash": "27d1e0c3",
"optimized": {
"vue": {
"src": "../../../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
"file": "vue.js",
"fileHash": "052bf677",
"fileHash": "feae30a7",
"needsInterop": false
},
"@theme/index": {
"src": "../../../../../../node_modules/vitepress/dist/client/theme-default/index.js",
"file": "@theme_index.js",
"fileHash": "176080f4",
"fileHash": "c693c8dd",
"needsInterop": false
}
},
@@ -920,4 +920,46 @@ art.on('ready', () => {
art.cssVar('--art-theme', 'green');
console.log(art.cssVar('--art-theme'));
});
```
## `quality`
- Type: `Setter`
动态设置画质列表
<div className="run-code">▶ Run Code</div>
```js{19-29}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
quality: [
{
default: true,
html: 'SD 480P',
url: '/assets/sample/video.mp4',
},
{
html: 'HD 720P',
url: '/assets/sample/video.mp4',
},
],
});
art.on('ready', () => {
setTimeout(() => {
art.quality = [
{
default: true,
html: '1080P',
url: '/assets/sample/video.mp4',
},
{
html: '4K',
url: '/assets/sample/video.mp4',
},
];
}, 3000);
})
```
@@ -903,4 +903,46 @@ var art = new Artplayer({
});
console.info(art.video);
```
## `quality`
- Type: `Setter`
Dynamically set the quality list
<div className="run-code">▶ Run Code</div>
```js{19-29}
var art = new Artplayer({
container: '.artplayer-app',
url: '/assets/sample/video.mp4',
quality: [
{
default: true,
html: 'SD 480P',
url: '/assets/sample/video.mp4',
},
{
html: 'HD 720P',
url: '/assets/sample/video.mp4',
},
],
});
art.on('ready', () => {
setTimeout(() => {
art.quality = [
{
default: true,
html: '1080P',
url: '/assets/sample/video.mp4',
},
{
html: '4K',
url: '/assets/sample/video.mp4',
},
];
}, 3000);
})
```
+4 -9
View File
@@ -1,4 +1,4 @@
import { errorHandle, addClass, removeClass, isMobile } from '../utils';
import { errorHandle, addClass, removeClass, isMobile, sleep } from '../utils';
import Component from '../utils/component';
import fullscreen from './fullscreen';
import fullscreenWeb from './fullscreenWeb';
@@ -10,7 +10,6 @@ import volume from './volume';
import setting from './setting';
import thumbnails from './thumbnails';
import screenshot from './screenshot';
import quality from './quality';
import loop from './loop';
import airplay from './airplay';
@@ -104,13 +103,9 @@ export default class Control extends Component {
}
if (option.quality.length) {
this.add(
quality({
name: 'quality',
position: 'right',
index: 10,
}),
);
sleep().then(() => {
this.art.quality = option.quality;
});
}
if (option.screenshot && !isMobile) {
-17
View File
@@ -1,17 +0,0 @@
export default function quality(option) {
return (art) => {
const qualityOption = art.option.quality;
const qualityDefault = qualityOption.find((item) => item.default) || qualityOption[0];
return {
...option,
style: {
marginRight: '10px',
},
html: qualityDefault ? qualityDefault.html : '',
selector: qualityOption,
onSelect(item) {
art.switchQuality(item.url, item.html);
},
};
};
}
+2
View File
@@ -30,6 +30,7 @@ import typeMix from './typeMix';
import stateMix from './stateMix';
import subtitleOffsetMix from './subtitleOffsetMix';
import airplayMix from './airplayMix';
import qualityMix from './qualityMix';
import optionInit from './optionInit';
import eventInit from './eventInit';
@@ -67,6 +68,7 @@ export default class Player {
stateMix(art);
subtitleOffsetMix(art);
airplayMix(art);
qualityMix(art);
eventInit(art);
optionInit(art);
}
@@ -0,0 +1,24 @@
import { def } from '../utils';
export default function qualityMix(art) {
def(art, 'quality', {
set(quality) {
const { controls, notice, i18n } = art;
const qualityDefault = quality.find((item) => item.default) || quality[0];
controls.update({
name: 'quality',
position: 'right',
index: 10,
style: {
marginRight: '10px',
},
html: qualityDefault ? qualityDefault.html : '',
selector: quality,
async onSelect(item) {
await art.switchQuality(item.url);
notice.show = `${i18n.get('Switch Video')}: ${item.html}`;
},
});
},
});
}
@@ -20,6 +20,7 @@
.art-selector-item {
.art-center();
width: 100%;
padding: 10px 15px;
flex-shrink: 0;
line-height: 1;
+2 -16
View File
@@ -3,6 +3,7 @@ import { Setting } from './setting';
import { Icons } from './icons';
import { I18n } from './i18n';
import { CssVar } from './cssVar';
import { quality } from './quality';
import { ComponentOption } from './component';
import Artplayer = require('./artplayer');
@@ -207,22 +208,7 @@ export type Option = {
/**
* Custom video quality list
*/
quality?: {
/**
* Whether the default is selected
*/
default?: boolean;
/**
* Html string of quality
*/
html: string | HTMLElement;
/**
* Video quality url
*/
url: string;
}[];
quality?: quality[];
/**
* Custom highlight list
+2
View File
@@ -1,5 +1,6 @@
import { CssVar } from './cssVar';
import { CustomType } from './option';
import { quality } from './quality';
export type AspectRatio = 'default' | '4:3' | '16:9' | (`${number}:${number}` & Record<never, never>);
export type PlaybackRate = 0.5 | 0.75 | 1.0 | 1.25 | 1.5 | 1.75 | 2.0 | (number & Record<never, never>);
@@ -63,6 +64,7 @@ export declare class Player {
get subtitleOffset(): number;
set subtitleOffset(time: number);
set switch(url: string);
set quality(quality: quality[]);
pause(): void;
play(): Promise<void>;
toggle(): void;
+16
View File
@@ -0,0 +1,16 @@
export type quality = {
/**
* Whether the default is selected
*/
default?: boolean;
/**
* Html string of quality
*/
html: string | HTMLElement;
/**
* Video quality url
*/
url: string;
};