-
-
-
+
+
diff --git a/src/class/PluginCenter.ts b/src/class/PluginCenter.ts
index 3011920..1efbcda 100644
--- a/src/class/PluginCenter.ts
+++ b/src/class/PluginCenter.ts
@@ -1,155 +1,195 @@
-import useVirtualPages from "@/hooks/useVirtualPages";
-import VirtualDirectory, { VirtualFile } from "./VirtualDirectory";
-import { ShallowRef, shallowRef } from "vue";
-import { alertTipType, usePluginHooksType } from "@/types/type";
-import VirtualPage, { VirtualPages } from "./VirtualPage";
-import useRootVDirectory from "@/hooks/useRootVDirectory";
+import useVirtualPages from '@/hooks/useVirtualPages'
+import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
+import { ShallowRef, shallowRef } from 'vue'
+import { alertTipType, usePluginHooksType } from '@/types/type'
+import VirtualPage, { VirtualPages } from './VirtualPage'
+import useRootVDirectory from '@/hooks/useRootVDirectory'
export enum PluginGroup {
- default = "default",
- mainMenu = "mainMenu",
- // 导入的时候会立即执行函数一次
- immediately = "immediately"
+ default = 'default',
+ mainMenu = 'mainMenu',
+ // 导入的时候会立即执行函数一次
+ immediately = 'immediately'
}
export interface registerComponentOption {
- key: string;
- name: string;
- icon?: any;
- getComponent: () => Promise;
- group?: PluginGroup[];
- filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean;
- disable?: boolean;
- exitConfirm?: boolean;
- // 若为true，则只会创建一个页面，当存在已创建页面则会直接将VFile和VDir加到curr里面
- single?: boolean;
- priority?: number;
+ key: string
+ name: string
+ icon?: any
+ getComponent: () => Promise
+ group?: PluginGroup[]
+ filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => boolean
+ disable?: boolean
+ exitConfirm?: boolean
+ // 若为true，则只会创建一个页面，当存在已创建页面则会直接将VFile和VDir加到curr里面
+ single?: boolean
+ priority?: number
}
export type Plugin = {
- // 用于显示的名字
- name: string;
- // 代表插件的icon
- icon?: ShallowRef;
- // 是否禁用插件
- disable: boolean;
- // 插件所属的group，用于区分插件使用的场合
- group: PluginGroup[];
- // 插件优先级
- priority: number;
- // 判断在未禁用时是否可以使用这个组件
- // 使用组件即调用下面的func
- filter: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[], VPages: VirtualPages) => boolean;
- func: (VDirectories: VirtualDirectory[], VFiles: VirtualFile[], hooks: usePluginHooksType, ...args: any[]) => void;
-};
+ // 用于显示的名字
+ name: string
+ // 代表插件的icon
+ icon?: ShallowRef
+ // 是否禁用插件
+ disable: boolean
+ // 插件所属的group，用于区分插件使用的场合
+ group: PluginGroup[]
+ // 插件优先级
+ priority: number
+ // 判断在未禁用时是否可以使用这个组件
+ // 使用组件即调用下面的func
+ filter: (
+ VDirectories: VirtualDirectory[],
+ VFiles: VirtualFile[],
+ VPages: VirtualPages
+ ) => boolean
+ func: (
+ VDirectories: VirtualDirectory[],
+ VFiles: VirtualFile[],
+ hooks: usePluginHooksType,
+ ...args: any[]
+ ) => void
+}
export default class PluginCenter {
- constructor(globalAlertTip: alertTipType) {
- this.pluginsMap = {};
- this.globalAlertTip = globalAlertTip;
- }
- pluginsMap: {
- [key: string]: Plugin;
- };
+ constructor(globalAlertTip: alertTipType) {
+ this.pluginsMap = {}
+ this.globalAlertTip = globalAlertTip
+ }
+ pluginsMap: {
+ [key: string]: Plugin
+ }
- globalAlertTip: alertTipType;
+ globalAlertTip: alertTipType
- register(key: string, plugin: Plugin) {
- this.pluginsMap[key] = plugin;
- if (plugin.group.includes(PluginGroup.immediately)) {
- this.usePlugin(key, [], [], this.usePluginHook)
- }
- }
+ register(key: string, plugin: Plugin) {
+ this.pluginsMap[key] = plugin
+ if (plugin.group.includes(PluginGroup.immediately)) {
+ this.usePlugin(key, [], [], this.usePluginHook)
+ }
+ }
- deregister(key: string) {
- delete this.pluginsMap[key]
- }
+ deregister(key: string) {
+ delete this.pluginsMap[key]
+ }
- /**
- * 便捷地注册一个组件为插件，触发时直接用新页面打开，页面名为key
- */
- registerComponent(option: registerComponentOption): void {
- const { key, name, getComponent, icon, filter, group = [PluginGroup.default], disable = false, exitConfirm = false, single = false, priority = 0 } = option;
- let _component: any;
- const views = useVirtualPages();
- this.register(key, {
- name,
- filter,
- icon: shallowRef(icon),
- group,
- disable,
- priority,
- func: async (VDirectories: VirtualDirectory[], VFiles: VirtualFile[]) => {
- if (filter(VDirectories, VFiles) === false) {
- return;
- }
+ /**
+ * 便捷地注册一个组件为插件，触发时直接用新页面打开，页面名为key
+ */
+ registerComponent(option: registerComponentOption): void {
+ const {
+ key,
+ name,
+ getComponent,
+ icon,
+ filter,
+ group = [PluginGroup.default],
+ disable = false,
+ exitConfirm = false,
+ single = false,
+ priority = 0
+ } = option
+ let _component: any
+ const views = useVirtualPages()
+ this.register(key, {
+ name,
+ filter,
+ icon: shallowRef(icon),
+ group,
+ disable,
+ priority,
+ func: async (
+ VDirectories: VirtualDirectory[],
+ VFiles: VirtualFile[]
+ ) => {
+ if (filter(VDirectories, VFiles) === false) {
+ return
+ }
- if (_component === undefined) {
- const setAlertTip = this.globalAlertTip(`加载 ${name} 插件中`);
- _component = await getComponent();
- setAlertTip &&
- setAlertTip(`加载 ${name} 插件完成`, {
- type: "success",
- timeout: 2000
- });
- }
- const _findRes = views.find(_component) as VirtualPage[];
- if (single && _findRes.length !== 0) {
- const view = _findRes[0];
- view.currentFiles = [...view.currentFiles, ...VFiles];
- view.currentDirectories = [...view.currentDirectories, ...VDirectories];
- } else {
- views.push(_component, key, VDirectories, VFiles, {
- VirtualPageOption: {
- exitConfirm,
- allowCopy: single === false
- }
- });
- }
- }
- });
- }
+ if (_component === undefined) {
+ const setAlertTip = this.globalAlertTip(`加载 ${name} 插件中`)
+ _component = await getComponent()
+ setAlertTip &&
+ setAlertTip(`加载 ${name} 插件完成`, {
+ type: 'success',
+ timeout: 2000
+ })
+ }
+ const _findRes = views.find(_component) as VirtualPage[]
+ if (single && _findRes.length !== 0) {
+ const view = _findRes[0]
+ view.currentFiles = [...view.currentFiles, ...VFiles]
+ view.currentDirectories = [
+ ...view.currentDirectories,
+ ...VDirectories
+ ]
+ } else {
+ views.push(_component, key, VDirectories, VFiles, {
+ VirtualPageOption: {
+ exitConfirm,
+ allowCopy: single === false
+ }
+ })
+ }
+ }
+ })
+ }
- getUsablePlugin(
- VDirectories: VirtualDirectory[],
- VFiles: VirtualFile[],
- option?: {
- group?: PluginGroup[];
- }
- ) {
- const { group = [PluginGroup.default] } = option ?? {};
- const usableList = [];
- const views = useVirtualPages();
- for (let key of Object.keys(this.pluginsMap)) {
- const _plugin = this.pluginsMap[key];
- if (!_plugin.disable && _plugin.group.filter(v => group.includes(v)).length > 0 && _plugin.filter(VDirectories, VFiles, views)) {
- usableList.push(key);
- }
- }
- const res = usableList.map(key => ({
- key,
- ...this.pluginsMap[key]
- }));
- res.sort((a, b) => b.priority - a.priority);
- return res;
- }
+ getUsablePlugin(
+ VDirectories: VirtualDirectory[],
+ VFiles: VirtualFile[],
+ option?: {
+ group?: PluginGroup[]
+ }
+ ) {
+ const { group = [PluginGroup.default] } = option ?? {}
+ const usableList = []
+ const views = useVirtualPages()
+ for (let key of Object.keys(this.pluginsMap)) {
+ const _plugin = this.pluginsMap[key]
+ if (
+ !_plugin.disable &&
+ _plugin.group.filter((v) => group.includes(v)).length > 0 &&
+ _plugin.filter(VDirectories, VFiles, views)
+ ) {
+ usableList.push(key)
+ }
+ }
+ const res = usableList.map((key) => ({
+ key,
+ ...this.pluginsMap[key]
+ }))
+ res.sort((a, b) => b.priority - a.priority)
+ return res
+ }
- get usePluginHook(): usePluginHooksType {
- return {
- globalAlertTip: this.globalAlertTip,
- getViews: useVirtualPages,
- getPluginCenter: () => this,
- getRootVDirectory: () => useRootVDirectory()
- }
- }
+ get usePluginHook(): usePluginHooksType {
+ return {
+ globalAlertTip: this.globalAlertTip,
+ getViews: useVirtualPages,
+ getPluginCenter: () => this,
+ getRootVDirectory: () => useRootVDirectory()
+ }
+ }
- usePlugin(key: string, VDirectories?: VirtualDirectory[], VFiles?: VirtualFile[], ...args: any[]): void;
- usePlugin(key: string, VDirectories?: VirtualDirectory[], VFiles?: VirtualFile[], ...args: any[]) {
- this.pluginsMap[key].func(
- VDirectories ?? [],
- VFiles ?? [],
- this.usePluginHook,
- ...args
- );
- }
+ usePlugin(
+ key: string,
+ VDirectories?: VirtualDirectory[],
+ VFiles?: VirtualFile[],
+ ...args: any[]
+ ): void
+ usePlugin(
+ key: string,
+ VDirectories?: VirtualDirectory[],
+ VFiles?: VirtualFile[],
+ ...args: any[]
+ ) {
+ this.pluginsMap[key].func(
+ VDirectories ?? [],
+ VFiles ?? [],
+ this.usePluginHook,
+ ...args
+ )
+ }
}
diff --git a/src/class/UploadQueue.ts b/src/class/UploadQueue.ts
index 990ff80..f51b92c 100644
--- a/src/class/UploadQueue.ts
+++ b/src/class/UploadQueue.ts
@@ -1,165 +1,169 @@
-import generateId from "@/hooks/generateId";
-import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
-import VirtualDirectory from "./VirtualDirectory";
+import generateId from '@/hooks/generateId'
+import useMiaoFetchApi from '@/hooks/useMiaoFetchApi'
+import VirtualDirectory from './VirtualDirectory'
-const miaoFetchApi = useMiaoFetchApi();
+const miaoFetchApi = useMiaoFetchApi()
export class UploadQueueItem {
- constructor(
- file: File,
- targetDirectory: VirtualDirectory,
- config?: {
- onSuccess?: () => void;
- onFailed?: () => void;
- }
- ) {
- this.file = file;
- this.targetDirectory = targetDirectory;
- this.uid = generateId();
- this.status = "waiting";
- this.process = 0;
- this.onSuccess = config && config.onSuccess;
- this.onFailed = config && config.onFailed;
- }
- uid: number;
- file: File;
- targetDirectory: VirtualDirectory;
- status: "waiting" | "uploading" | "success" | "failed";
- process: number;
- failedReason: unknown | undefined;
+ constructor(
+ file: File,
+ targetDirectory: VirtualDirectory,
+ config?: {
+ onSuccess?: () => void
+ onFailed?: () => void
+ }
+ ) {
+ this.file = file
+ this.targetDirectory = targetDirectory
+ this.uid = generateId()
+ this.status = 'waiting'
+ this.process = 0
+ this.onSuccess = config && config.onSuccess
+ this.onFailed = config && config.onFailed
+ }
+ uid: number
+ file: File
+ targetDirectory: VirtualDirectory
+ status: 'waiting' | 'uploading' | 'success' | 'failed'
+ process: number
+ failedReason: unknown | undefined
- onSuccess?: () => void;
- onFailed?: () => void;
+ onSuccess?: () => void
+ onFailed?: () => void
- _abort: (() => void | undefined) | undefined;
- _status: Promise | undefined;
+ _abort: (() => void | undefined) | undefined
+ _status: Promise | undefined
- /**
- * 开始上传文件
- */
- startUpload() {
- if (this.status === "uploading") {
- return;
- }
- const { abort, response } = miaoFetchApi.upload(this.file, this.targetDirectory, {
- onProcess: percent => {
- this.process = percent;
- }
- });
- this._abort = abort;
- this._status = response;
- this.status = "uploading";
- response
- .then(() => {
- this.status = "success";
- this.onSuccess && this.onSuccess();
- this._abort = undefined;
- this._status = undefined;
- })
- .catch(e => {
- this.status = "failed";
- this.failedReason = e;
- this.onFailed && this.onFailed();
- });
- }
+ /**
+ * 开始上传文件
+ */
+ startUpload() {
+ if (this.status === 'uploading') {
+ return
+ }
+ const { abort, response } = miaoFetchApi.upload(
+ this.file,
+ this.targetDirectory,
+ {
+ onProcess: (percent) => {
+ this.process = percent
+ }
+ }
+ )
+ this._abort = abort
+ this._status = response
+ this.status = 'uploading'
+ response
+ .then(() => {
+ this.status = 'success'
+ this.onSuccess && this.onSuccess()
+ this._abort = undefined
+ this._status = undefined
+ })
+ .catch((e) => {
+ this.status = 'failed'
+ this.failedReason = e
+ this.onFailed && this.onFailed()
+ })
+ }
- /**
- * 终止上传文件
- */
- abortUpload() {
- this._abort && this._abort();
- this.status = "failed";
- this.failedReason = "abort";
- }
+ /**
+ * 终止上传文件
+ */
+ abortUpload() {
+ this._abort && this._abort()
+ this.status = 'failed'
+ this.failedReason = 'abort'
+ }
}
export default class UploadQueue {
- constructor() {
- this.uid = generateId();
- this.queue = [];
- this.mode = "serial";
- }
- uid: number;
- queue: UploadQueueItem[];
- current: UploadQueueItem | undefined;
+ constructor() {
+ this.uid = generateId()
+ this.queue = []
+ this.mode = 'serial'
+ }
+ uid: number
+ queue: UploadQueueItem[]
+ current: UploadQueueItem | undefined
- // 未来再去实现，目前就是串行的
- // 好像也不用去实现
- mode: "serial" | "parallel";
- get status() {
- for (let item of this.queue) {
- if (item.status === "uploading") {
- return "busy";
- }
- }
- return "free";
- }
+ // 未来再去实现，目前就是串行的
+ // 好像也不用去实现
+ mode: 'serial' | 'parallel'
+ get status() {
+ for (let item of this.queue) {
+ if (item.status === 'uploading') {
+ return 'busy'
+ }
+ }
+ return 'free'
+ }
- /**
- * 获取下一个需要被上传的item
- */
- get nextUplpadItem() {
- for (let item of this.queue) {
- if (item.status === "waiting") {
- return item;
- }
- }
- }
+ /**
+ * 获取下一个需要被上传的item
+ */
+ get nextUplpadItem() {
+ for (let item of this.queue) {
+ if (item.status === 'waiting') {
+ return item
+ }
+ }
+ }
- /**
- * 开始串行的上传循环
- */
- loop() {
- if (this.status === "busy") {
- return;
- }
- if (this.nextUplpadItem) {
- this.nextUplpadItem.startUpload();
- }
- }
+ /**
+ * 开始串行的上传循环
+ */
+ loop() {
+ if (this.status === 'busy') {
+ return
+ }
+ if (this.nextUplpadItem) {
+ this.nextUplpadItem.startUpload()
+ }
+ }
- /**
- * 向上传文件队列输送一批新的文件
- * @param {any} files 需要上传的文件
- * @param {any} targetDirectory 目标文件夹
- * @param {any} option 每个文件上传完成以后都会触发一遍的回调函数
- * @returns {any}
- */
- push(
- files: File[],
- targetDirectory: VirtualDirectory,
- option?: {
- /**
- * 每个文件上传完成以后都会触发一遍的回调函数
- */
- onFinish?: () => void;
- /**
- * 是否立即开始上传，若否则按队列顺序一个一个上传
- */
- immediately?: boolean;
- }
- ) {
- const onFinish = option?.onFinish;
- const immediately = option?.immediately ?? false;
- const uploadQueue = files.map(file => {
- return new UploadQueueItem(file, targetDirectory, {
- onSuccess: () => {
- this.loop();
- onFinish && onFinish();
- },
- onFailed: () => {
- this.loop();
- }
- });
- });
- this.queue.push(...uploadQueue);
- if (!immediately) {
- this.loop();
- } else {
- uploadQueue.forEach(item => {
- item.startUpload();
- });
- }
- return uploadQueue;
- }
+ /**
+ * 向上传文件队列输送一批新的文件
+ * @param {any} files 需要上传的文件
+ * @param {any} targetDirectory 目标文件夹
+ * @param {any} option 每个文件上传完成以后都会触发一遍的回调函数
+ * @returns {any}
+ */
+ push(
+ files: File[],
+ targetDirectory: VirtualDirectory,
+ option?: {
+ /**
+ * 每个文件上传完成以后都会触发一遍的回调函数
+ */
+ onFinish?: () => void
+ /**
+ * 是否立即开始上传，若否则按队列顺序一个一个上传
+ */
+ immediately?: boolean
+ }
+ ) {
+ const onFinish = option?.onFinish
+ const immediately = option?.immediately ?? false
+ const uploadQueue = files.map((file) => {
+ return new UploadQueueItem(file, targetDirectory, {
+ onSuccess: () => {
+ this.loop()
+ onFinish && onFinish()
+ },
+ onFailed: () => {
+ this.loop()
+ }
+ })
+ })
+ this.queue.push(...uploadQueue)
+ if (!immediately) {
+ this.loop()
+ } else {
+ uploadQueue.forEach((item) => {
+ item.startUpload()
+ })
+ }
+ return uploadQueue
+ }
}
diff --git a/src/class/VirtualDirectory.ts b/src/class/VirtualDirectory.ts
index f8ece94..dc222fa 100644
--- a/src/class/VirtualDirectory.ts
+++ b/src/class/VirtualDirectory.ts
@@ -10,226 +10,226 @@ const miaoFetchApi = useMiaoFetchApi()
// const vFileMap = new Map()
export interface Tree {
- name: string
- type: 'directory'
- path: string
- stats: stats
- files: {
- name: string
- type: 'file'
- size: number
- stats: stats
- url: string
- }[]
- directories: Tree[]
+ name: string
+ type: 'directory'
+ path: string
+ stats: stats
+ files: {
+ name: string
+ type: 'file'
+ size: number
+ stats: stats
+ url: string
+ }[]
+ directories: Tree[]
}
export class VirtualFile {
- constructor(info: file, parent: VirtualDirectory) {
- this.name = info.name
- this.size = info.size
- this.stats = info.stats
- this.parent = parent
- this.type = 'file'
- this.id = generateId()
- // if (vFileMap.get(this.path) !== undefined) {
- // throw `${this.path} is already exist`
- // }
- // vFileMap.set(this.path, this)
- }
- name: string
- type: 'file'
- size: number
- stats: stats
- parent: VirtualDirectory
- id: number
- storage: { [key: string]: any } = {}
- get path() {
- return `${this.parent.path}${this.name}`
- }
+ constructor(info: file, parent: VirtualDirectory) {
+ this.name = info.name
+ this.size = info.size
+ this.stats = info.stats
+ this.parent = parent
+ this.type = 'file'
+ this.id = generateId()
+ // if (vFileMap.get(this.path) !== undefined) {
+ // throw `${this.path} is already exist`
+ // }
+ // vFileMap.set(this.path, this)
+ }
+ name: string
+ type: 'file'
+ size: number
+ stats: stats
+ parent: VirtualDirectory
+ id: number
+ storage: { [key: string]: any } = {}
+ get path() {
+ return `${this.parent.path}${this.name}`
+ }
- get url() {
- return `${config.api.get}${this.parent.path}${this.name}`
- }
+ get url() {
+ return `${config.api.get}${this.parent.path}${this.name}`
+ }
- // destroy() {
- // vFileMap.delete(this.path)
- // }
+ // destroy() {
+ // vFileMap.delete(this.path)
+ // }
}
class VirtualDirectory {
- /**
- * 除非为根节点，否则必须设置parent
- */
- constructor(info: directory, parent?: VirtualDirectory) {
- this.name = info.name
- this.stats = info.stats
- this.parent = parent ?? undefined
- this.id = generateId()
- // if (vDirectoryMap.get(this.path) !== undefined) {
- // throw `${this.path} is already exist`
- // }
- // vDirectoryMap.set(this.path, this)
- }
- // 文件夹名
- name: string
- // 子文件
- files: VirtualFile[] = []
- // 子目录
- directories: VirtualDirectory[] = []
- // 没啥意义，标注一下就是了
- type: 'directory' = 'directory'
- // 文件夹创建时间等杂项属性
- stats: stats
- // 父文件夹
- parent?: VirtualDirectory
+ /**
+ * 除非为根节点，否则必须设置parent
+ */
+ constructor(info: directory, parent?: VirtualDirectory) {
+ this.name = info.name
+ this.stats = info.stats
+ this.parent = parent ?? undefined
+ this.id = generateId()
+ // if (vDirectoryMap.get(this.path) !== undefined) {
+ // throw `${this.path} is already exist`
+ // }
+ // vDirectoryMap.set(this.path, this)
+ }
+ // 文件夹名
+ name: string
+ // 子文件
+ files: VirtualFile[] = []
+ // 子目录
+ directories: VirtualDirectory[] = []
+ // 没啥意义，标注一下就是了
+ type: 'directory' = 'directory'
+ // 文件夹创建时间等杂项属性
+ stats: stats
+ // 父文件夹
+ parent?: VirtualDirectory
- _isUpdated: boolean = false
+ _isUpdated: boolean = false
- id: number
+ id: number
- // 用来存储一些标记信息啥的
- storage: { [key: string]: any } = {}
+ // 用来存储一些标记信息啥的
+ storage: { [key: string]: any } = {}
- /**
- * 获取相对于根目录的路径的层数
- * 用于目录下文件定位
- * @returns {string}
- */
- get layer(): number {
- return this.parent ? this.parent.layer + 1 : 0
- }
- /**
- * 相对于根目录的路径， 如: "/", "/123/321/"
- * 用于目录下文件定位
- * @returns {string}
- */
- get path(): string {
- if (!this.parent) {
- return '/'
- }
- return `${this.parent.path}${this.name}/`
- }
+ /**
+ * 获取相对于根目录的路径的层数
+ * 用于目录下文件定位
+ * @returns {string}
+ */
+ get layer(): number {
+ return this.parent ? this.parent.layer + 1 : 0
+ }
+ /**
+ * 相对于根目录的路径， 如: "/", "/123/321/"
+ * 用于目录下文件定位
+ * @returns {string}
+ */
+ get path(): string {
+ if (!this.parent) {
+ return '/'
+ }
+ return `${this.parent.path}${this.name}/`
+ }
- /**
- * 获取从根目录开始的按顺序的文件夹
- * @returns {VirtualDirectory[]}
- */
- get getParents(): VirtualDirectory[] {
- if (!this.parent) {
- return [this]
- }
- return [...this.parent.getParents, this]
- }
+ /**
+ * 获取从根目录开始的按顺序的文件夹
+ * @returns {VirtualDirectory[]}
+ */
+ get getParents(): VirtualDirectory[] {
+ if (!this.parent) {
+ return [this]
+ }
+ return [...this.parent.getParents, this]
+ }
- /**
- * 获取当前文件夹是否已经请求过至少一次数据
- */
- get isUpdated() {
- return this._isUpdated
- }
+ /**
+ * 获取当前文件夹是否已经请求过至少一次数据
+ */
+ get isUpdated() {
+ return this._isUpdated
+ }
- /**
- * 获取 layer 级父文件夹, 如getParent(1)就返回父级
- * @param {number} layer 需要跳转的层数
- * @returns {VirtualDirectory}
- */
- getParent(layer: number): VirtualDirectory {
- if (layer <= 0 || !this.parent) {
- return this
- }
- return this.parent.getParent(layer - 1)
- }
+ /**
+ * 获取 layer 级父文件夹, 如getParent(1)就返回父级
+ * @param {number} layer 需要跳转的层数
+ * @returns {VirtualDirectory}
+ */
+ getParent(layer: number): VirtualDirectory {
+ if (layer <= 0 || !this.parent) {
+ return this
+ }
+ return this.parent.getParent(layer - 1)
+ }
- get tree(): Tree {
- return {
- name: this.name,
- type: this.type,
- path: this.path,
- stats: this.stats,
- files:
- this.files?.map((v) => ({
- name: v.name,
- type: v.type,
- size: v.size,
- stats: v.stats,
- url: v.url
- })) ?? [],
- directories: this.directories?.map((v) => v.tree) ?? []
- }
- }
+ get tree(): Tree {
+ return {
+ name: this.name,
+ type: this.type,
+ path: this.path,
+ stats: this.stats,
+ files:
+ this.files?.map((v) => ({
+ name: v.name,
+ type: v.type,
+ size: v.size,
+ stats: v.stats,
+ url: v.url
+ })) ?? [],
+ directories: this.directories?.map((v) => v.tree) ?? []
+ }
+ }
- // 时间复杂度大爆炸
- updateContent(content: (file | directory)[]) {
- this._isUpdated = true
+ // 时间复杂度大爆炸
+ updateContent(content: (file | directory)[]) {
+ this._isUpdated = true
- const itemNames: string[] = content.map((v) => v.name)
- // 删去远程端已不存在的文件与文件夹
- const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
- let index = 0
- while (index < target.length) {
- if (!itemNames.includes(target[index].name)) {
- target.splice(index, 1)
- } else {
- index += 1
- }
+ const itemNames: string[] = content.map((v) => v.name)
+ // 删去远程端已不存在的文件与文件夹
+ const _delete = (target: (VirtualFile | VirtualDirectory)[]) => {
+ let index = 0
+ while (index < target.length) {
+ if (!itemNames.includes(target[index].name)) {
+ target.splice(index, 1)
+ } else {
+ index += 1
}
- }
- const _addFile = (item: file) => {
- const nvf =
- // vFileMap.get(`${this.path}${item.name}`) ??
- new VirtualFile(item, this)
- this.files.push(nvf)
- }
- const _addDirectory = (item: directory) => {
- const nvd =
- // vDirectoryMap.get(`${this.path}${item.name}/`) ??
- new VirtualDirectory(item, this)
- this.directories.push(nvd)
- }
- const newFileNames: string[] = difference(
- content.filter((v) => v.type === 'file').map((v) => v.name),
- this.files.map((v) => v.name)
- )
- const newDirectoryNames: string[] = difference(
- content.filter((v) => v.type === 'directory').map((v) => v.name),
- this.directories.map((v) => v.name)
- )
- _delete(this.files)
- _delete(this.directories)
- // 加入新的文件与文件夹
- for (let item of content.filter((v) => newFileNames.includes(v.name))) {
- _addFile(item as file)
- }
- for (let item of content.filter((v) =>
- newDirectoryNames.includes(v.name)
- )) {
- _addDirectory(item as directory)
- }
- }
+ }
+ }
+ const _addFile = (item: file) => {
+ const nvf =
+ // vFileMap.get(`${this.path}${item.name}`) ??
+ new VirtualFile(item, this)
+ this.files.push(nvf)
+ }
+ const _addDirectory = (item: directory) => {
+ const nvd =
+ // vDirectoryMap.get(`${this.path}${item.name}/`) ??
+ new VirtualDirectory(item, this)
+ this.directories.push(nvd)
+ }
+ const newFileNames: string[] = difference(
+ content.filter((v) => v.type === 'file').map((v) => v.name),
+ this.files.map((v) => v.name)
+ )
+ const newDirectoryNames: string[] = difference(
+ content.filter((v) => v.type === 'directory').map((v) => v.name),
+ this.directories.map((v) => v.name)
+ )
+ _delete(this.files)
+ _delete(this.directories)
+ // 加入新的文件与文件夹
+ for (let item of content.filter((v) => newFileNames.includes(v.name))) {
+ _addFile(item as file)
+ }
+ for (let item of content.filter((v) =>
+ newDirectoryNames.includes(v.name)
+ )) {
+ _addDirectory(item as directory)
+ }
+ }
- hasChild(item: VirtualDirectory | VirtualFile): boolean {
- if (item.type === 'directory') {
- return this.directories?.includes(item) ?? false
- } else {
- return this.files?.includes(item) ?? false
- }
- }
+ hasChild(item: VirtualDirectory | VirtualFile): boolean {
+ if (item.type === 'directory') {
+ return this.directories?.includes(item) ?? false
+ } else {
+ return this.files?.includes(item) ?? false
+ }
+ }
- // destroy() {
- // for(const item of [...this.files, ...this.directories]){
- // item.destroy()
- // }
- // vDirectoryMap.delete(this.path)
- // }
+ // destroy() {
+ // for(const item of [...this.files, ...this.directories]){
+ // item.destroy()
+ // }
+ // vDirectoryMap.delete(this.path)
+ // }
- /**
- * 调用后重新向远端拉取文件夹信息并进行更新
- * @returns {void}
- */
- async update(): Promise {
- const data: (file | directory)[] = await miaoFetchApi.get(this)
- this.updateContent(data)
- }
+ /**
+ * 调用后重新向远端拉取文件夹信息并进行更新
+ * @returns {void}
+ */
+ async update(): Promise {
+ const data: (file | directory)[] = await miaoFetchApi.get(this)
+ this.updateContent(data)
+ }
}
export default VirtualDirectory
diff --git a/src/class/VirtualPage.ts b/src/class/VirtualPage.ts
index 1d42540..00fc9ac 100644
--- a/src/class/VirtualPage.ts
+++ b/src/class/VirtualPage.ts
@@ -3,184 +3,178 @@ import VirtualDirectory, { VirtualFile } from './VirtualDirectory'
import generateId from '@/hooks/generateId'
export interface VirtualPageOption {
- exitConfirm?: boolean
- allowCopy?: boolean
+ exitConfirm?: boolean
+ allowCopy?: boolean
}
export interface ViewsPushOption {
- index?: number
- VirtualPageOption?: VirtualPageOption
+ index?: number
+ VirtualPageOption?: VirtualPageOption
}
const getRandomWebSafeColor = (() => {
- const webSafeColors = [
- '#009900',
- '#999900',
- '#009999',
- '#990099',
- '#0000ee'
- ]
- let counter = 0
- return () => {
- const color = webSafeColors[counter % webSafeColors.length]
- counter += 1
- return color
- }
+ const webSafeColors = ['#009900', '#999900', '#009999', '#990099', '#0000ee']
+ let counter = 0
+ return () => {
+ const color = webSafeColors[counter % webSafeColors.length]
+ counter += 1
+ return color
+ }
})()
export default class VirtualPage {
- constructor(
- component: Component,
- initObjects: {
- name: string
- directories?: VirtualDirectory[]
- files?: VirtualFile[]
- option?: VirtualPageOption
- }
- ) {
- this.name = initObjects?.name
- this.component = shallowRef(component)
- this.currentDirectories = initObjects?.directories ?? []
- this.currentFiles = initObjects?.files ?? []
- this.visible = true
- this.id = generateId()
- this.refreshKey = Math.random()
- this.color = getRandomWebSafeColor()
- this.exitConfirm = initObjects?.option?.exitConfirm ?? false
- this.allowCopy = initObjects?.option?.allowCopy ?? true
- }
- // 页面使用的组件
- component: Component
- // 页面名
- name: string
- // 是否可见
- visible: boolean
- // 当前正在使用的文件夹
- currentDirectories: VirtualDirectory[]
- // 当前正在使用的文件
- currentFiles: VirtualFile[]
- // 区分每一个页面的唯一id
- id: number
- // 当refreshKey改变时需要刷新页面，目前还没接入刷新
- refreshKey: number
- // 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
- color: string
- // 用于展示的title
- _title?: string
- // 关闭时是否需要确认（未实现）
- exitConfirm: boolean
- // 是否允许复制页面
- allowCopy: boolean
+ constructor(
+ component: Component,
+ initObjects: {
+ name: string
+ directories?: VirtualDirectory[]
+ files?: VirtualFile[]
+ option?: VirtualPageOption
+ }
+ ) {
+ this.name = initObjects?.name
+ this.component = shallowRef(component)
+ this.currentDirectories = initObjects?.directories ?? []
+ this.currentFiles = initObjects?.files ?? []
+ this.visible = true
+ this.id = generateId()
+ this.refreshKey = Math.random()
+ this.color = getRandomWebSafeColor()
+ this.exitConfirm = initObjects?.option?.exitConfirm ?? false
+ this.allowCopy = initObjects?.option?.allowCopy ?? true
+ }
+ // 页面使用的组件
+ component: Component
+ // 页面名
+ name: string
+ // 是否可见
+ visible: boolean
+ // 当前正在使用的文件夹
+ currentDirectories: VirtualDirectory[]
+ // 当前正在使用的文件
+ currentFiles: VirtualFile[]
+ // 区分每一个页面的唯一id
+ id: number
+ // 当refreshKey改变时需要刷新页面，目前还没接入刷新
+ refreshKey: number
+ // 为了区分，每个虚拟页面都会分配一个color，这个color会体现在tab上
+ color: string
+ // 用于展示的title
+ _title?: string
+ // 关闭时是否需要确认（未实现）
+ exitConfirm: boolean
+ // 是否允许复制页面
+ allowCopy: boolean
- get title() {
- if (this._title) {
- return this._title
- }
- return (
- this?.currentDirectories[0]?.name ??
- this?.currentFiles[0]?.name ??
- '未命名标签'
- )
- }
+ get title() {
+ if (this._title) {
+ return this._title
+ }
+ return (
+ this?.currentDirectories[0]?.name ??
+ this?.currentFiles[0]?.name ??
+ '未命名标签'
+ )
+ }
- setTitle(title: string) {
- this._title = title
- }
+ setTitle(title: string) {
+ this._title = title
+ }
- // 切换显示状态
- switchShow() {
- this.visible = !this.visible
- }
+ // 切换显示状态
+ switchShow() {
+ this.visible = !this.visible
+ }
- // 刷新，不过好像没有用得到的时候吧
- // 事实上也不应该用得到，因为更新应该是响应式的
- refresh() {
- this.refreshKey = Math.random()
- }
+ // 刷新，不过好像没有用得到的时候吧
+ // 事实上也不应该用得到，因为更新应该是响应式的
+ refresh() {
+ this.refreshKey = Math.random()
+ }
}
export class VirtualPages {
- constructor() {
- this._views = reactive([])
- }
- _views: VirtualPage[]
+ constructor() {
+ this._views = reactive([])
+ }
+ _views: VirtualPage[]
- get length() {
- return this._views.length
- }
+ get length() {
+ return this._views.length
+ }
- /**
- * 查询一个页面位于_views中的次序
- * @param {any} id 要查询的页面的id
- * @returns {any}
- */
- getIndex(id: number) {
- for (let i in this._views) {
- if (this._views[i].id === id) {
- return parseInt(i)
- }
- }
- return -1
- }
- /**
- * 根据id得到view
- * @param {any} id 要查询的页面的id
- */
- getView(id: number) {
- for (let v of this._views) {
- if (v.id === id) {
- return v
- }
- }
- return undefined
- }
+ /**
+ * 查询一个页面位于_views中的次序
+ * @param {any} id 要查询的页面的id
+ * @returns {any}
+ */
+ getIndex(id: number) {
+ for (let i in this._views) {
+ if (this._views[i].id === id) {
+ return parseInt(i)
+ }
+ }
+ return -1
+ }
+ /**
+ * 根据id得到view
+ * @param {any} id 要查询的页面的id
+ */
+ getView(id: number) {
+ for (let v of this._views) {
+ if (v.id === id) {
+ return v
+ }
+ }
+ return undefined
+ }
- /**
- * 推入一个新的页面
- */
- push(
- component: Component,
- name: string,
- currentDirectories?: VirtualDirectory[],
- currentFiles?: VirtualFile[],
- option?: ViewsPushOption
- ) {
- const { index = this.length, VirtualPageOption } = option ?? {}
- this._views.splice(
- index,
- 0,
- reactive(
- new VirtualPage(component, {
- name,
- directories: [...(currentDirectories ?? [])],
- files: [...(currentFiles ?? [])],
- option: VirtualPageOption
- })
- )
- )
- }
- /**
- * 根据次序删除一个页面
- */
- deleteView(index: number) {
- this._views.splice(index, 1)
- }
+ /**
+ * 推入一个新的页面
+ */
+ push(
+ component: Component,
+ name: string,
+ currentDirectories?: VirtualDirectory[],
+ currentFiles?: VirtualFile[],
+ option?: ViewsPushOption
+ ) {
+ const { index = this.length, VirtualPageOption } = option ?? {}
+ this._views.splice(
+ index,
+ 0,
+ reactive(
+ new VirtualPage(component, {
+ name,
+ directories: [...(currentDirectories ?? [])],
+ files: [...(currentFiles ?? [])],
+ option: VirtualPageOption
+ })
+ )
+ )
+ }
+ /**
+ * 根据次序删除一个页面
+ */
+ deleteView(index: number) {
+ this._views.splice(index, 1)
+ }
- /**
- * 返回第一个使用此组件的页面
- */
- find(component: Component) : VirtualPage[]
- /**
- * 通过页面名查找
- */
- find(name: string) : VirtualPage[]
+ /**
+ * 返回第一个使用此组件的页面
+ */
+ find(component: Component): VirtualPage[]
+ /**
+ * 通过页面名查找
+ */
+ find(name: string): VirtualPage[]
- find(input: unknown) {
- // console.log(this)
- if (typeof input === 'string') {
- return this._views.filter(v => v.component.name === input);
- } else {
- return this._views.filter(v => v.component === input);
- }
- }
+ find(input: unknown) {
+ // console.log(this)
+ if (typeof input === 'string') {
+ return this._views.filter((v) => v.component.name === input)
+ } else {
+ return this._views.filter((v) => v.component === input)
+ }
+ }
}
diff --git a/src/components/miaoAlertTipProvider.vue b/src/components/miaoAlertTipProvider.vue
index ba6c80e..a84b816 100644
--- a/src/components/miaoAlertTipProvider.vue
+++ b/src/components/miaoAlertTipProvider.vue
@@ -1,36 +1,57 @@
-
+ ![]()
+
+
+
-
-
-
-
-
- {{
- view.title.length > 5 && 0
- ? `${view.title.substring(0, 5)}...`
- : view.title
- }}
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
+
+
+ {{
+ view.title.length > 5 && 0
+ ? `${view.title.substring(0, 5)}...`
+ : view.title
+ }}
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
-
-
+
+
+
-
-
+
-
-
-
-
diff --git a/src/components/miaoContextMenu.vue b/src/components/miaoContextMenu.vue
index 73f2466..24168fd 100644
--- a/src/components/miaoContextMenu.vue
+++ b/src/components/miaoContextMenu.vue
@@ -1,26 +1,39 @@
-
-
+
+
diff --git a/src/components/miaoPopupInput.vue b/src/components/miaoPopupInput.vue
index 53d8c93..1253003 100644
--- a/src/components/miaoPopupInput.vue
+++ b/src/components/miaoPopupInput.vue
@@ -1,27 +1,33 @@
-
-
- {{ popupConfig?.content }}
-
-
+
+
+ {{ popupConfig?.content }}
+
+
diff --git a/src/plugins/miaoCrypto/export.ts b/src/plugins/miaoCrypto/export.ts
index 477b74e..f5d9c18 100644
--- a/src/plugins/miaoCrypto/export.ts
+++ b/src/plugins/miaoCrypto/export.ts
@@ -3,23 +3,22 @@ import { registerComponentOption } from '@/class/PluginCenter'
import { PluginExportType } from '@/types/type'
const pluginConfig: registerComponentOption = {
- key: 'miaoCrypto',
- name: '文件加密',
- getComponent: async () =>
- (await import('./miaoCrypto.vue')).default,
- filter: (vDirs, vFiles) => {
- return true
- if (vDirs.length !== 0) {
- return false
- }
- if (vFiles.length !== 1) {
- return false
- }
- return vFiles[0].name.endsWith('txt')
- },
- disable: true,
+ key: 'miaoCrypto',
+ name: '文件加密',
+ getComponent: async () => (await import('./miaoCrypto.vue')).default,
+ filter: (vDirs, vFiles) => {
+ return true
+ if (vDirs.length !== 0) {
+ return false
+ }
+ if (vFiles.length !== 1) {
+ return false
+ }
+ return vFiles[0].name.endsWith('txt')
+ },
+ disable: true
}
export default pluginConfig
-export const type = PluginExportType.component
\ No newline at end of file
+export const type = PluginExportType.component
diff --git a/src/plugins/miaoCrypto/hooks/AES.ts b/src/plugins/miaoCrypto/hooks/AES.ts
index ab786b7..dead15e 100644
--- a/src/plugins/miaoCrypto/hooks/AES.ts
+++ b/src/plugins/miaoCrypto/hooks/AES.ts
@@ -8,12 +8,12 @@ import aes_worker from '../workers/aes-worker?worker'
* @returns {Uint8Array}
*/
export default (key: string, data: Uint8Array) => {
- const key_u8i = aesJs.utils.utf8.toBytes(key)
- return new Promise((resolve) => {
- const aesWorker = new aes_worker()
- aesWorker.onmessage = (event) => {
- resolve(event.data)
- }
- aesWorker.postMessage({ data, key: key_u8i })
- })
+ const key_u8i = aesJs.utils.utf8.toBytes(key)
+ return new Promise((resolve) => {
+ const aesWorker = new aes_worker()
+ aesWorker.onmessage = (event) => {
+ resolve(event.data)
+ }
+ aesWorker.postMessage({ data, key: key_u8i })
+ })
}
diff --git a/src/plugins/miaoCrypto/miaoCrypto.vue b/src/plugins/miaoCrypto/miaoCrypto.vue
index 6140fa3..4f7d368 100644
--- a/src/plugins/miaoCrypto/miaoCrypto.vue
+++ b/src/plugins/miaoCrypto/miaoCrypto.vue
@@ -1,27 +1,41 @@
-
-
+
+
diff --git a/src/plugins/miaoCrypto/workers/aes-worker.ts b/src/plugins/miaoCrypto/workers/aes-worker.ts
index e80c275..eac44e8 100644
--- a/src/plugins/miaoCrypto/workers/aes-worker.ts
+++ b/src/plugins/miaoCrypto/workers/aes-worker.ts
@@ -1,9 +1,9 @@
import aesJs from 'aes-js'
self.onmessage = async function (event) {
- const data = event.data.data as Uint8Array
- const key = event.data.key as Uint8Array
- var aesCtr = new aesJs.ModeOfOperation.ctr(key, new aesJs.Counter(7058))
- const encryptData = aesCtr.encrypt(data)
- self.postMessage(encryptData)
+ const data = event.data.data as Uint8Array
+ const key = event.data.key as Uint8Array
+ var aesCtr = new aesJs.ModeOfOperation.ctr(key, new aesJs.Counter(7058))
+ const encryptData = aesCtr.encrypt(data)
+ self.postMessage(encryptData)
}
diff --git a/src/plugins/miaoDirectory/components/miaoDirectoryBottom.vue b/src/plugins/miaoDirectory/components/miaoDirectoryBottom.vue
index 9ef540b..bd6f8f7 100644
--- a/src/plugins/miaoDirectory/components/miaoDirectoryBottom.vue
+++ b/src/plugins/miaoDirectory/components/miaoDirectoryBottom.vue
@@ -1,55 +1,57 @@
-
-
-
+
+
-
-
+
+
-
+
+
-
\ No newline at end of file
+
diff --git a/src/components/miaoDropHandler.vue b/src/components/miaoDropHandler.vue
index 46f914c..b9eb03a 100644
--- a/src/components/miaoDropHandler.vue
+++ b/src/components/miaoDropHandler.vue
@@ -1,12 +1,13 @@
-
-
+
+
diff --git a/src/components/miaoLazyDiv.vue b/src/components/miaoLazyDiv.vue
index 8f47e4b..ecf07e8 100644
--- a/src/components/miaoLazyDiv.vue
+++ b/src/components/miaoLazyDiv.vue
@@ -1,41 +1,53 @@
-
-
+
+
\ No newline at end of file
+
diff --git a/src/components/miaoMask.vue b/src/components/miaoMask.vue
index b69413e..878d173 100644
--- a/src/components/miaoMask.vue
+++ b/src/components/miaoMask.vue
@@ -1,55 +1,61 @@
-
-
-
+
+
-
-
-
-
-
-
-
-
-
-
- {{ item.name }}{{ item.status }}
-
-
+
+
+
+
+
+
+
+
+
+
+ {{ item.name }}{{ item.status }}
+
+
+
+
-
+
+
-
+const emit = defineEmits<{
+ 'add-new-item': []
+ 'pick-files-upload': []
+}>()
+
-
\ No newline at end of file
+ }
+}
+
diff --git a/src/plugins/miaoDirectory/components/miaoDirectoryItem.vue b/src/plugins/miaoDirectory/components/miaoDirectoryItem.vue
index cea02ec..e351f30 100644
--- a/src/plugins/miaoDirectory/components/miaoDirectoryItem.vue
+++ b/src/plugins/miaoDirectory/components/miaoDirectoryItem.vue
@@ -1,71 +1,103 @@
-
-
+
-
+
-
-
-
-
+
+
+
+
diff --git a/src/plugins/miaoDirectory/components/miaoDirectoryItemsContainer.vue b/src/plugins/miaoDirectory/components/miaoDirectoryItemsContainer.vue
index 4b27bf8..fd0ce95 100644
--- a/src/plugins/miaoDirectory/components/miaoDirectoryItemsContainer.vue
+++ b/src/plugins/miaoDirectory/components/miaoDirectoryItemsContainer.vue
@@ -1,46 +1,54 @@
-
-
-
+
@@ -672,12 +675,12 @@ $top-height: 30px;
$bottom-bar-height: 60px;
.miao-directory-item-container {
- position: relative;
- height: 100%;
- width: inherit;
- display: flex;
- flex-direction: column;
- overflow: hidden;
- min-width: 170px;
+ position: relative;
+ height: 100%;
+ width: inherit;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ min-width: 170px;
}
diff --git a/src/plugins/miaoIframe/export.ts b/src/plugins/miaoIframe/export.ts
index 894358c..fa73b29 100644
--- a/src/plugins/miaoIframe/export.ts
+++ b/src/plugins/miaoIframe/export.ts
@@ -2,25 +2,24 @@ import { registerComponentOption } from '@/class/PluginCenter'
import LogoChrome from '@vicons/ionicons5/es/LogoChrome'
const pluginConfig: registerComponentOption = {
- key: 'miaoIframe',
- name: '框架',
- icon: LogoChrome,
- getComponent: async () =>
- (await import('@/plugins/miaoIframe/miaoIframe.vue')).default,
- filter: (vDirs, vFiles) => {
- if (vDirs.length !== 0) {
- return false
- }
- if (vFiles.length !== 1) {
- return false
- }
- return vFiles[0].name.endsWith('html')
- },
- priority: 2
+ key: 'miaoIframe',
+ name: '框架',
+ icon: LogoChrome,
+ getComponent: async () =>
+ (await import('@/plugins/miaoIframe/miaoIframe.vue')).default,
+ filter: (vDirs, vFiles) => {
+ if (vDirs.length !== 0) {
+ return false
+ }
+ if (vFiles.length !== 1) {
+ return false
+ }
+ return vFiles[0].name.endsWith('html')
+ },
+ priority: 2
}
export default pluginConfig
-
import { PluginExportType } from '@/types/type'
-export const type = PluginExportType.component
\ No newline at end of file
+export const type = PluginExportType.component
diff --git a/src/plugins/miaoIframe/miaoIframe.vue b/src/plugins/miaoIframe/miaoIframe.vue
index d4eef28..4ac1750 100644
--- a/src/plugins/miaoIframe/miaoIframe.vue
+++ b/src/plugins/miaoIframe/miaoIframe.vue
@@ -1,52 +1,54 @@
-
-
-
-
+
+
-
-
- {{ name }}
-
-
- {{ time }}
-
-
+
+
+
+
+
+
-
-
+
+
+ {{ name }}
+
+
+
+ {{ time }}
+
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/src/plugins/miaoDirectory/components/miaoDirectoryTop.vue b/src/plugins/miaoDirectory/components/miaoDirectoryTop.vue
index 5aefc83..6ffc777 100644
--- a/src/plugins/miaoDirectory/components/miaoDirectoryTop.vue
+++ b/src/plugins/miaoDirectory/components/miaoDirectoryTop.vue
@@ -1,152 +1,176 @@
-
-
-
-
\ No newline at end of file
+
diff --git a/src/plugins/miaoDirectory/export.ts b/src/plugins/miaoDirectory/export.ts
index 5563d08..aa56667 100644
--- a/src/plugins/miaoDirectory/export.ts
+++ b/src/plugins/miaoDirectory/export.ts
@@ -3,21 +3,20 @@ import FileTray from '@vicons/ionicons5/es/FileTray'
// import MiaoDirectory from '@/plugins/miaoDirectory/miaoDirectory.vue'
const pluginConfig: registerComponentOption = {
- key: 'miaoDirectory',
- name: '文件夹',
- icon: FileTray,
- getComponent: async () =>
- (await import('@/plugins/miaoDirectory/miaoDirectory.vue')).default,
- filter: (vDirs, vFiles) => {
- if (vFiles.length) {
- return false
- }
- return vDirs.length === 1
- }
+ key: 'miaoDirectory',
+ name: '文件夹',
+ icon: FileTray,
+ getComponent: async () =>
+ (await import('@/plugins/miaoDirectory/miaoDirectory.vue')).default,
+ filter: (vDirs, vFiles) => {
+ if (vFiles.length) {
+ return false
+ }
+ return vDirs.length === 1
+ }
}
export default pluginConfig
-
import { PluginExportType } from '@/types/type'
-export const type = PluginExportType.component
\ No newline at end of file
+export const type = PluginExportType.component
diff --git a/src/plugins/miaoDirectory/export_onInit.ts b/src/plugins/miaoDirectory/export_onInit.ts
index 3f7cc73..61be2e1 100644
--- a/src/plugins/miaoDirectory/export_onInit.ts
+++ b/src/plugins/miaoDirectory/export_onInit.ts
@@ -1,37 +1,40 @@
-import { Plugin, PluginGroup } from "@/class/PluginCenter";
-import { PluginExportType } from "@/types/type";
-import { watch } from "vue";
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import { PluginExportType } from '@/types/type'
+import { watch } from 'vue'
const pluginConfig: Plugin = {
- name: "初始化完成之后打开miaoDirectory",
- filter: () => {
- return false;
- },
- disable: false,
- group: [PluginGroup.immediately],
- func: (_, __, hooks) => {
- const { getPluginCenter, getRootVDirectory, getViews } = hooks
- const views = getViews();
- const pc = getPluginCenter();
- const root = getRootVDirectory();
- setTimeout(() => {
- if (views.length === 0) {
- pc.usePlugin('miaoDirectory', [root])
- }
- watch(() => views.length, () => {
- if(views.length === 0) {
- pc.usePlugin('miaoDirectory', [root])
- }
- })
-
- pc.deregister('miaoDirectory_onInit')
- })
- },
- priority: -1
-};
+ name: '初始化完成之后打开miaoDirectory',
+ filter: () => {
+ return false
+ },
+ disable: false,
+ group: [PluginGroup.immediately],
+ func: (_, __, hooks) => {
+ const { getPluginCenter, getRootVDirectory, getViews } = hooks
+ const views = getViews()
+ const pc = getPluginCenter()
+ const root = getRootVDirectory()
+ setTimeout(() => {
+ if (views.length === 0) {
+ pc.usePlugin('miaoDirectory', [root])
+ }
+ watch(
+ () => views.length,
+ () => {
+ if (views.length === 0) {
+ pc.usePlugin('miaoDirectory', [root])
+ }
+ }
+ )
-export default pluginConfig;
+ pc.deregister('miaoDirectory_onInit')
+ })
+ },
+ priority: -1
+}
-export const type = PluginExportType.default;
+export default pluginConfig
-export const key = "miaoDirectory_onInit";
+export const type = PluginExportType.default
+
+export const key = 'miaoDirectory_onInit'
diff --git a/src/plugins/miaoDirectory/miaoDirectory.vue b/src/plugins/miaoDirectory/miaoDirectory.vue
index 20ebab3..5c346f1 100644
--- a/src/plugins/miaoDirectory/miaoDirectory.vue
+++ b/src/plugins/miaoDirectory/miaoDirectory.vue
@@ -1,50 +1,57 @@
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
+
+
-
+
+
+
+
-
-
-
+
+
+
diff --git a/src/plugins/miaoImages/export.ts b/src/plugins/miaoImages/export.ts
index ad1ae1c..568d872 100644
--- a/src/plugins/miaoImages/export.ts
+++ b/src/plugins/miaoImages/export.ts
@@ -3,47 +3,46 @@ import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
import { Image } from '@vicons/ionicons5'
const pluginConfig: registerComponentOption = {
- key: 'miaoImages',
- name: '图片浏览',
- icon: Image,
- getComponent: async () =>
- (await import('@/plugins/miaoImages/miaoImages.vue')).default,
- filter: (vDirs: VirtualDirectory[], vFiles: VirtualFile[]) => {
- if (vDirs.length === 0 && vFiles.length === 0) {
- return false
- }
- if (vDirs.length) {
- return true
- }
- for (let vf of vFiles)
- for (let end of [
- 'xbm',
- 'tif',
- 'pjp',
- 'svgz',
- 'jpg',
- 'jpeg',
- 'ico',
- 'tiff',
- 'gif',
- 'svg',
- 'jfif',
- 'webp',
- 'png',
- '.bmp',
- 'pjpeg',
- 'avif'
- ]) {
- if (vf.name.endsWith(end)) {
- return true
- }
+ key: 'miaoImages',
+ name: '图片浏览',
+ icon: Image,
+ getComponent: async () =>
+ (await import('@/plugins/miaoImages/miaoImages.vue')).default,
+ filter: (vDirs: VirtualDirectory[], vFiles: VirtualFile[]) => {
+ if (vDirs.length === 0 && vFiles.length === 0) {
+ return false
+ }
+ if (vDirs.length) {
+ return true
+ }
+ for (let vf of vFiles)
+ for (let end of [
+ 'xbm',
+ 'tif',
+ 'pjp',
+ 'svgz',
+ 'jpg',
+ 'jpeg',
+ 'ico',
+ 'tiff',
+ 'gif',
+ 'svg',
+ 'jfif',
+ 'webp',
+ 'png',
+ '.bmp',
+ 'pjpeg',
+ 'avif'
+ ]) {
+ if (vf.name.endsWith(end)) {
+ return true
}
- return false
- }
+ }
+ return false
+ }
}
export default pluginConfig
-
import { PluginExportType } from '@/types/type'
-export const type = PluginExportType.component
\ No newline at end of file
+export const type = PluginExportType.component
diff --git a/src/plugins/miaoImages/miaoImages.vue b/src/plugins/miaoImages/miaoImages.vue
index df4fd31..c0620bf 100644
--- a/src/plugins/miaoImages/miaoImages.vue
+++ b/src/plugins/miaoImages/miaoImages.vue
@@ -1,62 +1,76 @@
-
-
-
-
- ![]()
-
-
-
-
-
-
-
- {{ imageGroup.day }}
-
-
-
-
- ![]()
-
-
+ ![]()
+
+
-
-
+
+
-
-
-
-
-
- {{ collection.name }}
-
-
+
+
-
+
+
+
@@ -122,182 +163,182 @@ const emit = defineEmits<{
$ig: linear-gradient(90deg, #a1ee5e 0%, #00e3ae 100%);
.collection-info-container {
- width: 100%;
- height: 100%;
- background-color: #ffffff;
- position: absolute;
- top: 0;
- left: 0;
- display: flex;
- flex-direction: column;
+ width: 100%;
+ height: 100%;
+ background-color: #ffffff;
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: flex;
+ flex-direction: column;
- &-top {
- height: 70px;
- padding: 0 15px;
- background: $ig;
- display: flex;
- align-items: center;
+ &-top {
+ height: 70px;
+ padding: 0 15px;
+ background: $ig;
+ display: flex;
+ align-items: center;
- &-exit {
- width: 30px;
+ &-exit {
+ width: 30px;
+ aspect-ratio: 1;
+ color: #063b2a;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+
+ svg {
+ width: 25px;
aspect-ratio: 1;
- color: #063b2a;
+ transition: width 0.25s ease;
+ }
+
+ &:hover {
+ svg {
+ width: 30px;
+ }
+ }
+ }
+
+ &-title {
+ display: flex;
+ margin-left: 10px;
+ margin-right: 100px;
+ flex: 1;
+
+ &-confirm {
+ margin-left: 10px;
+ width: 32px;
+ // color: #ffffff;
+ }
+
+ span {
+ user-select: none;
+ font-size: larger;
+ }
+ }
+
+ &-delete {
+ display: flex;
+ height: 25px;
+ position: absolute;
+ right: 28px;
+ color: red;
+ user-select: none;
+ cursor: pointer;
+
+ & > span {
+ position: relative;
+ top: 3px;
+ margin-left: 3px;
+ }
+ }
+ }
+
+ &-controller {
+ height: 50px;
+ padding: 0 15px;
+ display: flex;
+ align-items: center;
+
+ &-play {
+ display: flex;
+ align-items: center;
+
+ & > div {
+ cursor: pointer;
+ }
+
+ &-icon {
+ height: 30px;
+ width: 45px;
+ background: $ig;
+ border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
- cursor: pointer;
svg {
- width: 25px;
- aspect-ratio: 1;
- transition: width 0.25s ease;
+ width: 30px;
+ height: 25px;
+ color: aliceblue;
}
+ }
- &:hover {
- svg {
- width: 30px;
- }
- }
- }
-
- &-title {
- display: flex;
- margin-left: 10px;
- margin-right: 100px;
- flex: 1;
-
- &-confirm {
- margin-left: 10px;
- width: 32px;
- // color: #ffffff;
- }
-
- span {
- user-select: none;
- font-size: larger;
- }
- }
-
- &-delete {
- display: flex;
- height: 25px;
- position: absolute;
- right: 28px;
- color: red;
+ &-text {
user-select: none;
+ margin-left: 10px;
+ font-size: larger;
+ }
+ }
+
+ &-right {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+
+ & > div {
+ margin: 0 10px;
cursor: pointer;
+ height: 25px;
+ width: 25px;
+ color: #002911;
+ }
+ }
+ }
- &>span {
- position: relative;
- top: 3px;
- margin-left: 3px;
+ &-audioList {
+ flex: 1;
+ color: #002911;
+ padding-bottom: 88px;
+
+ &-item {
+ // padding: 0 20px;
+ padding-right: 7px;
+ display: flex;
+ height: 70px;
+ align-items: center;
+
+ &-index {
+ width: 50px;
+ user-select: none;
+ font-size: 24px;
+ text-align: right;
+
+ & > div {
+ margin: auto;
+ width: fit-content;
}
- }
- }
+ }
- &-controller {
- height: 50px;
- padding: 0 15px;
- display: flex;
- align-items: center;
-
- &-play {
- display: flex;
- align-items: center;
-
- &>div {
- cursor: pointer;
- }
-
- &-icon {
- height: 30px;
- width: 45px;
- background: $ig;
- border-radius: 10px;
- display: flex;
- justify-content: center;
- align-items: center;
-
- svg {
- width: 30px;
- height: 25px;
- color: aliceblue;
- }
- }
-
- &-text {
- user-select: none;
- margin-left: 10px;
- font-size: larger;
- }
- }
-
- &-right {
+ &-info {
flex: 1;
display: flex;
- align-items: center;
- justify-content: flex-end;
+ user-select: none;
+ overflow: hidden;
- &>div {
- margin: 0 10px;
- cursor: pointer;
- height: 25px;
- width: 25px;
- color: #002911;
+ &-name {
+ overflow: hidden;
}
- }
- }
+ }
- &-audioList {
- flex: 1;
- color: #002911;
- padding-bottom: 88px;
-
- &-item {
- // padding: 0 20px;
- padding-right: 7px;
+ &-controller {
display: flex;
- height: 70px;
align-items: center;
- &-index {
- width: 50px;
- user-select: none;
- font-size: 24px;
- text-align: right;
-
- &>div {
- margin: auto;
- width: fit-content;
- }
+ &-item {
+ width: 30px;
+ cursor: pointer;
+ margin: 0 5px;
}
-
- &-info {
- flex: 1;
- display: flex;
- user-select: none;
- overflow: hidden;
-
- &-name {
- overflow: hidden;
- }
- }
-
- &-controller {
- display: flex;
- align-items: center;
-
- &-item {
- width: 30px;
- cursor: pointer;
- margin: 0 5px;
- }
- }
- }
- }
+ }
+ }
+ }
}
.isDragging {
- opacity: 0.5;
+ opacity: 0.5;
}
diff --git a/src/plugins/miaoMusicPlayer/src/components/aplayerListNew.vue b/src/plugins/miaoMusicPlayer/src/components/aplayerListNew.vue
index 7f0af3b..09ce420 100644
--- a/src/plugins/miaoMusicPlayer/src/components/aplayerListNew.vue
+++ b/src/plugins/miaoMusicPlayer/src/components/aplayerListNew.vue
@@ -1,123 +1,138 @@
-
+
+
+
+ {{ collection.name }}
+
+
-
-
+
+
+
+
+
+
-
-
-
+
-
-
-
-
+
- {{ `全部播放` }}
-
+
+ {{ `全部播放` }}
-
-
+
-
+
+
-
+
-
-
-
-
-
-
-
-
- {{ index + 1 }}
-
-
-
-
- {{ audio.name }}
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+ {{ index + 1 }}
+
+
+
+
+ {{ audio.name }}
+
+
+
+
+
-
-
-
-
-
-
+
+
+
+
+
+ -
+
-
+
+ {{ index + 1 }}
+ {{ element.name }}
+ ++ -++
+ +++ +++ +++ +++ +++ +++
-
-
-
-
- {{ index + 1 }}
- {{ element.name }}
- -- ---
- --- --- --- --- --- ---
-
-
-
+
- ![]()
-
-
-
-
-
-
-
-
- {{ item.name }}
-
-
-
-
- {{ dateStr }}
-
- {{ `共${item.audios.length}首` }}
-
-
-
+
diff --git a/src/plugins/miaoMusicPlayer/src/main.vue b/src/plugins/miaoMusicPlayer/src/main.vue
index 5085d99..25305d7 100644
--- a/src/plugins/miaoMusicPlayer/src/main.vue
+++ b/src/plugins/miaoMusicPlayer/src/main.vue
@@ -1,51 +1,56 @@
-
+ ![]()
+
+
+
+
+
+
+
+
+ {{ item.name }}
+
+
+
+
+ {{ dateStr }}
+
+ {{ `共${item.audios.length}首` }}
+
+
+
-
-
-
-
-
+
-
-
-
-
-
-
-
-
-
- 立刻创建
-
-
-
-
- 自建歌单
-
+
+
+
+
+
diff --git a/src/plugins/miaoMusicPlayer/types/ap.ts b/src/plugins/miaoMusicPlayer/types/ap.ts
index 790c99d..b0542a3 100644
--- a/src/plugins/miaoMusicPlayer/types/ap.ts
+++ b/src/plugins/miaoMusicPlayer/types/ap.ts
@@ -1,45 +1,45 @@
export type audioType = {
- url: string
- artist?: string
- cover?: string
- name: string
- theme?: string
- id?: number
- index: number
+ url: string
+ artist?: string
+ cover?: string
+ name: string
+ theme?: string
+ id?: number
+ index: number
}
type apType = {
- paused: boolean
- list: {
- audios: audioType[]
- index: number
- switch: (index: number) => void
- remove: (index: number) => void
- add: (audios: audioType[]) => void
- refreshAudioIndex: () => void
- hide: () => void
- clear: () => void
- }
- container: HTMLDivElement
- on: (event: string, callback: () => void) => void
- options: {
- audio: audioType[]
- autoplay: boolean
- volume: number
- theme: string
- mini: boolean
- fixed: boolean
- mutex: boolean
- lrcType: number
- preload: 'auto'
- loop: 'all' | 'one' | 'none'
- order: 'list' | 'random'
- listMaxHeight: string
- storageName: 'aplayer-setting'
- }
- destroy: () => {}
- pause: () => void
- play: () => void
+ paused: boolean
+ list: {
+ audios: audioType[]
+ index: number
+ switch: (index: number) => void
+ remove: (index: number) => void
+ add: (audios: audioType[]) => void
+ refreshAudioIndex: () => void
+ hide: () => void
+ clear: () => void
+ }
+ container: HTMLDivElement
+ on: (event: string, callback: () => void) => void
+ options: {
+ audio: audioType[]
+ autoplay: boolean
+ volume: number
+ theme: string
+ mini: boolean
+ fixed: boolean
+ mutex: boolean
+ lrcType: number
+ preload: 'auto'
+ loop: 'all' | 'one' | 'none'
+ order: 'list' | 'random'
+ listMaxHeight: string
+ storageName: 'aplayer-setting'
+ }
+ destroy: () => {}
+ pause: () => void
+ play: () => void
}
-export default apType
\ No newline at end of file
+export default apType
diff --git a/src/plugins/miaoMusicPlayer/types/collection.ts b/src/plugins/miaoMusicPlayer/types/collection.ts
index ac8a2ec..54cb966 100644
--- a/src/plugins/miaoMusicPlayer/types/collection.ts
+++ b/src/plugins/miaoMusicPlayer/types/collection.ts
@@ -1,14 +1,14 @@
-import type { audioType } from "./ap";
+import type { audioType } from './ap'
-export type collectionItemType = {} & audioType;
+export type collectionItemType = {} & audioType
export type collectionType = {
- id: number;
- name: string;
- intro: string;
- createTime: Date;
- coverUrl?: string;
- audios: collectionItemType[];
-};
+ id: number
+ name: string
+ intro: string
+ createTime: Date
+ coverUrl?: string
+ audios: collectionItemType[]
+}
-export default collectionType;
+export default collectionType
diff --git a/src/plugins/miaoPDF/export.ts b/src/plugins/miaoPDF/export.ts
index a5cdfb6..fc2b051 100644
--- a/src/plugins/miaoPDF/export.ts
+++ b/src/plugins/miaoPDF/export.ts
@@ -2,24 +2,23 @@ import { registerComponentOption } from '@/class/PluginCenter'
import DocumentText from '@vicons/ionicons5/es/DocumentText'
const pluginConfig: registerComponentOption = {
- key: 'miaoPDF',
- name: 'PDF浏览',
- icon: DocumentText,
- getComponent: async () =>
- (await import('@/plugins/miaoPDF/miaoPDF.vue')).default,
- filter: (vDirs, vFiles) => {
- if (vDirs.length !== 0) {
- return false
- }
- if (vFiles.length !== 1) {
- return false
- }
- return vFiles[0].name.endsWith('pdf')
- }
+ key: 'miaoPDF',
+ name: 'PDF浏览',
+ icon: DocumentText,
+ getComponent: async () =>
+ (await import('@/plugins/miaoPDF/miaoPDF.vue')).default,
+ filter: (vDirs, vFiles) => {
+ if (vDirs.length !== 0) {
+ return false
+ }
+ if (vFiles.length !== 1) {
+ return false
+ }
+ return vFiles[0].name.endsWith('pdf')
+ }
}
export default pluginConfig
-
import { PluginExportType } from '@/types/type'
-export const type = PluginExportType.component
\ No newline at end of file
+export const type = PluginExportType.component
diff --git a/src/plugins/miaoPDF/miaoPDF.vue b/src/plugins/miaoPDF/miaoPDF.vue
index fde5cb0..fbabcba 100644
--- a/src/plugins/miaoPDF/miaoPDF.vue
+++ b/src/plugins/miaoPDF/miaoPDF.vue
@@ -1,54 +1,61 @@
-
+
+
+
+
+
+
+
+
+
+ 立刻创建
+
+
+
+
+ 自建歌单
+
-
-
+
+
\ No newline at end of file
+
diff --git a/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.scss b/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.scss
index bc8d68c..23bf0d7 100644
--- a/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.scss
+++ b/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.scss
@@ -1,51 +1,55 @@
.lock-div {
- position: absolute;
- z-index: 20;
- left: 15px;
- top: 50%;
- transform: translateY(-50%);
- width: 30px;
- aspect-ratio: 1;
- cursor: pointer;
- color: #f2f2f2;
- opacity: 1;
- visibility: visible;
- transition: opacity 0.5s ease, visibility 0.5s ease, width 0.25s ease, left 0.25s ease;
- pointer-events: all !important;
- svg {
- width: inherit;
- height: inherit;
- }
- &:hover {
- width: 36px;
- left: 12px;
- }
+ position: absolute;
+ z-index: 20;
+ left: 15px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 30px;
+ aspect-ratio: 1;
+ cursor: pointer;
+ color: #f2f2f2;
+ opacity: 1;
+ visibility: visible;
+ transition:
+ opacity 0.5s ease,
+ visibility 0.5s ease,
+ width 0.25s ease,
+ left 0.25s ease;
+ pointer-events: all !important;
+ svg {
+ width: inherit;
+ height: inherit;
+ }
+ &:hover {
+ width: 36px;
+ left: 12px;
+ }
}
.xgplayer.xgplayer-inactive .lock-div {
- pointer-events: none;
- cursor: default;
- visibility: hidden;
- opacity: 0;
+ pointer-events: none;
+ cursor: default;
+ visibility: hidden;
+ opacity: 0;
}
.overlay-div {
- position: absolute;
- z-index: 10;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background-color: rgba(0, 0, 0, 0);
- display: none;
- cursor: auto;
+ position: absolute;
+ z-index: 10;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0);
+ display: none;
+ cursor: auto;
}
.xgplayer.xgplayer-inactive .overlay-div {
- pointer-events: none;
- cursor: none;
+ pointer-events: none;
+ cursor: none;
}
.xgplayer .xgplayer-locked {
- pointer-events: none;
-}
\ No newline at end of file
+ pointer-events: none;
+}
diff --git a/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.ts b/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.ts
index 9f0dcf2..ab3d0de 100644
--- a/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.ts
+++ b/src/plugins/miaoVideoPlayer/playerPlugin/lockScreen/lockScreen.ts
@@ -1,104 +1,125 @@
-import { BasePlugin } from "xgplayer";
-import "./lockScreen.scss";
-import MobilePlugin from "xgplayer/es/plugins/mobile";
+import { BasePlugin } from 'xgplayer'
+import './lockScreen.scss'
+import MobilePlugin from 'xgplayer/es/plugins/mobile'
export default class LockPlugin extends BasePlugin {
- static get pluginName() {
- return "lockPlugin";
- }
+ static get pluginName() {
+ return 'lockPlugin'
+ }
- private locked: boolean;
- private lockDiv: HTMLDivElement = document.createElement("div");
- private overlayDiv: HTMLDivElement = document.createElement("div");
+ private locked: boolean
+ private lockDiv: HTMLDivElement = document.createElement('div')
+ private overlayDiv: HTMLDivElement = document.createElement('div')
- private lockOpenSVG: string = `
+ private lockOpenSVG: string = `
`;
+ `
- private lockClosedSVG: string = `
+ private lockClosedSVG: string = `
`;
+ `
- constructor(args: any) {
- super(args);
- this.locked = false;
- }
+ constructor(args: any) {
+ super(args)
+ this.locked = false
+ }
- afterCreate() {
- this.initLockDiv();
- this.initOverlayDiv();
- this.bindEvents();
- }
+ afterCreate() {
+ this.initLockDiv()
+ this.initOverlayDiv()
+ this.bindEvents()
+ }
- private initLockDiv() {
- this.lockDiv.innerHTML = this.lockClosedSVG;
- this.lockDiv.className = "lock-div";
- this.player.root !== null && this.player.root.appendChild(this.lockDiv);
- }
+ private initLockDiv() {
+ this.lockDiv.innerHTML = this.lockClosedSVG
+ this.lockDiv.className = 'lock-div'
+ this.player.root !== null && this.player.root.appendChild(this.lockDiv)
+ }
- private initOverlayDiv() {
- this.overlayDiv.className = "overlay-div";
- this.player.root !== null && this.player.root.appendChild(this.overlayDiv);
- this.overlayDiv.addEventListener('mousedown', (e) => {
- e.preventDefault();
- });
- this.overlayDiv.addEventListener('mousemove', (e) => {
- e.preventDefault();
- });
- }
+ private initOverlayDiv() {
+ this.overlayDiv.className = 'overlay-div'
+ this.player.root !== null && this.player.root.appendChild(this.overlayDiv)
+ this.overlayDiv.addEventListener('mousedown', (e) => {
+ e.preventDefault()
+ })
+ this.overlayDiv.addEventListener('mousemove', (e) => {
+ e.preventDefault()
+ })
+ }
- private bindEvents() {
- this.lockDiv!.addEventListener("click", this.toggleLock.bind(this));
- this.player.root !== null && this.player.root.addEventListener("click", this.preventClick.bind(this), true);
- this.player.usePluginHooks("progress", "dragstart", () => {
- if (this.locked) {
- return false;
- }
- return true;
- });
- // 阻止进度条默认行为
- for(const event of ['dragstart', 'drag', 'dragend']) {
- this.player.usePluginHooks("progress", event, () => {
- if (this.locked) {
- return false;
- }
- return true;
- });
- }
- }
+ private bindEvents() {
+ this.lockDiv!.addEventListener('click', this.toggleLock.bind(this))
+ this.player.root !== null &&
+ this.player.root.addEventListener(
+ 'click',
+ this.preventClick.bind(this),
+ true
+ )
+ this.player.usePluginHooks('progress', 'dragstart', () => {
+ if (this.locked) {
+ return false
+ }
+ return true
+ })
+ // 阻止进度条默认行为
+ for (const event of ['dragstart', 'drag', 'dragend']) {
+ this.player.usePluginHooks('progress', event, () => {
+ if (this.locked) {
+ return false
+ }
+ return true
+ })
+ }
+ }
- private toggleLock() {
- const mobile = this.getPlugin('mobile') as MobilePlugin | undefined
- // mobile?.disableGesture()
- if (this.lockDiv && this.overlayDiv) {
- this.locked = !this.locked;
- this.lockDiv.innerHTML = this.locked ? this.lockOpenSVG : this.lockClosedSVG;
- this.overlayDiv.style.display = this.locked ? "block" : "none";
- this.player.controls && (this.locked ? this.player.controls.hide() : this.player.controls.show());
- this.player.root !== null && this.player.root.classList.toggle("xgplayer-locked", this.locked);
- this.locked ? mobile?.disableGesture() : mobile?.enableGesture()
- }
- }
+ private toggleLock() {
+ const mobile = this.getPlugin('mobile') as MobilePlugin | undefined
+ // mobile?.disableGesture()
+ if (this.lockDiv && this.overlayDiv) {
+ this.locked = !this.locked
+ this.lockDiv.innerHTML = this.locked
+ ? this.lockOpenSVG
+ : this.lockClosedSVG
+ this.overlayDiv.style.display = this.locked ? 'block' : 'none'
+ this.player.controls &&
+ (this.locked
+ ? this.player.controls.hide()
+ : this.player.controls.show())
+ this.player.root !== null &&
+ this.player.root.classList.toggle('xgplayer-locked', this.locked)
+ this.locked ? mobile?.disableGesture() : mobile?.enableGesture()
+ }
+ }
- private preventClick(event: MouseEvent) {
- if (this.locked && event.target instanceof HTMLElement && !event.target.classList.contains("lock-div")) {
- event.stopPropagation();
- event.preventDefault();
- }
- }
+ private preventClick(event: MouseEvent) {
+ if (
+ this.locked &&
+ event.target instanceof HTMLElement &&
+ !event.target.classList.contains('lock-div')
+ ) {
+ event.stopPropagation()
+ event.preventDefault()
+ }
+ }
- destroy() {
- if (this.lockDiv) {
- this.lockDiv.removeEventListener("click", this.toggleLock.bind(this));
- this.player.root !== null && this.player.root.removeEventListener("click", this.preventClick.bind(this), true);
- this.player.root !== null && this.player.root.removeChild(this.lockDiv);
- }
- if (this.overlayDiv) {
- this.player.root !== null && this.player.root.removeChild(this.overlayDiv);
- }
- }
+ destroy() {
+ if (this.lockDiv) {
+ this.lockDiv.removeEventListener('click', this.toggleLock.bind(this))
+ this.player.root !== null &&
+ this.player.root.removeEventListener(
+ 'click',
+ this.preventClick.bind(this),
+ true
+ )
+ this.player.root !== null && this.player.root.removeChild(this.lockDiv)
+ }
+ if (this.overlayDiv) {
+ this.player.root !== null &&
+ this.player.root.removeChild(this.overlayDiv)
+ }
+ }
}
diff --git a/src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/fakeRoot.vue b/src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/fakeRoot.vue
index 528c0ff..7af6878 100644
--- a/src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/fakeRoot.vue
+++ b/src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/fakeRoot.vue
@@ -1,36 +1,35 @@
-
-
+
+
\ No newline at end of file
+
diff --git a/src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame.ts b/src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame.ts
index f0e7b9b..3a2fba9 100644
--- a/src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame.ts
+++ b/src/plugins/miaoVideoPlayer/playerPlugin/xgplayer-vue-frame/xgplayer-vue-frame.ts
@@ -1,35 +1,39 @@
-import { App, Component, createApp } from "vue";
-import { BasePlugin } from "xgplayer";
-import fakeApp from "./fakeRoot.vue";
+import { App, Component, createApp } from 'vue'
+import { BasePlugin } from 'xgplayer'
+import fakeApp from './fakeRoot.vue'
const useXGPlayerVueFrame = (App: Component) => {
- return class XGPlayerVueFrame extends BasePlugin {
- static get pluginName() {
- return "xgplayerVueFrame";
- }
+ return class XGPlayerVueFrame extends BasePlugin {
+ static get pluginName() {
+ return 'xgplayerVueFrame'
+ }
- private root: HTMLDivElement | null = null;
- private app: App | null = null;
+ private root: HTMLDivElement | null = null
+ private app: App | null = null
- constructor(args: any) {
- super(args);
- }
+ constructor(args: any) {
+ super(args)
+ }
- afterCreate() {
- this.createVueFrame();
- }
+ afterCreate() {
+ this.createVueFrame()
+ }
- private createVueFrame() {
- this.root = document.createElement("div");
- this.app = createApp(fakeApp, { player: this.player, root: this.root, App })
- this.app.mount(this.root);
- // this.app.mount(this.player.root);
- }
+ private createVueFrame() {
+ this.root = document.createElement('div')
+ this.app = createApp(fakeApp, {
+ player: this.player,
+ root: this.root,
+ App
+ })
+ this.app.mount(this.root)
+ // this.app.mount(this.player.root);
+ }
- destroy() {
- this.app?.unmount()
- }
- };
-};
+ destroy() {
+ this.app?.unmount()
+ }
+ }
+}
-export default useXGPlayerVueFrame;
+export default useXGPlayerVueFrame
diff --git a/src/plugins/miaoVideoPlayer/src/XGPlayerVuePluginRoot.vue b/src/plugins/miaoVideoPlayer/src/XGPlayerVuePluginRoot.vue
index 3d937ef..28314e2 100644
--- a/src/plugins/miaoVideoPlayer/src/XGPlayerVuePluginRoot.vue
+++ b/src/plugins/miaoVideoPlayer/src/XGPlayerVuePluginRoot.vue
@@ -1,33 +1,32 @@
-
+
\ No newline at end of file
+
diff --git a/src/plugins/miaoVideoPlayer/style/xgplayer.scss b/src/plugins/miaoVideoPlayer/style/xgplayer.scss
index c45de27..ebf03b1 100644
--- a/src/plugins/miaoVideoPlayer/style/xgplayer.scss
+++ b/src/plugins/miaoVideoPlayer/style/xgplayer.scss
@@ -2,684 +2,701 @@
.xgplayer.not-allow-autoplay .xgplayer-controls,
.xgplayer.xgplayer-nostart .xgplayer-controls,
.xgplayer.xgplayer-inactive .controls-autohide {
- pointer-events: none;
- visibility: hidden;
- cursor: default;
- opacity: 0;
+ pointer-events: none;
+ visibility: hidden;
+ cursor: default;
+ opacity: 0;
}
.xgplayer.not-allow-autoplay .xgplayer-controls-initshow,
.xgplayer.xgplayer-nostart .xgplayer-controls-initshow {
- pointer-events: auto;
- visibility: visible;
- opacity: 1;
+ pointer-events: auto;
+ visibility: visible;
+ opacity: 1;
}
.xgplayer .xgplayer-controls {
- display: block;
- position: absolute;
- visibility: visible;
- height: 48px;
- left: 0;
- right: 0;
- bottom: 0;
- opacity: 1;
- z-index: 10;
- background-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.37), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75));
- transition: opacity 0.5s ease, visibility 0.5s ease;
- cursor: default;
+ display: block;
+ position: absolute;
+ visibility: visible;
+ height: 48px;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ opacity: 1;
+ z-index: 10;
+ background-image: linear-gradient(
+ 180deg,
+ transparent,
+ rgba(0, 0, 0, 0.37),
+ rgba(0, 0, 0, 0.75),
+ rgba(0, 0, 0, 0.75)
+ );
+ transition:
+ opacity 0.5s ease,
+ visibility 0.5s ease;
+ cursor: default;
}
.xgplayer .xgplayer-controls.show {
- display: block;
- opacity: 1;
- visibility: visible;
- pointer-events: auto;
+ display: block;
+ opacity: 1;
+ visibility: visible;
+ pointer-events: auto;
}
.xgplayer .xg-inner-controls {
- position: absolute;
- height: 40px;
- bottom: 0;
- justify-content: space-between;
- display: flex;
+ position: absolute;
+ height: 40px;
+ bottom: 0;
+ justify-content: space-between;
+ display: flex;
}
.xgplayer .xg-left-grid,
.xgplayer .xg-right-grid {
- position: relative;
- display: flex;
- flex-wrap: wrap;
- flex-shrink: 1;
- height: 100%;
- z-index: 1;
+ position: relative;
+ display: flex;
+ flex-wrap: wrap;
+ flex-shrink: 1;
+ height: 100%;
+ z-index: 1;
}
.xgplayer .xg-right-grid {
- flex-direction: row-reverse;
+ flex-direction: row-reverse;
}
.xgplayer .xg-right-grid > :first-child {
- margin-right: 0;
+ margin-right: 0;
}
.xgplayer .xg-right-grid xg-icon {
- margin-left: 0;
+ margin-left: 0;
}
.xgplayer .xg-left-grid > :first-child {
- margin-left: 0;
+ margin-left: 0;
}
.xgplayer .xg-left-grid xg-icon {
- margin-right: 0;
+ margin-right: 0;
}
.xgplayer .xg-center-grid {
- display: block;
- position: absolute;
- left: 0;
- right: 0;
- outline: none;
- top: -20px;
- padding: 5px 0;
- text-align: center;
+ display: block;
+ position: absolute;
+ left: 0;
+ right: 0;
+ outline: none;
+ top: -20px;
+ padding: 5px 0;
+ text-align: center;
}
.xgplayer .flex-controls .xg-inner-controls {
- justify-content: space-around;
- display: flex;
- bottom: 8px;
+ justify-content: space-around;
+ display: flex;
+ bottom: 8px;
}
.xgplayer .flex-controls .xg-center-grid {
- display: flex;
- flex: 1;
- position: relative;
- top: 0;
- height: 100%;
- justify-content: space-between;
- align-items: center;
- left: 0;
- right: 0;
- padding: 0 16px;
+ display: flex;
+ flex: 1;
+ position: relative;
+ top: 0;
+ height: 100%;
+ justify-content: space-between;
+ align-items: center;
+ left: 0;
+ right: 0;
+ padding: 0 16px;
}
.xgplayer.xgplayer-mobile .xg-center-grid {
- z-index: 2;
+ z-index: 2;
}
.xgplayer.xgplayer-mobile .flex-controls .xg-center-grid {
- padding: 0 8px;
+ padding: 0 8px;
}
.xgplayer .bottom-controls .xg-center-grid {
- top: 20px;
- padding: 0;
+ top: 20px;
+ padding: 0;
}
.xgplayer .bottom-controls .xg-left-grid,
.xgplayer .bottom-controls .xg-right-grid {
- bottom: 10px;
+ bottom: 10px;
}
.xgplayer .mini-controls {
- background-image: none;
+ background-image: none;
}
.xgplayer .mini-controls .xg-inner-controls {
- bottom: 0;
- left: 0;
- right: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
}
.xgplayer .mini-controls .xg-center-grid {
- bottom: -28px;
- top: auto;
- padding: 0;
+ bottom: -28px;
+ top: auto;
+ padding: 0;
}
.xgplayer .mini-controls .xg-left-grid,
.xgplayer .mini-controls .xg-right-grid {
- display: none;
+ display: none;
}
.xgplayer .controls-follow {
- bottom: 70px;
- transition: bottom 0.3s ease;
+ bottom: 70px;
+ transition: bottom 0.3s ease;
}
.xgplayer.flex-controls .controls-follow {
- bottom: 45px;
+ bottom: 45px;
}
.xgplayer.xgplayer-inactive .controls-follow,
.xgplayer.no-controls .controls-follow,
.xgplayer.mini-controls .controls-follow {
- bottom: 10px;
+ bottom: 10px;
}
.xgplayer-fullscreen-parent {
- position: fixed;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- z-index: 9999;
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 9999;
}
.xgplayer-fullscreen-parent .xgplayer.xgplayer-is-cssfullscreen,
.xgplayer-fullscreen-parent .xgplayer.xgplayer-is-fullscreen {
- z-index: 10;
- position: absolute;
+ z-index: 10;
+ position: absolute;
}
.xgplayer-rotate-parent {
- position: fixed;
- top: 0;
- left: 100%;
- bottom: 0;
- right: 0;
- width: 100vh;
- height: 100vw;
- z-index: 9999;
- transform-origin: top left;
- transform: rotate(90deg);
+ position: fixed;
+ top: 0;
+ left: 100%;
+ bottom: 0;
+ right: 0;
+ width: 100vh;
+ height: 100vw;
+ z-index: 9999;
+ transform-origin: top left;
+ transform: rotate(90deg);
}
.xgplayer-rotate-parent .xgplayer.xgplayer-rotate-fullscreen {
- position: absolute;
- top: 0;
- left: 0;
- z-index: 10;
- margin: 0;
- padding: 0;
- width: 100%;
- height: 100%;
- transform: rotate(0);
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 10;
+ margin: 0;
+ padding: 0;
+ width: 100%;
+ height: 100%;
+ transform: rotate(0);
}
.xgplayer-rotate-parent .xgplayer-mobile video {
- z-index: -1;
+ z-index: -1;
}
.xgplayer {
- position: relative;
- width: 100%;
- height: 100%;
- overflow: hidden;
- font-family: PingFang SC, Helvetica Neue, Helvetica, STHeiTi, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif;
- font-size: 14px;
- font-weight: 400;
- background: #000;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- cursor: pointer;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ font-family:
+ PingFang SC,
+ Helvetica Neue,
+ Helvetica,
+ STHeiTi,
+ Microsoft YaHei,
+ WenQuanYi Micro Hei,
+ sans-serif;
+ font-size: 14px;
+ font-weight: 400;
+ background: #000;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ cursor: pointer;
}
.xgplayer * {
- margin: 0;
- padding: 0;
- border: 0;
- vertical-align: baseline;
- white-space: normal;
- word-wrap: normal;
- overflow-wrap: normal;
+ margin: 0;
+ padding: 0;
+ border: 0;
+ vertical-align: baseline;
+ white-space: normal;
+ word-wrap: normal;
+ overflow-wrap: normal;
}
.xgplayer ul,
.xgplayer li {
- list-style: none;
+ list-style: none;
}
.xgplayer .xgplayer-none {
- display: none;
+ display: none;
}
.xgplayer.xgplayer-is-fullscreen {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- z-index: 9999;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ z-index: 9999;
}
.xgplayer.xgplayer-is-cssfullscreen {
- position: fixed;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- z-index: 9999;
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 9999;
}
.xgplayer.xgplayer-rotate-fullscreen {
- position: fixed;
- top: 0;
- left: 100%;
- bottom: 0;
- right: 0;
- width: 100vh;
- height: 100vw;
- transform-origin: top left;
- transform: rotate(90deg);
- z-index: 9999;
+ position: fixed;
+ top: 0;
+ left: 100%;
+ bottom: 0;
+ right: 0;
+ width: 100vh;
+ height: 100vw;
+ transform-origin: top left;
+ transform: rotate(90deg);
+ z-index: 9999;
}
.xgplayer.xgplayer-rotate-fullscreen.xgplayer-mobile video {
- z-index: -1;
+ z-index: -1;
}
.xgplayer xg-video-container.xg-video-container {
- position: absolute;
- top: 0;
- bottom: 48px;
- display: block;
- width: 100%;
+ position: absolute;
+ top: 0;
+ bottom: 48px;
+ display: block;
+ width: 100%;
}
.xgplayer video {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- outline: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ outline: none;
}
-.xgplayer[data-xgfill="contain"] video {
- -o-object-fit: contain;
- object-fit: contain;
+.xgplayer[data-xgfill='contain'] video {
+ -o-object-fit: contain;
+ object-fit: contain;
}
-.xgplayer[data-xgfill="cover"] video {
- -o-object-fit: cover;
- object-fit: cover;
+.xgplayer[data-xgfill='cover'] video {
+ -o-object-fit: cover;
+ object-fit: cover;
}
-.xgplayer[data-xgfill="fill"] video {
- -o-object-fit: fill;
- object-fit: fill;
+.xgplayer[data-xgfill='fill'] video {
+ -o-object-fit: fill;
+ object-fit: fill;
}
.xgplayer .xg-pos {
- left: 10px;
- right: 10px;
+ left: 10px;
+ right: 10px;
}
.xgplayer .xg-margin {
- margin-left: 16px;
- margin-right: 16px;
+ margin-left: 16px;
+ margin-right: 16px;
}
.xgplayer .xg-bottom {
- bottom: 0;
+ bottom: 0;
}
.xgplayer .btn-text {
- position: relative;
- top: 50%;
- height: 24px;
- font-size: 13px;
- text-align: center;
+ position: relative;
+ top: 50%;
+ height: 24px;
+ font-size: 13px;
+ text-align: center;
}
.xgplayer .btn-text span {
- display: inline-block;
- min-width: 52px;
- height: 24px;
- line-height: 24px;
- background: rgba(0, 0, 0, 0.38);
- border-radius: 12px;
+ display: inline-block;
+ min-width: 52px;
+ height: 24px;
+ line-height: 24px;
+ background: rgba(0, 0, 0, 0.38);
+ border-radius: 12px;
}
.xgplayer xg-icon {
- position: relative;
- box-sizing: border-box;
- height: 40px;
- margin-left: 16px;
- margin-right: 16px;
- cursor: pointer;
- color: #fffc;
- fill: #fff;
+ position: relative;
+ box-sizing: border-box;
+ height: 40px;
+ margin-left: 16px;
+ margin-right: 16px;
+ cursor: pointer;
+ color: #fffc;
+ fill: #fff;
}
.xgplayer xg-icon.xg-icon-disable {
- cursor: not-allowed;
+ cursor: not-allowed;
}
.xgplayer xg-icon .xg-tips {
- top: -30px;
- left: 50%;
- transform: translate(-50%);
+ top: -30px;
+ left: 50%;
+ transform: translate(-50%);
}
.xgplayer xg-icon:active .xg-tips,
.xgplayer xg-icon:hover .xg-tips {
- display: block;
+ display: block;
}
.xgplayer xg-icon:active .xg-tips.hide,
.xgplayer xg-icon:hover .xg-tips.hide {
- display: none;
+ display: none;
}
.xgplayer xg-icon .xgplayer-icon {
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- cursor: pointer;
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ cursor: pointer;
}
.xgplayer xg-icon .xg-icon-disable {
- cursor: not-allowed;
+ cursor: not-allowed;
}
.xgplayer xg-icon .xg-img {
- width: 100%;
+ width: 100%;
}
.xgplayer xg-icon svg,
.xgplayer xg-icon img {
- height: 100%;
- display: block;
+ height: 100%;
+ display: block;
}
.xgplayer xg-bar {
- display: block;
+ display: block;
}
.xgplayer.xgplayer-inactive xg-bar,
.xgplayer.xgplayer-mini xg-bar {
- display: none;
+ display: none;
}
.xgplayer.xgplayer-inactive .xg-top-bar {
- display: flex;
+ display: flex;
}
.xgplayer.xgplayer-inactive .xg-top-bar.top-bar-autohide {
- display: none;
+ display: none;
}
.xgplayer .xg-top-bar {
- position: absolute;
- z-index: 10;
- top: 0;
- padding: 0 16px;
- display: flex;
- height: 50px;
+ position: absolute;
+ z-index: 10;
+ top: 0;
+ padding: 0 16px;
+ display: flex;
+ height: 50px;
}
.xgplayer .xg-top-bar xg-icon {
- position: relative;
- top: 10px;
- left: 0;
- width: 34px;
- margin-top: 0;
+ position: relative;
+ top: 10px;
+ left: 0;
+ width: 34px;
+ margin-top: 0;
}
.xgplayer .xg-top-bar xg-icon:first-child {
- margin-left: 0;
+ margin-left: 0;
}
.xgplayer .xg-left-bar,
.xgplayer .xg-right-bar {
- position: absolute;
- z-index: 9;
- top: 50px;
- bottom: 50px;
- width: 50px;
+ position: absolute;
+ z-index: 9;
+ top: 50px;
+ bottom: 50px;
+ width: 50px;
}
.xgplayer .xg-left-bar {
- left: 0;
+ left: 0;
}
.xgplayer .xg-right-bar {
- right: 0;
+ right: 0;
}
.xgplayer .xg-tips {
- display: none;
- position: absolute;
- padding: 4px 6px;
- background: rgba(0, 0, 0, 0.54);
- border-radius: 4px;
- font-size: 12px;
- color: #fff;
- text-align: center;
- white-space: nowrap;
- opacity: 0.85;
+ display: none;
+ position: absolute;
+ padding: 4px 6px;
+ background: rgba(0, 0, 0, 0.54);
+ border-radius: 4px;
+ font-size: 12px;
+ color: #fff;
+ text-align: center;
+ white-space: nowrap;
+ opacity: 0.85;
}
.xgplayer .xg-margin {
- left: 0px;
- right: 0px;
+ left: 0px;
+ right: 0px;
}
.xgplayer-mobile {
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.xgplayer-mobile * {
- text-decoration: none;
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ text-decoration: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.xgplayer-mobile.xgplayer-rotate-fullscreen .xg-top-bar,
.xgplayer-mobile.xgplayer-rotate-fullscreen .xg-pos {
- left: 6%;
- right: 6%;
+ left: 6%;
+ right: 6%;
}
.xgplayer-mobile xg-icon:hover .xg-tips {
- display: none;
+ display: none;
}
.xg-list-slide-scroll::-webkit-scrollbar-track {
- background-color: transparent;
- display: none;
+ background-color: transparent;
+ display: none;
}
.xg-list-slide-scroll:hover::-webkit-scrollbar-track {
- display: block;
+ display: block;
}
.xg-list-slide-scroll::-webkit-scrollbar {
- -webkit-appearance: none;
- appearance: none;
- background: rgba(0, 0, 0, 0);
- height: 4px;
- width: 4px;
+ -webkit-appearance: none;
+ appearance: none;
+ background: rgba(0, 0, 0, 0);
+ height: 4px;
+ width: 4px;
}
.xg-list-slide-scroll::-webkit-scrollbar-corner {
- background: transparent;
- display: none;
+ background: transparent;
+ display: none;
}
.xg-list-slide-scroll::-webkit-scrollbar-thumb {
- background: hsla(0, 0%, 100%, 0.5);
- border-radius: 3px;
- display: none;
- width: 4px;
+ background: hsla(0, 0%, 100%, 0.5);
+ border-radius: 3px;
+ display: none;
+ width: 4px;
}
.xg-list-slide-scroll:hover::-webkit-scrollbar-thumb {
- display: block;
+ display: block;
}
@media only screen and (max-width: 480px) {
- .xgplayer-mobile xg-icon {
- margin-right: 10px;
- margin-left: 10px;
- }
- .xgplayer-mobile .xg-top-bar {
- left: 10px;
- right: 10px;
- }
+ .xgplayer-mobile xg-icon {
+ margin-right: 10px;
+ margin-left: 10px;
+ }
+ .xgplayer-mobile .xg-top-bar {
+ left: 10px;
+ right: 10px;
+ }
}
@media screen and (orientation: portrait) {
- .xgplayer-mobile.xgplayer-is-fullscreen .xgplayer-controls,
- .xgplayer-mobile.xgplayer-is-cssfullscreen .xgplayer-controls {
- bottom: 34px;
- bottom: constant(safe-area-inset-bottom);
- bottom: env(safe-area-inset-bottom);
- }
- .xgplayer-mobile.xgplayer-is-fullscreen .xg-top-bar,
- .xgplayer-mobile.xgplayer-is-cssfullscreen .xg-top-bar {
- top: 34px;
- top: constant(safe-area-inset-top);
- top: env(safe-area-inset-top);
- }
+ .xgplayer-mobile.xgplayer-is-fullscreen .xgplayer-controls,
+ .xgplayer-mobile.xgplayer-is-cssfullscreen .xgplayer-controls {
+ bottom: 34px;
+ bottom: constant(safe-area-inset-bottom);
+ bottom: env(safe-area-inset-bottom);
+ }
+ .xgplayer-mobile.xgplayer-is-fullscreen .xg-top-bar,
+ .xgplayer-mobile.xgplayer-is-cssfullscreen .xg-top-bar {
+ top: 34px;
+ top: constant(safe-area-inset-top);
+ top: env(safe-area-inset-top);
+ }
}
@media only screen and (orientation: landscape) {
- .xgplayer-mobile.xgplayer-is-fullscreen .xg-top-bar,
- .xgplayer-mobile.xgplayer-is-fullscreen .xg-pos {
- left: 6%;
- right: 6%;
- }
- .xgplayer-mobile.xgplayer-rotate-fullscreen {
- left: 0;
- width: 100vw;
- height: 100vh;
- transform: rotate(0);
- }
+ .xgplayer-mobile.xgplayer-is-fullscreen .xg-top-bar,
+ .xgplayer-mobile.xgplayer-is-fullscreen .xg-pos {
+ left: 6%;
+ right: 6%;
+ }
+ .xgplayer-mobile.xgplayer-rotate-fullscreen {
+ left: 0;
+ width: 100vw;
+ height: 100vh;
+ transform: rotate(0);
+ }
}
.xgplayer .xgplayer-screen-container {
- display: block;
- width: 100%;
+ display: block;
+ width: 100%;
}
.xgplayer .xg-options-icon {
- display: none;
- cursor: pointer;
+ display: none;
+ cursor: pointer;
}
.xgplayer .xg-options-icon.show {
- display: block;
+ display: block;
}
@keyframes xg_right_options_active {
- 0% {
- transform: translate(50%);
- }
- to {
- transform: translate(-50%);
- }
+ 0% {
+ transform: translate(50%);
+ }
+ to {
+ transform: translate(-50%);
+ }
}
@keyframes xg_right_options_hide {
- 0% {
- transform: translate(-50%);
- }
- to {
- transform: translate(50%);
- }
+ 0% {
+ transform: translate(-50%);
+ }
+ to {
+ transform: translate(50%);
+ }
}
@keyframes xg_left_options_active {
- 0% {
- transform: translate(-50%);
- }
- to {
- transform: translate(50%);
- }
+ 0% {
+ transform: translate(-50%);
+ }
+ to {
+ transform: translate(50%);
+ }
}
@keyframes xg_left_options_hide {
- 0% {
- transform: translate(50%);
- }
- to {
- transform: translate(-50%);
- }
+ 0% {
+ transform: translate(50%);
+ }
+ to {
+ transform: translate(-50%);
+ }
}
.xgplayer .xg-options-list {
- display: none;
- position: absolute;
- z-index: 5;
- width: 78px;
- right: 50%;
- bottom: 100%;
- background: rgba(0, 0, 0, 0.54);
- border-radius: 1px;
- transform: translate(50%);
- cursor: pointer;
- overflow: auto;
- height: 0;
- opacity: 0.85;
- font-size: 14px;
- color: #fffc;
+ display: none;
+ position: absolute;
+ z-index: 5;
+ width: 78px;
+ right: 50%;
+ bottom: 100%;
+ background: rgba(0, 0, 0, 0.54);
+ border-radius: 1px;
+ transform: translate(50%);
+ cursor: pointer;
+ overflow: auto;
+ height: 0;
+ opacity: 0.85;
+ font-size: 14px;
+ color: #fffc;
}
.xgplayer .xg-options-list li {
- height: 20px;
- line-height: 20px;
- position: relative;
- padding: 4px 0;
- text-align: center;
- color: #fffc;
+ height: 20px;
+ line-height: 20px;
+ position: relative;
+ padding: 4px 0;
+ text-align: center;
+ color: #fffc;
}
.xgplayer .xg-options-list li:hover,
.xgplayer .xg-options-list li.selected {
- color: #13c16d;
- opacity: 1;
+ color: #13c16d;
+ opacity: 1;
}
.xgplayer .xg-options-list li:nth-child(1) {
- position: relative;
- margin-top: 12px;
+ position: relative;
+ margin-top: 12px;
}
.xgplayer .xg-options-list li:last-child {
- position: relative;
- margin-bottom: 12px;
+ position: relative;
+ margin-bottom: 12px;
}
.xgplayer .xg-options-list:hover {
- opacity: 1;
+ opacity: 1;
}
.xgplayer .xg-options-list.active {
- display: block;
- height: auto;
+ display: block;
+ height: auto;
}
.xgplayer .xg-options-list.xg-side-list {
- width: 20%;
- height: 100%;
- bottom: 0;
- background: rgba(0, 0, 0, 0.9);
- display: flex;
- flex-direction: column;
- box-sizing: border-box;
+ width: 20%;
+ height: 100%;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.9);
+ display: flex;
+ flex-direction: column;
+ box-sizing: border-box;
}
.xgplayer .xg-options-list.xg-side-list li {
- flex: 1;
- width: 100%;
- padding: 0;
- position: relative;
+ flex: 1;
+ width: 100%;
+ padding: 0;
+ position: relative;
}
.xgplayer .xg-options-list.xg-side-list li span {
- display: block;
- position: relative;
- top: 50%;
- transform: translateY(-50%);
- pointer-events: none;
+ display: block;
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ pointer-events: none;
}
.xgplayer .xg-options-list.xg-side-list li:nth-child(1) {
- margin-top: 20px;
+ margin-top: 20px;
}
.xgplayer .xg-options-list.xg-side-list li:last-child {
- margin-bottom: 20px;
+ margin-bottom: 20px;
}
.xgplayer .xg-options-list.xg-right-side {
- right: -10.5%;
+ right: -10.5%;
}
.xgplayer .xg-options-list.xg-right-side.active {
- height: 100%;
- animation: xg_right_options_active 0.2s ease-out forwards;
+ height: 100%;
+ animation: xg_right_options_active 0.2s ease-out forwards;
}
.xgplayer .xg-options-list.xg-right-side.hide {
- height: 100%;
- animation: xg_right_options_hide 0.2s ease-in forwards;
+ height: 100%;
+ animation: xg_right_options_hide 0.2s ease-in forwards;
}
.xgplayer .xg-options-list.xg-left-side {
- left: -10.5%;
- transform: translate(-50%);
+ left: -10.5%;
+ transform: translate(-50%);
}
.xgplayer .xg-options-list.xg-left-side.active {
- height: 100%;
- animation: xg_left_options_active 0.2s ease-out forwards;
+ height: 100%;
+ animation: xg_left_options_active 0.2s ease-out forwards;
}
.xgplayer .xg-options-list.xg-left-side.hide {
- height: 100%;
- animation: xg_left_options_hide 0.2s ease-in forwards;
+ height: 100%;
+ animation: xg_left_options_hide 0.2s ease-in forwards;
}
@media only screen and (max-width: 480px) {
- .xgplayer-mobile .xg-options-icon.portrait {
- display: none;
- }
- .xgplayer-mobile .xg-options-list li:hover {
- color: #fffc;
- }
- .xgplayer-mobile .xg-options-list li.selected {
- color: #13c16d;
- }
+ .xgplayer-mobile .xg-options-icon.portrait {
+ display: none;
+ }
+ .xgplayer-mobile .xg-options-list li:hover {
+ color: #fffc;
+ }
+ .xgplayer-mobile .xg-options-list li.selected {
+ color: #13c16d;
+ }
}
.xgplayer xg-thumbnail {
- display: block;
+ display: block;
}
.xgplayer-replay {
- display: none;
+ display: none;
}
.xgplayer .xgplayer-replay {
- display: none;
- position: absolute;
- left: 50%;
- top: 50%;
- width: 100px;
- height: 100px;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- z-index: 5;
- transform: translate(-50%, -50%);
- cursor: pointer;
+ display: none;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ width: 100px;
+ height: 100px;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ z-index: 5;
+ transform: translate(-50%, -50%);
+ cursor: pointer;
}
.xgplayer .xgplayer-replay .xgplayer-replay-txt {
- display: inline-block;
- font-size: 14px;
- color: #fff;
- line-height: 34px;
- text-align: center;
+ display: inline-block;
+ font-size: 14px;
+ color: #fff;
+ line-height: 34px;
+ text-align: center;
}
.xgplayer.xgplayer-mobile .xgplayer-replay-svg {
- width: 50px;
- height: 50px;
+ width: 50px;
+ height: 50px;
}
.xgplayer.xgplayer-mobile .xgplayer-replay-txt {
- line-height: 24px;
- font-size: 12px;
+ line-height: 24px;
+ font-size: 12px;
}
.xgplayer .xgplayer-poster {
- display: block;
- opacity: 1;
- visibility: visible;
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background-position: center center;
- background-size: 100% auto;
- background-repeat: no-repeat;
- transition: opacity 0.3s ease, visibility 0.3s ease;
- pointer-events: none;
+ display: block;
+ opacity: 1;
+ visibility: visible;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-position: center center;
+ background-size: 100% auto;
+ background-repeat: no-repeat;
+ transition:
+ opacity 0.3s ease,
+ visibility 0.3s ease;
+ pointer-events: none;
}
.xgplayer .xgplayer-poster.hide,
.xgplayer.xgplayer-playing .xgplayer-poster {
- opacity: 0;
- visibility: hidden;
+ opacity: 0;
+ visibility: hidden;
}
.xgplayer.xgplayer-playing .xg-not-hidden,
.xgplayer.xgplayer-is-enter .xgplayer-poster.xg-showplay,
@@ -687,86 +704,86 @@
.xgplayer.xgplayer-nostart .xgplayer-poster,
.xgplayer.xgplayer-ended .xgplayer-poster,
.xgplayer.not-allow-autoplay .xgplayer-poster {
- opacity: 1;
- visibility: visible;
+ opacity: 1;
+ visibility: visible;
}
.xgplayer.xgplayer-nostart .xgplayer-poster.hide,
.xgplayer.xgplayer-ended .xgplayer-poster.hide,
.xgplayer.not-allow-autoplay .xgplayer-poster.hide {
- opacity: 0;
- visibility: hidden;
+ opacity: 0;
+ visibility: hidden;
}
@keyframes playPause {
- 0% {
- transform: scale(1);
- opacity: 1;
- }
- 99% {
- transform: scale(1.3);
- opacity: 0;
- }
- to {
- transform: scale(1);
- opacity: 0;
- }
+ 0% {
+ transform: scale(1);
+ opacity: 1;
+ }
+ 99% {
+ transform: scale(1.3);
+ opacity: 0;
+ }
+ to {
+ transform: scale(1);
+ opacity: 0;
+ }
}
.xgplayer xg-start-inner {
- display: block;
- width: 100%;
- height: 100%;
- overflow: hidden;
- border-radius: 50%;
- background: rgba(0, 0, 0, 0.38);
+ display: block;
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ border-radius: 50%;
+ background: rgba(0, 0, 0, 0.38);
}
.xgplayer .xgplayer-start {
- width: 70px;
- height: 70px;
- position: absolute;
- left: 50%;
- top: 50%;
- z-index: 5;
- transform: translate(-50%, -50%);
- cursor: pointer;
+ width: 70px;
+ height: 70px;
+ position: absolute;
+ left: 50%;
+ top: 50%;
+ z-index: 5;
+ transform: translate(-50%, -50%);
+ cursor: pointer;
}
.xgplayer .xgplayer-start svg {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
}
.xgplayer .xgplayer-start.hide,
.xgplayer .xgplayer-start.focus-hide {
- display: none;
- pointer-events: none;
+ display: none;
+ pointer-events: none;
}
.xgplayer .xgplayer-start:hover {
- opacity: 0.85;
+ opacity: 0.85;
}
.xgplayer .xgplayer-start .xg-icon-play {
- display: block;
+ display: block;
}
.xgplayer .xgplayer-start .xg-icon-pause,
-.xgplayer .xgplayer-start[data-state="pause"] .xg-icon-play {
- display: none;
+.xgplayer .xgplayer-start[data-state='pause'] .xg-icon-play {
+ display: none;
}
-.xgplayer .xgplayer-start[data-state="pause"] .xg-icon-pause,
+.xgplayer .xgplayer-start[data-state='pause'] .xg-icon-pause,
.xgplayer .xgplayer-start.interact {
- display: block;
+ display: block;
}
.xgplayer .xgplayer-start.interact xg-start-inner {
- animation: playPause 0.4s 0.1s ease-out forwards;
+ animation: playPause 0.4s 0.1s ease-out forwards;
}
.xgplayer .xgplayer-start.show {
- display: block;
+ display: block;
}
.xgplayer.xgplayer-mobile xg-start-inner {
- background: initial;
- border-radius: 0;
+ background: initial;
+ border-radius: 0;
}
.xgplayer.xgplayer-mobile .xgplayer-start {
- height: 50px;
- width: 50px;
+ height: 50px;
+ width: 50px;
}
.xgplayer.xgplayer-mobile .xgplayer-start:hover {
- opacity: 1;
+ opacity: 1;
}
.xgplayer.xgplayer-inactive .xgplayer-start.auto-hide,
.xgplayer.xgplayer-is-enter .xgplayer-start.auto-hide,
@@ -775,1247 +792,1275 @@
.xgplayer.xgplayer-is-error .xgplayer-start,
.xgplayer.xgplayer-is-enter .xgplayer-start.show,
.xgplayer.xgplayer-is-error .xgplayer-start.show {
- display: none;
+ display: none;
}
.xgplayer-enter {
- display: none;
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.8);
- z-index: 5;
- pointer-events: none;
+ display: none;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.8);
+ z-index: 5;
+ pointer-events: none;
}
.xgplayer-enter .show {
- display: block;
+ display: block;
}
.xgplayer-enter .xgplayer-enter-spinner {
- display: block;
- position: absolute;
- z-index: 1;
- left: 50%;
- top: 50%;
- height: 100px;
- width: 100px;
- transform: translate(-50%, -50%);
+ display: block;
+ position: absolute;
+ z-index: 1;
+ left: 50%;
+ top: 50%;
+ height: 100px;
+ width: 100px;
+ transform: translate(-50%, -50%);
}
.xgplayer-enter .xgplayer-enter-spinner div {
- width: 6%;
- height: 13%;
- background-color: #ffffffb3;
- position: absolute;
- left: 45%;
- top: 45%;
- opacity: 0;
- border-radius: 30px;
- animation: fade 1s linear infinite;
+ width: 6%;
+ height: 13%;
+ background-color: #ffffffb3;
+ position: absolute;
+ left: 45%;
+ top: 45%;
+ opacity: 0;
+ border-radius: 30px;
+ animation: fade 1s linear infinite;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar1 {
- transform: rotate(0) translateY(-140%);
- animation-delay: -0s;
+ transform: rotate(0) translateY(-140%);
+ animation-delay: -0s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar2 {
- transform: rotate(30deg) translateY(-140%);
- animation-delay: -0.9163s;
+ transform: rotate(30deg) translateY(-140%);
+ animation-delay: -0.9163s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar3 {
- transform: rotate(60deg) translateY(-140%);
- animation-delay: -0.833s;
+ transform: rotate(60deg) translateY(-140%);
+ animation-delay: -0.833s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar4 {
- transform: rotate(90deg) translateY(-140%);
- animation-delay: -0.7497s;
+ transform: rotate(90deg) translateY(-140%);
+ animation-delay: -0.7497s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar5 {
- transform: rotate(120deg) translateY(-140%);
- animation-delay: -0.6664s;
+ transform: rotate(120deg) translateY(-140%);
+ animation-delay: -0.6664s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar6 {
- transform: rotate(150deg) translateY(-140%);
- animation-delay: -0.5831s;
+ transform: rotate(150deg) translateY(-140%);
+ animation-delay: -0.5831s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar7 {
- transform: rotate(180deg) translateY(-140%);
- animation-delay: -0.4998s;
+ transform: rotate(180deg) translateY(-140%);
+ animation-delay: -0.4998s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar8 {
- transform: rotate(210deg) translateY(-140%);
- animation-delay: -0.4165s;
+ transform: rotate(210deg) translateY(-140%);
+ animation-delay: -0.4165s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar9 {
- transform: rotate(240deg) translateY(-140%);
- animation-delay: -0.3332s;
+ transform: rotate(240deg) translateY(-140%);
+ animation-delay: -0.3332s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar10 {
- transform: rotate(270deg) translateY(-140%);
- animation-delay: -0.2499s;
+ transform: rotate(270deg) translateY(-140%);
+ animation-delay: -0.2499s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar11 {
- transform: rotate(300deg) translateY(-140%);
- animation-delay: -0.1666s;
+ transform: rotate(300deg) translateY(-140%);
+ animation-delay: -0.1666s;
}
.xgplayer-enter .xgplayer-enter-spinner div.xgplayer-enter-bar12 {
- transform: rotate(330deg) translateY(-142%);
- animation-delay: -0.0833s;
+ transform: rotate(330deg) translateY(-142%);
+ animation-delay: -0.0833s;
}
@keyframes fade {
- 0% {
- opacity: 1;
- }
- to {
- opacity: 0.25;
- }
+ 0% {
+ opacity: 1;
+ }
+ to {
+ opacity: 0.25;
+ }
}
.xgplayer.xgplayer-is-enter .xgplayer-enter {
- display: block;
- opacity: 1;
- transition: opacity 0.3s;
+ display: block;
+ opacity: 1;
+ transition: opacity 0.3s;
}
.xgplayer.xgplayer-nostart .xgplayer-enter {
- display: none;
+ display: none;
}
.xgplayer.xgplayer-mobile .xgplayer-enter .xgplayer-enter-spinner {
- width: 70px;
- height: 70px;
+ width: 70px;
+ height: 70px;
}
.xg-mini-layer {
- display: none;
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- z-index: 11;
- background: linear-gradient(180deg, rgba(57, 57, 57, 0.9), rgba(57, 57, 57, 0) 50.27%);
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 11;
+ background: linear-gradient(
+ 180deg,
+ rgba(57, 57, 57, 0.9),
+ rgba(57, 57, 57, 0) 50.27%
+ );
}
.xg-mini-layer .mask {
- pointer-events: none;
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- background-color: #0006;
+ pointer-events: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ background-color: #0006;
}
.xg-mini-layer xg-mini-header {
- display: flex;
- top: 0;
- left: 0;
- right: 40px;
- box-sizing: border-box;
- padding: 10px 3px 0 8px;
- justify-content: space-between;
- color: #fff;
- font-size: 14px;
- position: absolute;
- z-index: 22;
+ display: flex;
+ top: 0;
+ left: 0;
+ right: 40px;
+ box-sizing: border-box;
+ padding: 10px 3px 0 8px;
+ justify-content: space-between;
+ color: #fff;
+ font-size: 14px;
+ position: absolute;
+ z-index: 22;
}
.xg-mini-layer xg-mini-header .xgplayer-pip-disableBtn {
- pointer-events: all;
+ pointer-events: all;
}
.xg-mini-layer xg-mini-header #disabledMini {
- display: none;
- position: relative;
+ display: none;
+ position: relative;
}
.xg-mini-layer xg-mini-header #disabledMini + label {
- cursor: pointer;
- position: relative;
- display: flex;
- align-items: center;
+ cursor: pointer;
+ position: relative;
+ display: flex;
+ align-items: center;
}
.xg-mini-layer xg-mini-header #disabledMini + label:before {
- content: "";
- color: #ff142b;
- background-color: transparent;
- border-radius: 2px;
- border: solid 1px #cdcdcd;
- width: 16px;
- height: 16px;
- display: inline-block;
- text-align: center;
- vertical-align: middle;
- line-height: 16px;
- margin-right: 7px;
+ content: '';
+ color: #ff142b;
+ background-color: transparent;
+ border-radius: 2px;
+ border: solid 1px #cdcdcd;
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ text-align: center;
+ vertical-align: middle;
+ line-height: 16px;
+ margin-right: 7px;
}
.xg-mini-layer xg-mini-header #disabledMini:checked + label {
- color: #ff142b;
+ color: #ff142b;
}
.xg-mini-layer xg-mini-header #disabledMini:checked + label:before {
- border-color: #ff142b;
+ border-color: #ff142b;
}
.xg-mini-layer xg-mini-header #disabledMini:checked + label:after {
- content: "";
- position: absolute;
- width: 4px;
- height: 8px;
- border-color: #ff142b;
- border-style: solid;
- border-width: 0px 2px 2px 0px;
- transform: rotate(45deg);
- left: 6px;
- top: 5px;
+ content: '';
+ position: absolute;
+ width: 4px;
+ height: 8px;
+ border-color: #ff142b;
+ border-style: solid;
+ border-width: 0px 2px 2px 0px;
+ transform: rotate(45deg);
+ left: 6px;
+ top: 5px;
}
.xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn xg-tips {
- position: absolute;
- padding: 4px 6px;
- white-space: nowrap;
- bottom: -30px;
- right: 15px;
- border-radius: 4px;
- background-color: #0000008a;
- display: none;
+ position: absolute;
+ padding: 4px 6px;
+ white-space: nowrap;
+ bottom: -30px;
+ right: 15px;
+ border-radius: 4px;
+ background-color: #0000008a;
+ display: none;
}
-.xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn:hover #disabledMini + label:before {
- border-color: #ff142b;
+.xg-mini-layer
+ xg-mini-header
+ .xgplayer-mini-disableBtn:hover
+ #disabledMini
+ + label:before {
+ border-color: #ff142b;
}
-.xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn:hover #disabledMini + label {
- color: #ff142b;
+.xg-mini-layer
+ xg-mini-header
+ .xgplayer-mini-disableBtn:hover
+ #disabledMini
+ + label {
+ color: #ff142b;
}
.xg-mini-layer xg-mini-header .xgplayer-mini-disableBtn:hover xg-tips {
- display: block;
+ display: block;
}
.xg-mini-layer .mini-cancel-btn {
- cursor: pointer;
- display: block;
- color: #fff;
- width: 40px;
- height: 38px;
- position: absolute;
- right: 0;
- top: 0;
- text-align: center;
- line-height: 38px;
+ cursor: pointer;
+ display: block;
+ color: #fff;
+ width: 40px;
+ height: 38px;
+ position: absolute;
+ right: 0;
+ top: 0;
+ text-align: center;
+ line-height: 38px;
}
.xg-mini-layer .play-icon {
- cursor: pointer;
- height: 48px;
- width: 48px;
- position: absolute;
- background: rgba(0, 0, 0, 0.54);
- border-radius: 24px;
- top: 50%;
- left: 50%;
- margin: -24px 0 0 -24px;
+ cursor: pointer;
+ height: 48px;
+ width: 48px;
+ position: absolute;
+ background: rgba(0, 0, 0, 0.54);
+ border-radius: 24px;
+ top: 50%;
+ left: 50%;
+ margin: -24px 0 0 -24px;
}
.xg-mini-layer .play-icon svg,
.xg-mini-layer .play-icon img {
- width: 50px;
- height: 50px;
- fill: #faf7f7;
+ width: 50px;
+ height: 50px;
+ fill: #faf7f7;
}
.xg-mini-layer .xg-icon-play {
- display: none;
+ display: none;
}
.xg-mini-layer .xg-icon-pause,
-.xg-mini-layer[data-state="pause"] .xg-icon-play {
- display: block;
+.xg-mini-layer[data-state='pause'] .xg-icon-play {
+ display: block;
}
-.xg-mini-layer[data-state="pause"] .xg-icon-pause {
- display: none;
+.xg-mini-layer[data-state='pause'] .xg-icon-pause {
+ display: none;
}
.xgplayer-miniicon {
- position: relative;
- outline: none;
- display: block;
+ position: relative;
+ outline: none;
+ display: block;
}
.xgplayer-miniicon .name {
- text-align: center;
- font-size: 13px;
- line-height: 20px;
- height: 20px;
- color: #fffc;
- line-height: 40px;
+ text-align: center;
+ font-size: 13px;
+ line-height: 20px;
+ height: 20px;
+ color: #fffc;
+ line-height: 40px;
}
.xgplayer-miniicon .name span {
- font-size: 13px;
- width: 60px;
- height: 20px;
- line-height: 20px;
- background: rgba(0, 0, 0, 0.38);
- border-radius: 10px;
- display: inline-block;
- vertical-align: middle;
+ font-size: 13px;
+ width: 60px;
+ height: 20px;
+ line-height: 20px;
+ background: rgba(0, 0, 0, 0.38);
+ border-radius: 10px;
+ display: inline-block;
+ vertical-align: middle;
}
.xgplayer-mini {
- position: fixed;
- width: 320px;
- height: 180px;
- z-index: 91;
- box-shadow: 0 4px 7px 2px #0003;
+ position: fixed;
+ width: 320px;
+ height: 180px;
+ z-index: 91;
+ box-shadow: 0 4px 7px 2px #0003;
}
.xgplayer-mini:hover {
- cursor: move;
+ cursor: move;
}
.xgplayer-mini:hover .xg-mini-layer {
- display: block;
+ display: block;
}
.xgplayer-mini.xgplayer-ended .xg-mini-layer {
- display: none;
+ display: none;
}
.xgplayer-mobile .xg-mini-layer .play-icon {
- background: none;
- border-radius: initial;
+ background: none;
+ border-radius: initial;
}
.xgplayer.xgplayer-inactive {
- cursor: none;
+ cursor: none;
}
.xgplayer xg-thumbnail {
- display: block;
+ display: block;
}
.xgplayer xg-trigger {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
}
.xgplayer xg-trigger .time-preview {
- display: none;
- position: absolute;
- width: 200px;
- margin: 0 auto;
- padding: 0 20px 30px;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- color: #fff;
- text-shadow: 0 0 1px rgba(0, 0, 0, 0.54);
- font-size: 18px;
- text-align: center;
- pointer-events: none;
+ display: none;
+ position: absolute;
+ width: 200px;
+ margin: 0 auto;
+ padding: 0 20px 30px;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ color: #fff;
+ text-shadow: 0 0 1px rgba(0, 0, 0, 0.54);
+ font-size: 18px;
+ text-align: center;
+ pointer-events: none;
}
.xgplayer xg-trigger .time-preview span {
- line-height: 24px;
+ line-height: 24px;
}
.xgplayer xg-trigger .time-preview .xg-cur {
- color: #13c16d;
+ color: #13c16d;
}
.xgplayer xg-trigger .time-preview .xg-separator {
- font-size: 14px;
+ font-size: 14px;
}
.xgplayer xg-trigger .time-preview .xg-seek-show {
- transform: translate(-10px);
+ transform: translate(-10px);
}
.xgplayer xg-trigger .time-preview .xg-seek-show.xg-back .xg-seek-pre {
- transform: rotate(180deg) translate(-5px);
+ transform: rotate(180deg) translate(-5px);
}
.xgplayer xg-trigger .time-preview .xg-seek-show.hide-seek-icon .xg-seek-icon {
- display: none;
+ display: none;
}
.xgplayer xg-trigger .time-preview .xg-bar {
- width: 96px;
- height: 2px;
- margin: 8px auto 0;
- border-radius: 10px;
- box-sizing: content-box;
- background: rgba(255, 255, 255, 0.3);
+ width: 96px;
+ height: 2px;
+ margin: 8px auto 0;
+ border-radius: 10px;
+ box-sizing: content-box;
+ background: rgba(255, 255, 255, 0.3);
}
.xgplayer xg-trigger .time-preview .xg-bar .xg-curbar {
- width: 0;
- height: 100%;
- background-color: #13c16d;
+ width: 0;
+ height: 100%;
+ background-color: #13c16d;
}
.xgplayer xg-trigger .time-preview .xg-bar.hide {
- display: none;
+ display: none;
}
.xgplayer xg-trigger .mobile-thumbnail {
- position: relative;
- left: 50%;
- transform: translate(-50%);
+ position: relative;
+ left: 50%;
+ transform: translate(-50%);
}
.xgplayer xg-trigger .xg-top-note {
- position: absolute;
- height: 32px;
- width: 135px;
- top: 26px;
- left: 50%;
- margin-left: -78px;
- background: rgba(0, 0, 0, 0.3);
- border-radius: 100px;
- color: #fff;
+ position: absolute;
+ height: 32px;
+ width: 135px;
+ top: 26px;
+ left: 50%;
+ margin-left: -78px;
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: 100px;
+ color: #fff;
}
.xgplayer xg-trigger .xg-top-note span {
- display: block;
- line-height: 32px;
- height: 32px;
- font-size: 13px;
- text-align: center;
+ display: block;
+ line-height: 32px;
+ height: 32px;
+ font-size: 13px;
+ text-align: center;
}
.xgplayer xg-trigger .xg-top-note i {
- color: #13c16d;
- margin: 0 5px;
+ color: #13c16d;
+ margin: 0 5px;
}
.xgplayer xg-trigger .xg-playbackrate {
- display: none;
+ display: none;
}
-.xgplayer xg-trigger[data-xg-action="seeking"] .time-preview {
- display: block;
+.xgplayer xg-trigger[data-xg-action='seeking'] .time-preview {
+ display: block;
}
-.xgplayer xg-trigger[data-xg-action="playbackrate"] .xg-playbackrate {
- display: block;
+.xgplayer xg-trigger[data-xg-action='playbackrate'] .xg-playbackrate {
+ display: block;
}
.xgplayer .gradient {
- display: none;
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- pointer-events: none;
- background-image: linear-gradient(
- rgba(0, 0, 0, 0.6),
- rgba(0, 0, 0, 0.36) 20%,
- rgba(0, 0, 0, 0) 36%,
- rgba(0, 0, 0, 0) 70%,
- rgba(0, 0, 0, 0.24) 77%,
- rgba(0, 0, 0, 0.36) 83%,
- rgba(0, 0, 0, 0.6)
- );
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ pointer-events: none;
+ background-image: linear-gradient(
+ rgba(0, 0, 0, 0.6),
+ rgba(0, 0, 0, 0.36) 20%,
+ rgba(0, 0, 0, 0) 36%,
+ rgba(0, 0, 0, 0) 70%,
+ rgba(0, 0, 0, 0.24) 77%,
+ rgba(0, 0, 0, 0.36) 83%,
+ rgba(0, 0, 0, 0.6)
+ );
}
.xgplayer .gradient.top {
- background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.36) 20%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 70%);
+ background-image: linear-gradient(
+ rgba(0, 0, 0, 0.6),
+ rgba(0, 0, 0, 0.36) 20%,
+ rgba(0, 0, 0, 0) 36%,
+ rgba(0, 0, 0, 0) 70%
+ );
}
.xgplayer .gradient.bottom {
- background-image: linear-gradient(rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.24) 77%, rgba(0, 0, 0, 0.36) 83%, rgba(0, 0, 0, 0.6));
+ background-image: linear-gradient(
+ rgba(0, 0, 0, 0) 70%,
+ rgba(0, 0, 0, 0.24) 77%,
+ rgba(0, 0, 0, 0.36) 83%,
+ rgba(0, 0, 0, 0.6)
+ );
}
.xgplayer .gradient.none,
.xgplayer-mobile .xgplayer-controls {
- background-image: initial;
+ background-image: initial;
}
.xgplayer-mobile.xgplayer-playing .gradient {
- display: block;
+ display: block;
}
.xgplayer-mobile.xgplayer-inactive .gradient {
- background-image: initial;
+ background-image: initial;
}
.xgplayer-locked .gradient {
- background-image: initial;
+ background-image: initial;
}
.xgplayer-mobile .xgmask {
- position: absolute;
- height: 100%;
- z-index: 10;
- top: 0;
- left: 0;
- width: 100%;
- pointer-events: none;
- background-color: #0000;
+ position: absolute;
+ height: 100%;
+ z-index: 10;
+ top: 0;
+ left: 0;
+ width: 100%;
+ pointer-events: none;
+ background-color: #0000;
}
@media (prefers-color-scheme: dark) {
- .xgplayer-mobile xg-trigger .time-preview {
- color: #fff;
- }
- .xgplayer-mobile xg-trigger .time-preview span.xg-cur {
- color: #13c16d;
- }
- .xgplayer-mobile xg-trigger .time-preview .xg-bar {
- background-color: #ffffff4d;
- }
- .xgplayer-mobile xg-trigger .time-preview .xg-bar.xg-curbar {
- background-color: #13c16d;
- }
+ .xgplayer-mobile xg-trigger .time-preview {
+ color: #fff;
+ }
+ .xgplayer-mobile xg-trigger .time-preview span.xg-cur {
+ color: #13c16d;
+ }
+ .xgplayer-mobile xg-trigger .time-preview .xg-bar {
+ background-color: #ffffff4d;
+ }
+ .xgplayer-mobile xg-trigger .time-preview .xg-bar.xg-curbar {
+ background-color: #13c16d;
+ }
}
@keyframes loadingRotate {
- 0% {
- transform: rotate(0);
- }
- 25% {
- transform: rotate(90deg);
- }
- 50% {
- transform: rotate(180deg);
- }
- 75% {
- transform: rotate(270deg);
- }
- to {
- transform: rotate(360deg);
- }
+ 0% {
+ transform: rotate(0);
+ }
+ 25% {
+ transform: rotate(90deg);
+ }
+ 50% {
+ transform: rotate(180deg);
+ }
+ 75% {
+ transform: rotate(270deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
}
@keyframes loadingDashOffset {
- 0% {
- stroke-dashoffset: 236;
- }
- to {
- stroke-dashoffset: 0;
- }
+ 0% {
+ stroke-dashoffset: 236;
+ }
+ to {
+ stroke-dashoffset: 0;
+ }
}
xg-loading-inner {
- display: block;
- height: 100%;
- width: 100%;
- transform-origin: center;
- animation: loadingRotate 1s 0.1s linear infinite;
+ display: block;
+ height: 100%;
+ width: 100%;
+ transform-origin: center;
+ animation: loadingRotate 1s 0.1s linear infinite;
}
.xgplayer-loading {
- display: none;
- width: 70px;
- height: 70px;
- overflow: hidden;
- position: absolute;
- z-index: 10;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- pointer-events: none;
+ display: none;
+ width: 70px;
+ height: 70px;
+ overflow: hidden;
+ position: absolute;
+ z-index: 10;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ pointer-events: none;
}
.xgplayer-loading svg,
.xgplayer-loading img {
- width: 100%;
- height: 100%;
+ width: 100%;
+ height: 100%;
}
.xgplayer-mobile .xgplayer-loading {
- width: 50px;
- height: 50px;
+ width: 50px;
+ height: 50px;
}
.xgplayer-isloading .xgplayer-loading {
- display: block;
+ display: block;
}
.xgplayer-nostart .xgplayer-loading,
.xgplayer-pause .xgplayer-loading,
.xgplayer-is-enter .xgplayer-loading,
.xgplayer-is-ended .xgplayer-loading,
.xgplayer-is-error .xgplayer-loading {
- display: none;
+ display: none;
}
.xgplayer .xgplayer-progress {
- display: flex;
- align-items: center;
- position: relative;
- min-width: 10px;
- height: 20px;
- left: 0;
- right: 0;
- top: 0;
- outline: none;
- flex: 1;
- cursor: pointer;
+ display: flex;
+ align-items: center;
+ position: relative;
+ min-width: 10px;
+ height: 20px;
+ left: 0;
+ right: 0;
+ top: 0;
+ outline: none;
+ flex: 1;
+ cursor: pointer;
}
.xgplayer .xgplayer-progress-outer {
- position: relative;
- width: 100%;
- height: 2px;
- border-radius: 3px;
- cursor: pointer;
+ position: relative;
+ width: 100%;
+ height: 2px;
+ border-radius: 3px;
+ cursor: pointer;
}
.xgplayer .progress-list {
- display: flex;
- height: 100%;
- width: 100%;
- border-radius: inherit;
+ display: flex;
+ height: 100%;
+ width: 100%;
+ border-radius: inherit;
}
.xgplayer .xgplayer-progress-inner {
- position: relative;
- flex: 1;
- height: 100%;
- background: rgba(255, 255, 255, 0.3);
- transition: height 0.2s ease-in, opacity 0.2s ease-out;
- border-radius: inherit;
- margin-right: 2px;
- pointer-events: none;
+ position: relative;
+ flex: 1;
+ height: 100%;
+ background: rgba(255, 255, 255, 0.3);
+ transition:
+ height 0.2s ease-in,
+ opacity 0.2s ease-out;
+ border-radius: inherit;
+ margin-right: 2px;
+ pointer-events: none;
}
.xgplayer .xgplayer-progress-inner:last-child,
.xgplayer .xgplayer-progress-inner:only-child {
- margin-right: 0;
+ margin-right: 0;
}
.xgplayer .inner-focus-point {
- background: #fff;
- position: relative;
+ background: #fff;
+ position: relative;
}
.xgplayer .inner-focus-point:before,
.xgplayer .inner-focus-point:after {
- position: absolute;
- top: 0;
- content: " ";
- display: block;
- width: 2px;
- height: 300%;
- top: 50%;
- z-index: 1;
- transform: translateY(-50%);
- border-radius: 3px;
- background: #fff;
+ position: absolute;
+ top: 0;
+ content: ' ';
+ display: block;
+ width: 2px;
+ height: 300%;
+ top: 50%;
+ z-index: 1;
+ transform: translateY(-50%);
+ border-radius: 3px;
+ background: #fff;
}
.xgplayer .inner-focus-point:before {
- left: 0;
+ left: 0;
}
.xgplayer .inner-focus-point:after {
- right: 0;
+ right: 0;
}
.xgplayer .xgplayer-progress-cache,
.xgplayer .xgplayer-progress-played {
- display: block;
- height: 100%;
- width: 0;
- position: absolute;
- top: 0;
- left: 0;
- border-radius: inherit;
+ display: block;
+ height: 100%;
+ width: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ border-radius: inherit;
}
.xgplayer .xgplayer-progress-played {
- background: linear-gradient(-90deg, #5dc1ff 0%, #13c16d 100%);
+ background: linear-gradient(-90deg, #5dc1ff 0%, #13c16d 100%);
}
.xgplayer .xgplayer-progress-cache {
- background: rgba(255, 255, 255, 0.5);
+ background: rgba(255, 255, 255, 0.5);
}
.xgplayer .xgplayer-progress-btn {
- display: block;
- // background: rgba(39, 152, 154, 0.304);
- // border: 0.5px solid rgba(255, 94, 94, 0.056545);
- // box-shadow: 0 0 1px #13ac6462;
- width: 20px;
- height: 20px;
- border-radius: 30px;
- left: 0;
- top: 50%;
- position: absolute;
- z-index: 1;
- transform: translate(-50%, -50%);
- box-sizing: border-box;
- pointer-events: none;
+ display: block;
+ // background: rgba(39, 152, 154, 0.304);
+ // border: 0.5px solid rgba(255, 94, 94, 0.056545);
+ // box-shadow: 0 0 1px #13ac6462;
+ width: 20px;
+ height: 20px;
+ border-radius: 30px;
+ left: 0;
+ top: 50%;
+ position: absolute;
+ z-index: 1;
+ transform: translate(-50%, -50%);
+ box-sizing: border-box;
+ pointer-events: none;
}
.xgplayer .xgplayer-progress-btn:before {
- content: " ";
- display: block;
- position: relative;
- width: 12px;
- height: 12px;
- left: 50%;
- top: 50%;
- transform: translate(-50%, -50%);
- border-radius: 30px;
- background: #ffffff;
+ content: ' ';
+ display: block;
+ position: relative;
+ width: 12px;
+ height: 12px;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ border-radius: 30px;
+ background: #ffffff;
}
.xgplayer .xgplayer-progress-btn.active {
- border: 4px solid rgba(255, 94, 94, 0.064057);
+ border: 4px solid rgba(255, 94, 94, 0.064057);
}
.xgplayer .xgplayer-progress-btn.active:before {
- box-shadow: 0 0 3px #f85959b0;
+ box-shadow: 0 0 3px #f85959b0;
}
.xgplayer .xgplayer-progress-dot {
- display: inline-block;
- position: absolute;
- height: 100%;
- width: 5px;
- top: 0px;
- background: white;
- border-radius: 6px;
- z-index: 16;
+ display: inline-block;
+ position: absolute;
+ height: 100%;
+ width: 5px;
+ top: 0px;
+ background: white;
+ border-radius: 6px;
+ z-index: 16;
}
.xgplayer .xgplayer-progress-dot .xgplayer-progress-tip {
- position: absolute;
- left: 25%;
- top: -40px;
- height: auto;
- line-height: 30px;
- width: auto;
- transform: scale(0.8) translate(-50%);
- background: rgba(0, 0, 0, 0.3);
- border-radius: 6px;
- border: 1px solid rgba(0, 0, 0, 0.8);
- cursor: default;
- white-space: nowrap;
- display: none;
+ position: absolute;
+ left: 25%;
+ top: -40px;
+ height: auto;
+ line-height: 30px;
+ width: auto;
+ transform: scale(0.8) translate(-50%);
+ background: rgba(0, 0, 0, 0.3);
+ border-radius: 6px;
+ border: 1px solid rgba(0, 0, 0, 0.8);
+ cursor: default;
+ white-space: nowrap;
+ display: none;
}
.xgplayer .xgplayer-progress-dot:hover .xgplayer-progress-tip {
- display: block;
+ display: block;
}
.xgplayer .flex-controls .xgplayer-progress {
- transform: translateY(0);
+ transform: translateY(0);
}
.xgplayer.xgplayer-pc .xgplayer-progress-btn {
- transform: translate(-50%, -50%) scale(0);
+ transform: translate(-50%, -50%) scale(0);
}
.xgplayer.xgplayer-pc .xgplayer-progress-outer {
- height: 3px;
+ height: 3px;
}
.xgplayer.xgplayer-pc .xgplayer-progress-inner {
- margin-right: 4px;
+ margin-right: 4px;
}
.xgplayer.xgplayer-pc .xgplayer-progress-inner:last-child,
.xgplayer.xgplayer-pc .xgplayer-progress-inner:only-child {
- margin-right: 0;
+ margin-right: 0;
}
.xgplayer.xgplayer-pc .inner-focus-point:before,
.xgplayer.xgplayer-pc .inner-focus-point:after {
- width: 3px;
+ width: 3px;
}
.xgplayer.xgplayer-pc .inner-focus-highlight {
- background: rgba(255, 255, 255, 0.8);
+ background: rgba(255, 255, 255, 0.8);
}
.xgplayer.xgplayer-pc .xgplayer-progress.active .xgplayer-progress-outer {
- height: 6px;
- margin-bottom: 3px;
- transition: height 0.3s ease, margin-bottom 0.3s ease;
+ height: 6px;
+ margin-bottom: 3px;
+ transition:
+ height 0.3s ease,
+ margin-bottom 0.3s ease;
}
.xgplayer.xgplayer-pc .xgplayer-progress.active .xgplayer-progress-btn {
- transform: translate(-50%, -50%) scale(1);
+ transform: translate(-50%, -50%) scale(1);
}
.xgplayer.xgplayer-pc .xgplayer-progress.active .inner-focus-point:before,
.xgplayer.xgplayer-pc .xgplayer-progress.active .inner-focus-point:after {
- width: 6px;
+ width: 6px;
}
.xgplayer .xgplayer-progress-bottom .xgplayer-progress-outer {
- top: 9px;
+ top: 9px;
}
.xgplayer .xgplayer-progress-bottom .xgplayer-progress-btn:before {
- height: 6px;
- width: 6px;
+ height: 6px;
+ width: 6px;
}
.xgplayer.xgplayer-mobile .xgplayer-progress-bottom .xgplayer-progress-outer {
- height: 4px;
+ height: 4px;
}
@media (prefers-color-scheme: dark) {
- .xgplayer .xgplayer-progress .xgplayer-progress-inner {
- background-color: #ffffff4d;
- }
- .xgplayer .xgplayer-progress .inner-focus-highlight {
- background: rgba(255, 255, 255, 0.8);
- }
- .xgplayer .xgplayer-progress .xgplayer-progress-btn {
- background: rgba(255, 94, 94, 0.304093);
- border: 0.5px solid rgba(255, 94, 94, 0.056545);
- box-shadow: 0 0 1px #ff000062;
- }
- .xgplayer .xgplayer-progress .xgplayer-progress-btn:before {
- background-color: #fff;
- }
- .xgplayer .xgplayer-progress .xgplayer-progress-played {
- background-color: linear-gradient(-90deg, #fa1f41 0%, #e31106 100%);
- }
- .xgplayer .xgplayer-progress .xgplayer-progress-cache {
- background-color: #ffffff80;
- }
+ .xgplayer .xgplayer-progress .xgplayer-progress-inner {
+ background-color: #ffffff4d;
+ }
+ .xgplayer .xgplayer-progress .inner-focus-highlight {
+ background: rgba(255, 255, 255, 0.8);
+ }
+ .xgplayer .xgplayer-progress .xgplayer-progress-btn {
+ background: rgba(255, 94, 94, 0.304093);
+ border: 0.5px solid rgba(255, 94, 94, 0.056545);
+ box-shadow: 0 0 1px #ff000062;
+ }
+ .xgplayer .xgplayer-progress .xgplayer-progress-btn:before {
+ background-color: #fff;
+ }
+ .xgplayer .xgplayer-progress .xgplayer-progress-played {
+ background-color: linear-gradient(-90deg, #fa1f41 0%, #e31106 100%);
+ }
+ .xgplayer .xgplayer-progress .xgplayer-progress-cache {
+ background-color: #ffffff80;
+ }
}
.xg-mini-progress {
- display: none;
- position: absolute;
- height: 2px;
- left: 0;
- right: 0;
- bottom: 0px;
- pointer-events: none;
+ display: none;
+ position: absolute;
+ height: 2px;
+ left: 0;
+ right: 0;
+ bottom: 0px;
+ pointer-events: none;
}
.xg-mini-progress xg-mini-progress-played,
.xg-mini-progress xg-mini-progress-cache {
- height: 100%;
- width: 0;
- position: absolute;
- top: 0;
- left: 0;
- border-radius: inherit;
+ height: 100%;
+ width: 0;
+ position: absolute;
+ top: 0;
+ left: 0;
+ border-radius: inherit;
}
.xg-mini-progress xg-mini-progress-played {
- background: linear-gradient(-90deg, #fa1f41 0%, #e31106 100%);
+ background: linear-gradient(-90deg, #fa1f41 0%, #e31106 100%);
}
.xg-mini-progress xg-mini-progress-cache {
- background: rgba(255, 255, 255, 0.5);
+ background: rgba(255, 255, 255, 0.5);
}
.xg-mini-progress-show,
.xgplayer-inactive .xg-mini-progress,
.xgplayer-mini .xg-mini-progress {
- display: block;
+ display: block;
}
.xgplayer .xgplayer-play .xg-icon-play {
- display: none;
+ display: none;
}
.xgplayer .xgplayer-play .xg-icon-pause,
-.xgplayer .xgplayer-play[data-state="pause"] .xg-icon-play {
- display: block;
+.xgplayer .xgplayer-play[data-state='pause'] .xg-icon-play {
+ display: block;
}
-.xgplayer .xgplayer-play[data-state="pause"] .xg-icon-pause,
+.xgplayer .xgplayer-play[data-state='pause'] .xg-icon-pause,
.xgplayer .xgplayer-fullscreen .xg-exit-fullscreen {
- display: none;
+ display: none;
}
.xgplayer .xgplayer-fullscreen .xg-get-fullscreen,
-.xgplayer .xgplayer-fullscreen[data-state="full"] .xg-exit-fullscreen {
- display: block;
+.xgplayer .xgplayer-fullscreen[data-state='full'] .xg-exit-fullscreen {
+ display: block;
}
-.xgplayer .xgplayer-fullscreen[data-state="full"] .xg-get-fullscreen {
- display: none;
+.xgplayer .xgplayer-fullscreen[data-state='full'] .xg-get-fullscreen {
+ display: none;
}
.xgplayer .xg-top-bar .xgplayer-back {
- position: relative;
- left: 0;
- top: 16px;
- width: 34px;
- height: 40px;
- display: none;
+ position: relative;
+ left: 0;
+ top: 16px;
+ width: 34px;
+ height: 40px;
+ display: none;
}
.xgplayer .xg-top-bar .xgplayer-back.show {
- display: block;
+ display: block;
}
.xgplayer .xgplayer-time {
- pointer-events: none;
- min-width: 40px;
- font-size: 14px;
- font-family: PingFangSC-Semibold;
- color: #fff;
- text-align: center;
- display: inline-block;
- line-height: 40px;
+ pointer-events: none;
+ min-width: 40px;
+ font-size: 14px;
+ font-family: PingFangSC-Semibold;
+ color: #fff;
+ text-align: center;
+ display: inline-block;
+ line-height: 40px;
}
.xgplayer .xgplayer-time span {
- display: inline-block;
- line-height: 40px;
- height: 40px;
+ display: inline-block;
+ line-height: 40px;
+ height: 40px;
}
.xgplayer .xgplayer-time span .time-min-width {
- text-align: center;
- min-width: 2ch;
+ text-align: center;
+ min-width: 2ch;
}
.xgplayer .xgplayer-time span .time-min-width:first-child {
- text-align: right;
+ text-align: right;
}
.xgplayer .xgplayer-time span .time-min-width:last-child {
- text-align: left;
+ text-align: left;
}
.xgplayer .xgplayer-time .time-duration {
- color: #ffffff80;
+ color: #ffffff80;
}
.xgplayer .xgplayer-time .time-live-tag {
- display: none;
+ display: none;
}
.xgplayer .xgplayer-time.xg-time-left {
- margin-left: 0;
+ margin-left: 0;
}
.xgplayer .xgplayer-time.xg-time-right {
- margin-right: 0;
+ margin-right: 0;
}
.xgplayer.xgplayer-mobile .xgplayer-time {
- min-width: 30px;
- font-size: 12px;
+ min-width: 30px;
+ font-size: 12px;
}
.xgplayer.xgplayer-mobile .xgplayer-time.xg-time-left {
- margin-right: 8px;
+ margin-right: 8px;
}
.xgplayer.xgplayer-mobile .xgplayer-time.xg-time-right {
- margin-left: 8px;
+ margin-left: 8px;
}
.xgplayer .xgplayer-volume.slide-show .xgplayer-slider {
- display: block;
+ display: block;
}
.xgplayer .xgplayer-slider {
- display: none;
- position: absolute;
- width: 28px;
- height: 92px;
- background: rgba(0, 0, 0, 0.54);
- border-radius: 1px;
- bottom: 40px;
- outline: none;
+ display: none;
+ position: absolute;
+ width: 28px;
+ height: 92px;
+ background: rgba(0, 0, 0, 0.54);
+ border-radius: 1px;
+ bottom: 40px;
+ outline: none;
}
.xgplayer .xgplayer-slider:after {
- content: " ";
- display: block;
- height: 15px;
- width: 28px;
- position: absolute;
- bottom: -15px;
- left: 0;
- z-index: 20;
- cursor: initial;
+ content: ' ';
+ display: block;
+ height: 15px;
+ width: 28px;
+ position: absolute;
+ bottom: -15px;
+ left: 0;
+ z-index: 20;
+ cursor: initial;
}
.xgplayer .xgplayer-value-label {
- position: absolute;
- left: 0;
- right: 0;
- bottom: 100%;
- padding: 5px 0 0;
- font-size: 12px;
- background-color: #0000008a;
- color: #fff;
- text-align: center;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 100%;
+ padding: 5px 0 0;
+ font-size: 12px;
+ background-color: #0000008a;
+ color: #fff;
+ text-align: center;
}
.xgplayer .xgplayer-bar,
.xgplayer .xgplayer-drag {
- display: block;
- position: absolute;
- bottom: 6px;
- left: 12px;
- background: rgba(255, 255, 255, 0.3);
- border-radius: 100px;
- width: 4px;
- height: 76px;
- outline: none;
- cursor: pointer;
+ display: block;
+ position: absolute;
+ bottom: 6px;
+ left: 12px;
+ background: rgba(255, 255, 255, 0.3);
+ border-radius: 100px;
+ width: 4px;
+ height: 76px;
+ outline: none;
+ cursor: pointer;
}
.xgplayer .xgplayer-drag {
- bottom: 0;
- left: 0;
- background: linear-gradient(180deg, #5dc1ff 0%, #13c16d 100%);
- max-height: 76px;
+ bottom: 0;
+ left: 0;
+ background: linear-gradient(180deg, #5dc1ff 0%, #13c16d 100%);
+ max-height: 76px;
}
.xgplayer .xgplayer-drag:after {
- content: " ";
- display: inline-block;
- width: 8px;
- height: 8px;
- background: #fff;
- box-shadow: 0 0 5px #00000042;
- position: absolute;
- border-radius: 50%;
- left: -2px;
- top: -4px;
+ content: ' ';
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ background: #fff;
+ box-shadow: 0 0 5px #00000042;
+ position: absolute;
+ border-radius: 50%;
+ left: -2px;
+ top: -4px;
}
-.xgplayer .xgplayer-volume[data-state="normal"] .xg-volume {
- display: block;
+.xgplayer .xgplayer-volume[data-state='normal'] .xg-volume {
+ display: block;
}
-.xgplayer .xgplayer-volume[data-state="normal"] .xg-volume-small,
-.xgplayer .xgplayer-volume[data-state="normal"] .xg-volume-mute,
-.xgplayer .xgplayer-volume[data-state="small"] .xg-volume {
- display: none;
+.xgplayer .xgplayer-volume[data-state='normal'] .xg-volume-small,
+.xgplayer .xgplayer-volume[data-state='normal'] .xg-volume-mute,
+.xgplayer .xgplayer-volume[data-state='small'] .xg-volume {
+ display: none;
}
-.xgplayer .xgplayer-volume[data-state="small"] .xg-volume-small {
- display: block;
+.xgplayer .xgplayer-volume[data-state='small'] .xg-volume-small {
+ display: block;
}
-.xgplayer .xgplayer-volume[data-state="small"] .xg-volume-mute,
-.xgplayer .xgplayer-volume[data-state="mute"] .xg-volume,
-.xgplayer .xgplayer-volume[data-state="mute"] .xg-volume-small {
- display: none;
+.xgplayer .xgplayer-volume[data-state='small'] .xg-volume-mute,
+.xgplayer .xgplayer-volume[data-state='mute'] .xg-volume,
+.xgplayer .xgplayer-volume[data-state='mute'] .xg-volume-small {
+ display: none;
}
-.xgplayer .xgplayer-volume[data-state="mute"] .xg-volume-mute {
- display: block;
+.xgplayer .xgplayer-volume[data-state='mute'] .xg-volume-mute {
+ display: block;
}
.xgplayer.xgplayer-mobile .xgplayer-volume .xgplayer-slider,
.xgplayer .xgplayer-pip .xg-exit-pip {
- display: none;
+ display: none;
}
.xgplayer .xgplayer-pip .xg-get-pip,
-.xgplayer .xgplayer-pip[data-state="pip"] .xg-exit-pip {
- display: block;
+.xgplayer .xgplayer-pip[data-state='pip'] .xg-exit-pip {
+ display: block;
}
-.xgplayer .xgplayer-pip[data-state="pip"] .xg-get-pip {
- display: none;
+.xgplayer .xgplayer-pip[data-state='pip'] .xg-get-pip {
+ display: none;
}
.xgplayer .xgplayer-playnext {
- position: relative;
- display: none;
- cursor: pointer;
+ position: relative;
+ display: none;
+ cursor: pointer;
}
.xgplayer .xgplayer-playnext .xgplayer-tips .xgplayer-tip-playnext {
- display: block;
+ display: block;
}
.xgplayer .xgplayer-playnext:hover {
- opacity: 0.85;
+ opacity: 0.85;
}
.xgplayer .xgplayer-playnext:hover .xgplayer-tips {
- display: block;
+ display: block;
}
.lang-is-en .xgplayer-playnext .xgplayer-tips {
- margin-left: -25px;
+ margin-left: -25px;
}
.lang-is-jp .xgplayer-playnext .xgplayer-tips {
- margin-left: -38px;
+ margin-left: -38px;
}
.xgplayer .xgplayer-download {
- position: relative;
- display: block;
- cursor: pointer;
+ position: relative;
+ display: block;
+ cursor: pointer;
}
.lang-is-en .xgplayer-download .xgplayer-tips {
- margin-left: -32px;
+ margin-left: -32px;
}
.lang-is-jp .xgplayer-download .xgplayer-tips {
- margin-left: -40px;
+ margin-left: -40px;
}
.xgplayer .xgplayer-shot {
- display: none;
+ display: none;
}
.xgplayer-definition {
- display: none;
- cursor: pointer;
+ display: none;
+ cursor: pointer;
}
.xgplayer .xgplayer-playbackrate {
- display: none;
- cursor: default;
+ display: none;
+ cursor: default;
}
.xgplayer .xgplayer-cssfullscreen .xg-get-cssfull {
- display: block;
+ display: block;
}
.xgplayer .xgplayer-cssfullscreen .xg-exit-cssfull,
-.xgplayer .xgplayer-cssfullscreen[data-state="full"] .xg-get-cssfull {
- display: none;
+.xgplayer .xgplayer-cssfullscreen[data-state='full'] .xg-get-cssfull {
+ display: none;
}
-.xgplayer .xgplayer-cssfullscreen[data-state="full"] .xg-exit-cssfull {
- display: block;
+.xgplayer .xgplayer-cssfullscreen[data-state='full'] .xg-exit-cssfull {
+ display: block;
}
.xgplayer-error {
- background: #000;
- display: none;
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- z-index: 6;
- color: #fff;
- text-align: center;
- line-height: 100%;
- justify-content: center;
- align-items: center;
+ background: #000;
+ display: none;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 6;
+ color: #fff;
+ text-align: center;
+ line-height: 100%;
+ justify-content: center;
+ align-items: center;
}
.xgplayer-error .xgplayer-error-refresh {
- color: #fa1f41;
- padding: 0 3px;
- cursor: pointer;
+ color: #fa1f41;
+ padding: 0 3px;
+ cursor: pointer;
}
.xgplayer-error .xgplayer-error-text {
- line-height: 18px;
- margin: auto 6px 20px;
- display: block;
+ line-height: 18px;
+ margin: auto 6px 20px;
+ display: block;
}
.xgplayer-is-error .xgplayer-error {
- display: flex;
+ display: flex;
}
.xgplayer .xgplayer-prompt {
- display: block;
- pointer-events: none;
- position: absolute;
- z-index: 1;
- padding: 6px 12px 5px;
- opacity: 0;
- left: 10px;
- background: rgba(0, 0, 0, 0.5);
- border-radius: 50px;
- font-size: 12px;
- line-height: 17px;
- text-align: center;
- color: #fff;
+ display: block;
+ pointer-events: none;
+ position: absolute;
+ z-index: 1;
+ padding: 6px 12px 5px;
+ opacity: 0;
+ left: 10px;
+ background: rgba(0, 0, 0, 0.5);
+ border-radius: 50px;
+ font-size: 12px;
+ line-height: 17px;
+ text-align: center;
+ color: #fff;
}
.xgplayer .xgplayer-prompt.show {
- display: block;
- opacity: 1;
- z-index: 10;
- pointer-events: initial;
+ display: block;
+ opacity: 1;
+ z-index: 10;
+ pointer-events: initial;
}
.xgplayer .xgplayer-prompt.arrow {
- transform: translate(-50%);
+ transform: translate(-50%);
}
.xgplayer .xgplayer-prompt.arrow:after {
- content: "";
- display: block;
- position: absolute;
- left: 50%;
- bottom: 0;
- width: 0;
- height: 0;
- border-left: 6px solid transparent;
- border-right: 6px solid transparent;
- border-top: 8px solid rgba(0, 0, 0, 0.5);
- transform: translate(-50%, 100%);
+ content: '';
+ display: block;
+ position: absolute;
+ left: 50%;
+ bottom: 0;
+ width: 0;
+ height: 0;
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ border-top: 8px solid rgba(0, 0, 0, 0.5);
+ transform: translate(-50%, 100%);
}
.xgplayer .xgplayer-prompt .highlight {
- display: inline-block;
- margin-left: 6px;
- color: #13c16d;
- cursor: pointer;
+ display: inline-block;
+ margin-left: 6px;
+ color: #13c16d;
+ cursor: pointer;
}
.xgplayer.xgplayer-is-error .xgplayer-prompt.show {
- display: none;
- opacity: 1;
+ display: none;
+ opacity: 1;
}
.xgplayer .xgplayer-spot {
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- background: #fff;
- border-radius: 12px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ background: #fff;
+ border-radius: 12px;
}
.xgplayer .xgplayer-spot.mini {
- min-width: 6px;
- transform: translate(-50%);
+ min-width: 6px;
+ transform: translate(-50%);
}
.xgplayer .xgplayer-spot.active .xgplayer-spot-pop {
- display: block;
- opacity: 1;
- pointer-events: initial;
+ display: block;
+ opacity: 1;
+ pointer-events: initial;
}
.xgplayer .xgplayer-spot-pop {
- display: block;
- opacity: 0;
- pointer-events: none;
- position: absolute;
- left: 50%;
- bottom: 5px;
- padding-bottom: 5px;
- transform: translate(-50%);
+ display: block;
+ opacity: 0;
+ pointer-events: none;
+ position: absolute;
+ left: 50%;
+ bottom: 5px;
+ padding-bottom: 5px;
+ transform: translate(-50%);
}
.xgplayer-mobile .xgplayer-spot {
- height: 3px;
- min-width: 3px;
- top: 50%;
- opacity: 1;
- transform: translateY(-50%);
+ height: 3px;
+ min-width: 3px;
+ top: 50%;
+ opacity: 1;
+ transform: translateY(-50%);
}
.xgplayer-mobile .xgplayer-spot.mini {
- min-width: 3px;
- transform: translate(-50%, -50%);
+ min-width: 3px;
+ transform: translate(-50%, -50%);
}
.xgplayer .xgplayer-progress.active .xgplayer-spot {
- opacity: 1;
- transition: opacity 0.3s;
- visibility: visible;
+ opacity: 1;
+ transition: opacity 0.3s;
+ visibility: visible;
}
.xgplayer .xg-spot-info {
- position: absolute;
- left: 0;
- bottom: 100%;
- display: none;
+ position: absolute;
+ left: 0;
+ bottom: 100%;
+ display: none;
}
.xgplayer .xg-spot-info.short-line .xg-spot-line {
- height: 6px;
+ height: 6px;
}
.xgplayer .xg-spot-info.short-line .xg-spot-content {
- bottom: -4px;
+ bottom: -4px;
}
.xgplayer .xg-spot-info.no-thumbnail .xg-spot-thumbnail {
- display: none;
+ display: none;
}
.xgplayer .xg-spot-info.no-thumbnail .xgplayer-progress-point {
- display: block;
+ display: block;
}
.xgplayer .xg-spot-info.no-timepoint .xgplayer-progress-point,
.xgplayer .xg-spot-info.hide {
- display: none;
+ display: none;
}
.xgplayer .xgplayer-progress.active .xg-spot-info {
- display: block;
+ display: block;
}
.xgplayer .xgplayer-progress.active .xg-spot-info.hide {
- display: none;
+ display: none;
}
.xgplayer .xg-spot-line {
- position: relative;
- bottom: -7px;
- margin-left: 50%;
- display: block;
- width: 1px;
- height: 41px;
- background-color: #fff;
- pointer-events: none;
+ position: relative;
+ bottom: -7px;
+ margin-left: 50%;
+ display: block;
+ width: 1px;
+ height: 41px;
+ background-color: #fff;
+ pointer-events: none;
}
.xgplayer .xgplayer-progress-point {
- display: none;
- position: relative;
- bottom: -4px;
- left: 50%;
- transform: translate(-50%);
- background: rgba(0, 0, 0, 0.54);
- font-size: 11px;
- color: #fff;
- padding: 4px 6px;
- border-radius: 4px;
- text-align: center;
- opacity: 0.85;
- white-space: nowrap;
+ display: none;
+ position: relative;
+ bottom: -4px;
+ left: 50%;
+ transform: translate(-50%);
+ background: rgba(0, 0, 0, 0.54);
+ font-size: 11px;
+ color: #fff;
+ padding: 4px 6px;
+ border-radius: 4px;
+ text-align: center;
+ opacity: 0.85;
+ white-space: nowrap;
}
.xgplayer .xg-spot-content {
- position: relative;
- bottom: -7px;
- color: #fff;
- border-radius: 2px 2px 0 0;
+ position: relative;
+ bottom: -7px;
+ color: #fff;
+ border-radius: 2px 2px 0 0;
}
.xgplayer .xg-spot-ext-text {
- position: relative;
- bottom: -7px;
+ position: relative;
+ bottom: -7px;
}
.xgplayer .xg-spot-thumbnail {
- position: relative;
- background-color: #111010;
- pointer-events: none;
- border-radius: 2px 2px 0 0;
+ position: relative;
+ background-color: #111010;
+ pointer-events: none;
+ border-radius: 2px 2px 0 0;
}
.xgplayer .xg-spot-time {
- position: absolute;
- bottom: 2px;
- font-size: 12px;
- line-height: 16.8px;
- left: 50%;
- transform: translate(-50%);
- pointer-events: none;
+ position: absolute;
+ bottom: 2px;
+ font-size: 12px;
+ line-height: 16.8px;
+ left: 50%;
+ transform: translate(-50%);
+ pointer-events: none;
}
.xgplayer .progress-thumbnail {
- margin: 0 auto;
- display: block;
+ margin: 0 auto;
+ display: block;
}
.xgplayer .xg-spot-text {
- display: none;
- padding: 5px 8px;
- background: rgba(0, 0, 0, 0.8);
- border-radius: 0 0 2px 2px;
- pointer-events: none;
- box-sizing: border-box;
+ display: none;
+ padding: 5px 8px;
+ background: rgba(0, 0, 0, 0.8);
+ border-radius: 0 0 2px 2px;
+ pointer-events: none;
+ box-sizing: border-box;
}
.xgplayer .spot-inner-text {
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- line-height: 20px;
- font-size: 12px;
- max-height: 40px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ line-height: 20px;
+ font-size: 12px;
+ max-height: 40px;
}
.xgplayer .xg-spot-content.show-text .xg-spot-text {
- display: block;
+ display: block;
}
.xgplayer .product .xg-spot-text {
- background: #3370ff;
+ background: #3370ff;
}
.xgplayer .product .xg-spot-line {
- border-left: 10px solid transparent;
- border-right: 10px solid transparent;
- border-top: 7px solid #3370ff;
- width: 0;
- height: 15px;
- left: -10px;
- background: none;
+ border-left: 10px solid transparent;
+ border-right: 10px solid transparent;
+ border-top: 7px solid #3370ff;
+ width: 0;
+ height: 15px;
+ left: -10px;
+ background: none;
}
.xgplayer .xgvideo-preview {
- position: absolute;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- opacity: 0;
- visibility: hidden;
- transition: visibility 0.3s, opacity 0.3s;
- background-color: #000;
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ opacity: 0;
+ visibility: hidden;
+ transition:
+ visibility 0.3s,
+ opacity 0.3s;
+ background-color: #000;
}
.xgplayer .xgvideo-preview .xgvideo-thumbnail {
- position: relative;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- border-radius: 0;
+ position: relative;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ border-radius: 0;
}
.xgplayer .xgvideo-preview.show {
- opacity: 1;
- visibility: visible;
+ opacity: 1;
+ visibility: visible;
}
.xgplayer-dynamic-bg,
.xgplayer-dynamic-bg canvas,
.xgplayer-dynamic-bg xgmask,
.xgplayer-dynamic-bg xgfilter {
- display: block;
- position: absolute;
- top: 0;
- left: 0;
- height: 100%;
- width: 100%;
- pointer-events: none;
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ pointer-events: none;
}
.xgplayer-dynamic-bg canvas {
- transform: translateZ(0);
+ transform: translateZ(0);
}
.xgplayer-dynamic-bg xgmask {
- background: rgba(0, 0, 0, 0.7);
+ background: rgba(0, 0, 0, 0.7);
}
diff --git a/src/plugins/registerExternalPlugin/checkPluginAvailable.ts b/src/plugins/registerExternalPlugin/checkPluginAvailable.ts
index 9e13521..82734eb 100644
--- a/src/plugins/registerExternalPlugin/checkPluginAvailable.ts
+++ b/src/plugins/registerExternalPlugin/checkPluginAvailable.ts
@@ -1,36 +1,35 @@
-import type { Plugin, registerComponentOption } from "@/class/PluginCenter";
+import type { Plugin, registerComponentOption } from '@/class/PluginCenter'
export function checkNormalPlugin(obj: any): obj is Plugin {
- return (
- typeof obj === "object" &&
- obj!== null &&
- typeof obj.name === "string" &&
- (obj.icon === undefined || typeof obj.icon === "object") &&
- typeof obj.disable === "boolean" &&
- Array.isArray(obj.group) &&
- obj.group.every((group: any) => typeof group === "string") &&
- typeof obj.priority === "number" &&
- typeof obj.filter === "function" &&
- typeof obj.func === "function"
- );
+ return (
+ typeof obj === 'object' &&
+ obj !== null &&
+ typeof obj.name === 'string' &&
+ (obj.icon === undefined || typeof obj.icon === 'object') &&
+ typeof obj.disable === 'boolean' &&
+ Array.isArray(obj.group) &&
+ obj.group.every((group: any) => typeof group === 'string') &&
+ typeof obj.priority === 'number' &&
+ typeof obj.filter === 'function' &&
+ typeof obj.func === 'function'
+ )
}
-
-export function checkComponentPlugin(
- obj: any
-): obj is registerComponentOption {
- return (
- typeof obj === "object" &&
- obj!== null &&
- typeof obj.key === "string" &&
- typeof obj.name === "string" &&
- (obj.icon === undefined || typeof obj.icon === "object") &&
- typeof obj.getComponent === "function" &&
- ((obj.group === undefined) || (Array.isArray(obj.group) && obj.group.every((item: any) => typeof item === "string"))) &&
- typeof obj.filter === "function" &&
- (obj.disable === undefined || typeof obj.disable === "boolean") &&
- (obj.exitConfirm === undefined || typeof obj.exitConfirm === "boolean") &&
- (obj.single === undefined || typeof obj.single === "boolean") &&
- (obj.priority === undefined || typeof obj.priority === "number")
- );
-}
\ No newline at end of file
+export function checkComponentPlugin(obj: any): obj is registerComponentOption {
+ return (
+ typeof obj === 'object' &&
+ obj !== null &&
+ typeof obj.key === 'string' &&
+ typeof obj.name === 'string' &&
+ (obj.icon === undefined || typeof obj.icon === 'object') &&
+ typeof obj.getComponent === 'function' &&
+ (obj.group === undefined ||
+ (Array.isArray(obj.group) &&
+ obj.group.every((item: any) => typeof item === 'string'))) &&
+ typeof obj.filter === 'function' &&
+ (obj.disable === undefined || typeof obj.disable === 'boolean') &&
+ (obj.exitConfirm === undefined || typeof obj.exitConfirm === 'boolean') &&
+ (obj.single === undefined || typeof obj.single === 'boolean') &&
+ (obj.priority === undefined || typeof obj.priority === 'number')
+ )
+}
diff --git a/src/plugins/registerExternalPlugin/export.ts b/src/plugins/registerExternalPlugin/export.ts
index f695bbc..7f4d5a2 100644
--- a/src/plugins/registerExternalPlugin/export.ts
+++ b/src/plugins/registerExternalPlugin/export.ts
@@ -1,29 +1,29 @@
-import { Plugin, PluginGroup } from "@/class/PluginCenter";
-import { LogoGithub } from "@vicons/ionicons5";
-import { PluginExportType } from "@/types/type";
-import { shallowRef } from "vue";
-import registerExternalPlugin from "./registerExternalPlugin";
+import { Plugin, PluginGroup } from '@/class/PluginCenter'
+import { LogoGithub } from '@vicons/ionicons5'
+import { PluginExportType } from '@/types/type'
+import { shallowRef } from 'vue'
+import registerExternalPlugin from './registerExternalPlugin'
const pluginConfig: Plugin = {
- name: "导入插件",
- icon: shallowRef(LogoGithub),
- filter: (vDirs, vFiles) => {
- if (vDirs.length !== 0) {
- return false;
- }
- if (vFiles.length !== 1) {
- return false;
- }
- return vFiles[0].name.endsWith('js')
- },
- disable: false,
- group: [PluginGroup.default],
- func: registerExternalPlugin,
- priority: -1
-};
+ name: '导入插件',
+ icon: shallowRef(LogoGithub),
+ filter: (vDirs, vFiles) => {
+ if (vDirs.length !== 0) {
+ return false
+ }
+ if (vFiles.length !== 1) {
+ return false
+ }
+ return vFiles[0].name.endsWith('js')
+ },
+ disable: false,
+ group: [PluginGroup.default],
+ func: registerExternalPlugin,
+ priority: -1
+}
-export default pluginConfig;
+export default pluginConfig
-export const type = PluginExportType.default;
+export const type = PluginExportType.default
-export const key = 'registerExternalPlugin';
+export const key = 'registerExternalPlugin'
diff --git a/src/plugins/registerExternalPlugin/registerExternalPlugin.ts b/src/plugins/registerExternalPlugin/registerExternalPlugin.ts
index 692e5ee..d09cdec 100644
--- a/src/plugins/registerExternalPlugin/registerExternalPlugin.ts
+++ b/src/plugins/registerExternalPlugin/registerExternalPlugin.ts
@@ -1,36 +1,42 @@
-import VirtualDirectory, { VirtualFile } from "@/class/VirtualDirectory";
+import VirtualDirectory, { VirtualFile } from '@/class/VirtualDirectory'
// import useMiaoFetchApi from "@/hooks/useMiaoFetchApi";
-import { PluginExportType, usePluginHooksType } from "@/types/type";
-import type { Plugin, registerComponentOption } from "@/class/PluginCenter";
-import { checkComponentPlugin, checkNormalPlugin } from "./checkPluginAvailable";
+import { PluginExportType, usePluginHooksType } from '@/types/type'
+import type { Plugin, registerComponentOption } from '@/class/PluginCenter'
+import { checkComponentPlugin, checkNormalPlugin } from './checkPluginAvailable'
// const miaoFetchApi = useMiaoFetchApi()
-export default async function registerExternalPlugin(_VDirectories: VirtualDirectory[], VFiles: VirtualFile[], hooks: usePluginHooksType) {
- try {
- const targetPluginVFile = VFiles[0] as VirtualFile
- const plugin = await import(/* @vite-ignore */ targetPluginVFile.url) as {
- default: registerComponentOption | Plugin;
- type: PluginExportType;
- key?: string;
- }
- const pc = hooks.getPluginCenter()
- if (plugin.type === PluginExportType.default) {
- if (checkNormalPlugin(plugin.default) === false) {
- throw('插件不合法')
- }
- pc.register(plugin.key ?? `${Math.random()}`, plugin.default as Plugin)
- } else {
- if (checkComponentPlugin(plugin.default) === false) {
- throw('插件不合法')
- }
- pc.registerComponent(plugin.default as registerComponentOption)
- }
- } catch (e) {
- console.error(e);
- hooks.globalAlertTip('导入外部插件失败', {
- type: 'error',
- timeout: 3000
- })
- }
-}
\ No newline at end of file
+export default async function registerExternalPlugin(
+ _VDirectories: VirtualDirectory[],
+ VFiles: VirtualFile[],
+ hooks: usePluginHooksType
+) {
+ try {
+ const targetPluginVFile = VFiles[0] as VirtualFile
+ const plugin = (await import(
+ /* @vite-ignore */ targetPluginVFile.url
+ )) as {
+ default: registerComponentOption | Plugin
+ type: PluginExportType
+ key?: string
+ }
+ const pc = hooks.getPluginCenter()
+ if (plugin.type === PluginExportType.default) {
+ if (checkNormalPlugin(plugin.default) === false) {
+ throw '插件不合法'
+ }
+ pc.register(plugin.key ?? `${Math.random()}`, plugin.default as Plugin)
+ } else {
+ if (checkComponentPlugin(plugin.default) === false) {
+ throw '插件不合法'
+ }
+ pc.registerComponent(plugin.default as registerComponentOption)
+ }
+ } catch (e) {
+ console.error(e)
+ hooks.globalAlertTip('导入外部插件失败', {
+ type: 'error',
+ timeout: 3000
+ })
+ }
+}
diff --git a/src/styles/default.scss b/src/styles/default.scss
index db42e58..b95486a 100644
--- a/src/styles/default.scss
+++ b/src/styles/default.scss
@@ -1,4 +1,3 @@
-:root
-body {
- background-color: aliceblue;
-}
\ No newline at end of file
+:root body {
+ background-color: aliceblue;
+}
diff --git a/src/types/fetch.ts b/src/types/fetch.ts
index 0da0ea7..a247758 100644
--- a/src/types/fetch.ts
+++ b/src/types/fetch.ts
@@ -1,39 +1,39 @@
-import { AxiosRequestConfig } from "axios";
-import { directory, file } from "./type";
+import { AxiosRequestConfig } from 'axios'
+import { directory, file } from './type'
export type miaoFetchConfig = {
- retry?: number
- axiosOption?: AxiosRequestConfig
+ retry?: number
+ axiosOption?: AxiosRequestConfig
}
-export type getOption = {} & miaoFetchConfig;
+export type getOption = {} & miaoFetchConfig
export type getFileOption = {
- /**
- * 下载进度回调函数
- * @param {any} percent 进度百分比，float类型, 0-1
- */
- onProcess?: (percent: number) => void;
-} & miaoFetchConfig;
+ /**
+ * 下载进度回调函数
+ * @param {any} percent 进度百分比，float类型, 0-1
+ */
+ onProcess?: (percent: number) => void
+} & miaoFetchConfig
-export type getResponse = (file | directory)[];
+export type getResponse = (file | directory)[]
export type uploadOption = {
- /**
- * 上传进度回调函数
- * @param {any} percent 进度百分比，float类型, 0-1
- */
- onProcess?: (percent: number) => void;
- /**
- * 上传文件执行的操作
- * write即为覆盖写
- * append即为增量写
- */
- type?: "write" | "append";
-} & miaoFetchConfig;
+ /**
+ * 上传进度回调函数
+ * @param {any} percent 进度百分比，float类型, 0-1
+ */
+ onProcess?: (percent: number) => void
+ /**
+ * 上传文件执行的操作
+ * write即为覆盖写
+ * append即为增量写
+ */
+ type?: 'write' | 'append'
+} & miaoFetchConfig
-export type deleteOption = {} & miaoFetchConfig;
-export type renameOption = {} & miaoFetchConfig;
+export type deleteOption = {} & miaoFetchConfig
+export type renameOption = {} & miaoFetchConfig
export type cutOption = {} & miaoFetchConfig
export type mkdirOption = {} & miaoFetchConfig
-export type queryOption = {} & miaoFetchConfig;
+export type queryOption = {} & miaoFetchConfig
diff --git a/src/types/type.ts b/src/types/type.ts
index 2ab7124..c4cc6e9 100644
--- a/src/types/type.ts
+++ b/src/types/type.ts
@@ -1,48 +1,54 @@
-import PluginCenter from "@/class/PluginCenter";
-import VirtualDirectory from "@/class/VirtualDirectory";
-import type { VirtualPages } from "@/class/VirtualPage";
+import PluginCenter from '@/class/PluginCenter'
+import VirtualDirectory from '@/class/VirtualDirectory'
+import type { VirtualPages } from '@/class/VirtualPage'
export type stats = {
- atimeMs: number; // 上次访问时间（毫秒）
- birthtimeMs: number; // 创建时间（毫秒）
- ctimeMs: number; // 状态更改时间（毫秒）
- mtimeMs: number; // 上次修改时间（毫秒）
-};
+ atimeMs: number // 上次访问时间（毫秒）
+ birthtimeMs: number // 创建时间（毫秒）
+ ctimeMs: number // 状态更改时间（毫秒）
+ mtimeMs: number // 上次修改时间（毫秒）
+}
export type file = {
- name: string;
- size: number;
- type?: "file";
- stats: stats;
-};
+ name: string
+ size: number
+ type?: 'file'
+ stats: stats
+}
export type directory = {
- name: string;
- // 考虑到可能还没请求过来
- content?: (file | directory)[];
- type?: "directory";
- stats: stats;
- parent?: directory;
-};
+ name: string
+ // 考虑到可能还没请求过来
+ content?: (file | directory)[]
+ type?: 'directory'
+ stats: stats
+ parent?: directory
+}
-export type alertTipType = (content: string, options?: AlertTipMessageOptions) => (newContent: string, newOptions?: AlertTipMessageOptions) => void;
+export type alertTipType = (
+ content: string,
+ options?: AlertTipMessageOptions
+) => (newContent: string, newOptions?: AlertTipMessageOptions) => void
export interface AlertTipMessageOptions {
- type?: "info" | "success" | "error";
- timeout?: number;
- id?: number;
+ type?: 'info' | 'success' | 'error'
+ timeout?: number
+ id?: number
}
export enum PluginExportType {
- default = "default",
- component = "component"
+ default = 'default',
+ component = 'component'
}
export interface usePluginHooksType {
- globalAlertTip: alertTipType;
- getViews: () => VirtualPages;
- getPluginCenter: () => PluginCenter;
- getRootVDirectory: () => VirtualDirectory;
+ globalAlertTip: alertTipType
+ getViews: () => VirtualPages
+ getPluginCenter: () => PluginCenter
+ getRootVDirectory: () => VirtualDirectory
}
-export type Equals = (() => T extends X ? 1 : 2) extends () => T extends Y ? 1 : 2 ? true : false;
+export type Equals =
+ (() => T extends X ? 1 : 2) extends () => T extends Y ? 1 : 2
+ ? true
+ : false
-
+
+
+
+
diff --git a/src/plugins/miaoPluginTemplate/_export.ts b/src/plugins/miaoPluginTemplate/_export.ts
index b0715e6..be07317 100644
--- a/src/plugins/miaoPluginTemplate/_export.ts
+++ b/src/plugins/miaoPluginTemplate/_export.ts
@@ -2,25 +2,24 @@
import { registerComponentOption } from '@/class/PluginCenter'
const pluginConfig: registerComponentOption = {
- key: 'yourPluginKey',
- name: 'yourPluginName',
- // icon: LogoChrome,
- getComponent: async () => null,
- // (await import('yourPluginPath')).default,
- filter: (vDirs, vFiles) => {
- if (vDirs.length !== 0) {
- return false
- }
- if (vFiles.length !== 1) {
- return false
- }
- return vFiles[0].name.endsWith('?')
- },
- disable: true
+ key: 'yourPluginKey',
+ name: 'yourPluginName',
+ // icon: LogoChrome,
+ getComponent: async () => null,
+ // (await import('yourPluginPath')).default,
+ filter: (vDirs, vFiles) => {
+ if (vDirs.length !== 0) {
+ return false
+ }
+ if (vFiles.length !== 1) {
+ return false
+ }
+ return vFiles[0].name.endsWith('?')
+ },
+ disable: true
}
export default pluginConfig
-
import { PluginExportType } from '@/types/type'
-export const type = PluginExportType.component
\ No newline at end of file
+export const type = PluginExportType.component
diff --git a/src/plugins/miaoPluginTemplate/template.vue b/src/plugins/miaoPluginTemplate/template.vue
index 7ddcd71..808bb8f 100644
--- a/src/plugins/miaoPluginTemplate/template.vue
+++ b/src/plugins/miaoPluginTemplate/template.vue
@@ -1,5 +1,5 @@
-
+
diff --git a/src/plugins/miaoVideoPlayer/export.ts b/src/plugins/miaoVideoPlayer/export.ts
index cb46c92..73df703 100644
--- a/src/plugins/miaoVideoPlayer/export.ts
+++ b/src/plugins/miaoVideoPlayer/export.ts
@@ -2,32 +2,31 @@ import { registerComponentOption } from '@/class/PluginCenter'
import PlayCircle from '@vicons/ionicons5/es/PlayCircle'
const pluginConfig: registerComponentOption = {
- key: 'miaoVideoPlayer',
- name: '视频',
- icon: PlayCircle,
- getComponent: async () =>
- (await import('@/plugins/miaoVideoPlayer/miaoVideoPlayer.vue')).default,
- filter: (vDirs, vFiles) => {
- if (vDirs.length !== 0) {
- return false
- }
- if (vFiles.length === 0) {
- return false
- }
- for (let i of vFiles) {
- for (let s of ['mp4', 'mkv']) {
- if (i.name.endsWith(s)) {
- return true
- }
+ key: 'miaoVideoPlayer',
+ name: '视频',
+ icon: PlayCircle,
+ getComponent: async () =>
+ (await import('@/plugins/miaoVideoPlayer/miaoVideoPlayer.vue')).default,
+ filter: (vDirs, vFiles) => {
+ if (vDirs.length !== 0) {
+ return false
+ }
+ if (vFiles.length === 0) {
+ return false
+ }
+ for (let i of vFiles) {
+ for (let s of ['mp4', 'mkv']) {
+ if (i.name.endsWith(s)) {
+ return true
}
- }
- return false
- },
- priority: 6
+ }
+ }
+ return false
+ },
+ priority: 6
}
export default pluginConfig
-
import { PluginExportType } from '@/types/type'
-export const type = PluginExportType.component
\ No newline at end of file
+export const type = PluginExportType.component
diff --git a/src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue b/src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue
index cfc34e3..d236b26 100644
--- a/src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue
+++ b/src/plugins/miaoVideoPlayer/miaoVideoPlayer.vue
@@ -1,9 +1,12 @@
-
- --
-
-
- -
-
-
- 还原缩放
-
-
- +
-
-
- ++
-
+
+
+
+
-
-
-
+
+ --
-
-
-
-
+ -
+
+
+ 还原缩放
+
+
+ +
+
+
+ ++
+
+
+
+
+
-
-
-
+
+
+