Convert socketStore and stateStore to ts
This commit is contained in:
arabcoders
parent
1580388b96
commit
84f623f2e4
6 changed files with 305 additions and 206 deletions
|
|
@ -1,163 +0,0 @@
|
|||
import { io } from "socket.io-client";
|
||||
import { ag } from "~/utils/index"
|
||||
|
||||
export const useSocketStore = defineStore('socket', () => {
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
const config = useConfigStore()
|
||||
const stateStore = useStateStore()
|
||||
const toast = useNotification()
|
||||
|
||||
const socket = ref(null)
|
||||
const isConnected = ref(false)
|
||||
|
||||
const connect = () => {
|
||||
let opts = {
|
||||
transports: ['websocket', 'polling'],
|
||||
withCredentials: true,
|
||||
}
|
||||
|
||||
let url = runtimeConfig.public.wss
|
||||
|
||||
if ('development' !== runtimeConfig.public?.APP_ENV) {
|
||||
url = window.origin;
|
||||
opts.path = `${runtimeConfig.app.baseURL.replace(/\/$/, '')}/socket.io`;
|
||||
}
|
||||
|
||||
socket.value = io(url, opts)
|
||||
|
||||
socket.value.on('connect', () => isConnected.value = true);
|
||||
socket.value.on('disconnect', () => isConnected.value = false);
|
||||
|
||||
socket.value.on('initial_data', stream => {
|
||||
const initialData = JSON.parse(stream)
|
||||
|
||||
config.setAll({
|
||||
app: initialData['config'],
|
||||
tasks: initialData['tasks'],
|
||||
folders: initialData['folders'],
|
||||
presets: initialData['presets'],
|
||||
paused: Boolean(initialData['paused'])
|
||||
})
|
||||
|
||||
stateStore.addAll('queue', initialData['queue'] ?? {})
|
||||
stateStore.addAll('history', initialData['done'] ?? {})
|
||||
})
|
||||
|
||||
socket.value.on('added', stream => {
|
||||
const item = JSON.parse(stream);
|
||||
stateStore.add('queue', item._id, item);
|
||||
toast.success(`Item queued: ${ag(stateStore.get('queue', item._id, {}), 'title')}`);
|
||||
});
|
||||
|
||||
socket.value.on('error', stream => {
|
||||
const json = JSON.parse(stream);
|
||||
toast.error(`${json.data?.id ?? json?.type}: ${json?.message}`, json.data || {});
|
||||
});
|
||||
|
||||
socket.value.on('log_info', stream => {
|
||||
const json = JSON.parse(stream);
|
||||
toast.info(json?.message, json.data || {});
|
||||
});
|
||||
|
||||
socket.value.on('log_success', stream => {
|
||||
const json = JSON.parse(stream);
|
||||
toast.success(json?.message, json.data || {});
|
||||
});
|
||||
|
||||
socket.value.on('log_warning', stream => {
|
||||
const json = JSON.parse(stream);
|
||||
toast.warning(json?.message, json.data || {});
|
||||
});
|
||||
|
||||
socket.value.on('log_error', stream => {
|
||||
const json = JSON.parse(stream);
|
||||
toast.error(json?.message, json.data || {});
|
||||
});
|
||||
|
||||
socket.value.on('completed', stream => {
|
||||
const item = JSON.parse(stream);
|
||||
|
||||
if (true === stateStore.has('queue', item._id)) {
|
||||
stateStore.remove('queue', item._id);
|
||||
}
|
||||
|
||||
stateStore.add('history', item._id, item);
|
||||
});
|
||||
|
||||
socket.value.on('cancelled', stream => {
|
||||
const item = JSON.parse(stream);
|
||||
const id = item._id
|
||||
|
||||
if (true !== stateStore.has('queue', id)) {
|
||||
return
|
||||
}
|
||||
|
||||
toast.warning(`Download cancelled: ${ag(stateStore.get('queue', id, {}), 'title')}`);
|
||||
|
||||
if (true === stateStore.has('queue', id)) {
|
||||
stateStore.remove('queue', id);
|
||||
}
|
||||
});
|
||||
|
||||
socket.value.on('cleared', stream => {
|
||||
const item = JSON.parse(stream);
|
||||
const id = item._id
|
||||
|
||||
if (true !== stateStore.has('history', id)) {
|
||||
return
|
||||
}
|
||||
|
||||
stateStore.remove('history', id);
|
||||
});
|
||||
|
||||
socket.value.on("updated", stream => {
|
||||
const data = JSON.parse(stream);
|
||||
|
||||
if (true === stateStore.has('history', data._id)) {
|
||||
stateStore.update('history', data._id, data);
|
||||
return;
|
||||
}
|
||||
|
||||
let dl = stateStore.get('queue', data._id, {});
|
||||
data.deleting = dl?.deleting;
|
||||
stateStore.update('queue', data._id, data);
|
||||
});
|
||||
|
||||
socket.value.on("update", stream => {
|
||||
const data = JSON.parse(stream);
|
||||
if (true === stateStore.has('history', data._id)) {
|
||||
stateStore.update('history', data._id, data);
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
socket.value.on('paused', data => {
|
||||
const json = JSON.parse(data);
|
||||
const pausedState = Boolean(json.paused);
|
||||
config.update('paused', pausedState);
|
||||
|
||||
if (false === pausedState) {
|
||||
toast.success('Download queue resumed.');
|
||||
return;
|
||||
}
|
||||
|
||||
toast.warning('Download queue paused.', {
|
||||
timeout: 10000,
|
||||
});
|
||||
});
|
||||
|
||||
socket.value.on('presets_update', data => config.update('presets', JSON.parse(data)));
|
||||
}
|
||||
|
||||
const on = (event, callback) => socket.value.on(event, callback);
|
||||
const off = (event, callback) => socket.value.off(event, callback);
|
||||
const emit = (event, data) => socket.value.emit(event, data);
|
||||
|
||||
if (false === isConnected.value) {
|
||||
connect();
|
||||
}
|
||||
|
||||
window.ws = socket.value;
|
||||
|
||||
return { connect, on, off, emit, socket, isConnected };
|
||||
});
|
||||
162
ui/stores/SocketStore.ts
Normal file
162
ui/stores/SocketStore.ts
Normal file
|
|
@ -0,0 +1,162 @@
|
|||
import { io } from "socket.io-client";
|
||||
import { ag } from "~/utils/index"
|
||||
import type { Socket as IOSocket, SocketOptions } from "socket.io-client"
|
||||
import type { ManagerOptions } from "socket.io-client";
|
||||
|
||||
export const useSocketStore = defineStore('socket', () => {
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
const config = useConfigStore()
|
||||
const stateStore = useStateStore()
|
||||
const toast = useNotification()
|
||||
|
||||
const socket = ref<IOSocket | null>(null)
|
||||
const isConnected = ref<boolean>(false)
|
||||
|
||||
const connect = () => {
|
||||
let opts = {
|
||||
transports: ['websocket', 'polling'],
|
||||
withCredentials: true,
|
||||
} as Partial<ManagerOptions & SocketOptions>
|
||||
|
||||
let url = runtimeConfig.public.wss
|
||||
|
||||
if ('development' !== runtimeConfig.public?.APP_ENV) {
|
||||
url = window.origin;
|
||||
opts.path = `${runtimeConfig.app.baseURL.replace(/\/$/, '')}/socket.io`;
|
||||
}
|
||||
|
||||
socket.value = io(url, opts)
|
||||
|
||||
socket.value.on('connect', () => isConnected.value = true);
|
||||
socket.value.on('disconnect', () => isConnected.value = false);
|
||||
|
||||
socket.value.on('initial_data', stream => {
|
||||
const json = JSON.parse(stream)
|
||||
|
||||
config.setAll({
|
||||
app: json.data.config,
|
||||
tasks: json.data.tasks,
|
||||
folders: json.data.folders,
|
||||
presets: json.data.presets,
|
||||
paused: Boolean(json.data.paused)
|
||||
})
|
||||
|
||||
stateStore.addAll('queue', json.data.queue || {})
|
||||
stateStore.addAll('history', json.data.done || {})
|
||||
})
|
||||
|
||||
socket.value.on('added', stream => {
|
||||
const json = JSON.parse(stream);
|
||||
stateStore.add('queue', json.data._id, json.data);
|
||||
toast.success(`Item queued: ${ag(stateStore.get('queue', json.data._id, {}), 'title')}`);
|
||||
});
|
||||
|
||||
socket.value.on('error', stream => {
|
||||
const json = JSON.parse(stream);
|
||||
toast.error(`${json.data?.id}: ${json?.message || json?.data?.message}`, json.data || {});
|
||||
});
|
||||
|
||||
['log_info', 'log_success', 'log_warning', 'log_error'].forEach(event => socket.value?.on(event, stream => {
|
||||
const json = JSON.parse(stream);
|
||||
const message = json?.message || json?.data?.message;
|
||||
const data = json.data?.data || json.data || {};
|
||||
switch (event) {
|
||||
case 'log_info':
|
||||
toast.info(message, data);
|
||||
break;
|
||||
case 'log_success':
|
||||
toast.success(message, data);
|
||||
break;
|
||||
case 'log_warning':
|
||||
toast.warning(message, data);
|
||||
break;
|
||||
case 'log_error':
|
||||
toast.error(message, data);
|
||||
break;
|
||||
}
|
||||
}));
|
||||
|
||||
socket.value.on('completed', stream => {
|
||||
const json = JSON.parse(stream);
|
||||
|
||||
if (true === stateStore.has('queue', json.data._id)) {
|
||||
stateStore.remove('queue', json.data._id);
|
||||
}
|
||||
|
||||
stateStore.add('history', json.data._id, json.data);
|
||||
});
|
||||
|
||||
socket.value.on('cancelled', stream => {
|
||||
const item = JSON.parse(stream);
|
||||
const id = item.data._id
|
||||
|
||||
if (true !== stateStore.has('queue', id)) {
|
||||
return
|
||||
}
|
||||
|
||||
toast.warning(`Download cancelled: ${ag(stateStore.get('queue', id, {}), 'title')}`);
|
||||
|
||||
if (true === stateStore.has('queue', id)) {
|
||||
stateStore.remove('queue', id);
|
||||
}
|
||||
});
|
||||
|
||||
socket.value.on('cleared', stream => {
|
||||
const item = JSON.parse(stream);
|
||||
const id = item.data._id
|
||||
|
||||
if (true !== stateStore.has('history', id)) {
|
||||
return
|
||||
}
|
||||
|
||||
stateStore.remove('history', id);
|
||||
});
|
||||
|
||||
socket.value.on("updated", stream => {
|
||||
const json = JSON.parse(stream);
|
||||
const id = json.data._id;
|
||||
|
||||
if (true === stateStore.has('history', id)) {
|
||||
stateStore.update('history', id, json.data);
|
||||
return;
|
||||
}
|
||||
|
||||
stateStore.update('queue', id, json.data);
|
||||
});
|
||||
|
||||
socket.value.on("update", stream => {
|
||||
const json = JSON.parse(stream);
|
||||
if (true === stateStore.has('history', json.data._id)) {
|
||||
stateStore.update('history', json.data._id, json.data);
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
socket.value.on('paused', data => {
|
||||
const json = JSON.parse(data);
|
||||
const pausedState = Boolean(json.data.paused);
|
||||
config.update('paused', pausedState);
|
||||
|
||||
if (false === pausedState) {
|
||||
toast.success('Download queue resumed.');
|
||||
return;
|
||||
}
|
||||
|
||||
toast.warning('Download queue paused.', { timeout: 10000 });
|
||||
});
|
||||
|
||||
socket.value.on('presets_update', (data: string) => config.update('presets', JSON.parse(data).data || []));
|
||||
}
|
||||
|
||||
const emit = (event: string, data?: any): any => socket.value?.emit(event, data)
|
||||
const on = (event: string, callback: (...args: any[]) => void): any => socket.value?.on(event, callback)
|
||||
const off = (event: string, callback: (...args: any[]) => void): any => socket.value?.off(event, callback)
|
||||
|
||||
if (false === isConnected.value) {
|
||||
connect();
|
||||
}
|
||||
|
||||
window.ws = socket.value;
|
||||
|
||||
return { connect, on, off, emit, socket, isConnected };
|
||||
});
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
export const useStateStore = defineStore('state', () => {
|
||||
const state = reactive({
|
||||
queue: {},
|
||||
history: {}
|
||||
});
|
||||
|
||||
const actions = {
|
||||
add(type, key, value) {
|
||||
state[type][key] = value;
|
||||
},
|
||||
update(type, key, value) {
|
||||
state[type][key] = value;
|
||||
},
|
||||
remove(type, key) {
|
||||
if (state[type][key]) {
|
||||
delete state[type][key];
|
||||
}
|
||||
},
|
||||
get(type, key, defaultValue = null) {
|
||||
return state[type][key] || defaultValue;
|
||||
},
|
||||
has(type, key) {
|
||||
return !!state[type][key];
|
||||
},
|
||||
clearAll(type) {
|
||||
state[type] = {};
|
||||
},
|
||||
addAll(type, data) {
|
||||
state[type] = data;
|
||||
},
|
||||
move(fromType, toType, key) {
|
||||
if (state[fromType][key]) {
|
||||
state[toType][key] = state[fromType][key];
|
||||
delete state[fromType][key];
|
||||
}
|
||||
},
|
||||
count(type) {
|
||||
return Object.keys(state[type]).length;
|
||||
}
|
||||
}
|
||||
|
||||
return { ...toRefs(state), ...actions };
|
||||
});
|
||||
59
ui/stores/StateStore.ts
Normal file
59
ui/stores/StateStore.ts
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
import { defineStore } from 'pinia'
|
||||
import { reactive, toRefs } from 'vue'
|
||||
import type { StoreItem } from '~/types/store'
|
||||
|
||||
type StateType = 'queue' | 'history'
|
||||
type KeyType = string
|
||||
type ValueType = StoreItem
|
||||
|
||||
interface State {
|
||||
queue: Record<KeyType, ValueType>
|
||||
history: Record<KeyType, ValueType>
|
||||
}
|
||||
|
||||
export const useStateStore = defineStore('state', () => {
|
||||
const state = reactive<State>({ queue: {}, history: {} })
|
||||
|
||||
const add = (type: StateType, key: KeyType, value: ValueType): void => {
|
||||
state[type][key] = value
|
||||
}
|
||||
|
||||
const update = (type: StateType, key: KeyType, value: ValueType): void => {
|
||||
state[type][key] = value
|
||||
}
|
||||
|
||||
const remove = (type: StateType, key: KeyType): void => {
|
||||
if (state[type][key]) {
|
||||
delete state[type][key]
|
||||
}
|
||||
}
|
||||
|
||||
const get = (type: StateType, key: KeyType, defaultValue: ValueType | null | object = null): ValueType | null => {
|
||||
return state[type][key] || defaultValue
|
||||
}
|
||||
|
||||
const has = (type: StateType, key: KeyType): boolean => {
|
||||
return !!state[type][key]
|
||||
}
|
||||
|
||||
const clearAll = (type: StateType): void => {
|
||||
state[type] = {}
|
||||
}
|
||||
|
||||
const addAll = (type: StateType, data: Record<KeyType, ValueType>): void => {
|
||||
state[type] = data
|
||||
}
|
||||
|
||||
const move = (fromType: StateType, toType: StateType, key: KeyType): void => {
|
||||
if (state[fromType][key]) {
|
||||
state[toType][key] = state[fromType][key]
|
||||
delete state[fromType][key]
|
||||
}
|
||||
}
|
||||
|
||||
const count = (type: StateType): number => {
|
||||
return Object.keys(state[type]).length
|
||||
}
|
||||
|
||||
return { ...toRefs(state), add, update, remove, get, has, clearAll, addAll, move, count }
|
||||
})
|
||||
8
ui/types/sockets.d.ts
vendored
Normal file
8
ui/types/sockets.d.ts
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
export type Event = {
|
||||
id: str
|
||||
created_at: str
|
||||
event: str
|
||||
title: str | null = null
|
||||
message: str | null = null
|
||||
data: Any = { }
|
||||
}
|
||||
76
ui/types/store.d.ts
vendored
Normal file
76
ui/types/store.d.ts
vendored
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
export type ItemStatus = 'finished' | 'preparing' | 'error' | 'cancelled' | 'downloading' | 'postprocessing' | 'not_live' | null;
|
||||
export type StoreItem = {
|
||||
/** Unique identifier for the item */
|
||||
_id: string
|
||||
/** Error message if available */
|
||||
error: string | null
|
||||
/** Item source id */
|
||||
id: string
|
||||
/** Title of the item */
|
||||
title: string
|
||||
/** URL of the item */
|
||||
url: string
|
||||
/** Preset used for the item */
|
||||
preset: string
|
||||
/** Folder where the item is saved */
|
||||
folder: string
|
||||
/** Download directory */
|
||||
download_dir: string
|
||||
/** Temporary directory for the item */
|
||||
temp_dir: string
|
||||
/** Status of the item */
|
||||
status: ItemStatus
|
||||
/** If the item has cookies */
|
||||
cookies: string
|
||||
/** If the item has custom output_template */
|
||||
template: string
|
||||
/** If the item has custom output_template for chapters */
|
||||
template_chapter: string
|
||||
/** When the item was created */
|
||||
timestamp: number
|
||||
/** If the item is a live stream */
|
||||
is_live: boolean
|
||||
/** ISO 8601 formatted start time of the item */
|
||||
datetime: string
|
||||
/** Live stream start time if available */
|
||||
live_in: string | null
|
||||
/** File size of the item if available */
|
||||
file_size: number | null
|
||||
/** Custom yt-dlp command line arguments */
|
||||
cli: string
|
||||
/** If the item is auto-started */
|
||||
auto_start: boolean
|
||||
/** Options for the item */
|
||||
options: Record<string, unknown>
|
||||
/** Extras for the item */
|
||||
extras: {
|
||||
/** Which channel the item belongs to */
|
||||
channel?: string
|
||||
/** The video duration if available */
|
||||
duration?: number | null
|
||||
/** The video release date if available */
|
||||
release_in?: string
|
||||
/** The video thumbnail URL if available */
|
||||
thumbnail?: string
|
||||
/** The uploader of the item if available */
|
||||
uploader?: string
|
||||
}
|
||||
/** The item temporary filename */
|
||||
tmpfilename?: string | null
|
||||
/** The item filename */
|
||||
filename?: string | null
|
||||
/** Actual file size of the item if available */
|
||||
total_bytes?: number | null
|
||||
/** Estimated total bytes for the item if available */
|
||||
total_bytes_estimate?: number | null
|
||||
/** Downloaded bytes of the item if available */
|
||||
downloaded_bytes?: number | null
|
||||
/** Message attached with the item if available */
|
||||
msg?: string | null
|
||||
/** Progress percentage of the item if available */
|
||||
percent?: number | null
|
||||
/** Speed of the item download if available */
|
||||
speed?: number | null
|
||||
/** Time remaining for the item download if available */
|
||||
eta?: number | null
|
||||
}
|
||||
Loading…
Reference in a new issue