Loading...12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/module/live2d-event/hit-event.ts: -------------------------------------------------------------------------------- 1 | import { EventEmitter } from '@pixi/utils'; 2 | import Live2DSprite from '../live2d/Live2DSprite'; 3 | 4 | export default function registerHitEvent(sprite: Live2DSprite) { 5 | (sprite as EventEmitter).on('hit', (hitAreaName: string) => { 6 | const expressionManager = sprite.model.motionManager.expressionManager; 7 | 8 | switch (hitAreaName) { 9 | case 'head': 10 | expressionManager && expressionManager.setRandomExpression(); 11 | break; 12 | 13 | case 'body': 14 | case 'belly': 15 | sprite.model.motionManager.startRandomMotion('tapBody'); 16 | break; 17 | } 18 | }); 19 | } 20 | -------------------------------------------------------------------------------- /src/core/utils/string.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Generates a random ID with 5 characters. 3 | * 4 | * @see https://stackoverflow.com/a/8084248 5 | */ 6 | export function randomID() { 7 | return (Math.random() + 1) 8 | .toString(36) 9 | .substring(2, 7) 10 | .toUpperCase(); 11 | } 12 | 13 | /** 14 | * Generates a random CSS HSL color by given string. 15 | * 16 | * @see https://stackoverflow.com/a/21682946 17 | */ 18 | export function randomHSLColor(str: string, s = '100%', l = '30%') { 19 | let hash = 0, 20 | i, 21 | chr; 22 | for (i = 0; i < str.length; i++) { 23 | chr = str.charCodeAt(i); 24 | hash = (hash << 5) - hash + chr; 25 | hash |= 0; // Convert to 32bit integer 26 | } 27 | 28 | return `hsl(${hash % 360},${s},${l})`; 29 | } 30 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "experimentalDecorators": true, 4 | "incremental": true, 5 | "tsBuildInfoFile": ".tsbuildinfo", 6 | "target": "esnext", 7 | "module": "esnext", 8 | "strict": true, 9 | "importHelpers": true, 10 | "moduleResolution": "node", 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "sourceMap": true, 14 | "baseUrl": ".", 15 | "types": [ 16 | "webpack-env", 17 | "node" 18 | ], 19 | "paths": { 20 | "@/*": [ 21 | "src/*" 22 | ] 23 | }, 24 | "lib": [ 25 | "esnext", 26 | "dom", 27 | "dom.iterable", 28 | "scripthost" 29 | ] 30 | }, 31 | "include": [ 32 | "src/**/*.ts", 33 | "src/**/*.vue" 34 | ], 35 | "exclude": [ 36 | "node_modules" 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /scripts/build.js: -------------------------------------------------------------------------------- 1 | import fs from 'fs'; 2 | import chalk from 'chalk'; 3 | import { generate as generateProjectJSON } from './project-json-generator'; 4 | 5 | (async function setup() { 6 | console.log(chalk.black.bgBlue(' BUILD '), 'Wallpaper Engine'); 7 | 8 | try { 9 | copyFiles('assets/preview.jpg', 'dist/preview.jpg'); 10 | 11 | setupProjectJSON(); 12 | } catch (e) { 13 | console.warn(e); 14 | } 15 | })(); 16 | 17 | function copyFiles(from, to) { 18 | fs.copyFileSync(from, to); 19 | console.log(chalk.black.bgGreen(' WRITE '), chalk.green(to)); 20 | } 21 | 22 | function setupProjectJSON() { 23 | const jsonPath = 'dist/project.json'; 24 | const projectJSON = generateProjectJSON(); 25 | 26 | fs.writeFileSync(jsonPath, projectJSON); 27 | console.log(chalk.black.bgGreen(' WRITE '), chalk.green(jsonPath)); 28 | } 29 | -------------------------------------------------------------------------------- /src/module/index.ts: -------------------------------------------------------------------------------- 1 | import { ModuleConstructor } from '@/App'; 2 | import BackgroundModule from '@/module/background/BackgroundModule'; 3 | import ConfigModule from '@/module/config/ConfigModule'; 4 | import LeavesModule from '@/module/leaves/LeavesModule'; 5 | import Live2DEventModule from '@/module/live2d-event/Live2DEventModule'; 6 | import Live2DMotionModule from '@/module/live2d-motion/Live2DMotionModule'; 7 | import Live2DModule from '@/module/live2d/Live2DModule'; 8 | import SnowModule from '@/module/snow/SnowModule'; 9 | import ThemeModule from '@/module/theme/ThemeModule'; 10 | import WallpaperModule from '@/module/wallpaper/WallpaperModule'; 11 | 12 | export default [ 13 | ConfigModule, 14 | BackgroundModule, 15 | Live2DModule, 16 | LeavesModule, 17 | SnowModule, 18 | Live2DEventModule, 19 | Live2DMotionModule, 20 | WallpaperModule, 21 | ThemeModule, 22 | ] as ModuleConstructor[]; 23 | -------------------------------------------------------------------------------- /src/module/snow/pixi-snow/snow.vert: -------------------------------------------------------------------------------- 1 | precision highp float; 2 | 3 | attribute vec4 a_position; 4 | attribute vec3 a_rotation; 5 | attribute vec3 a_speed; 6 | attribute float a_size; 7 | attribute float a_alpha; 8 | 9 | uniform float time; 10 | uniform mat4 projection; 11 | uniform vec3 worldSize; 12 | uniform float gravity; 13 | uniform float wind; 14 | 15 | varying float v_alpha; 16 | varying float v_rotation; 17 | 18 | void main() { 19 | 20 | v_alpha = a_alpha; 21 | v_rotation = a_rotation.x + time * a_rotation.y; 22 | 23 | vec3 pos = a_position.xyz; 24 | 25 | pos.x = mod(pos.x + time + wind * a_speed.x, worldSize.x * 2.0) - worldSize.x; 26 | pos.y = mod(pos.y - time * a_speed.y * gravity, worldSize.y * 2.0) - worldSize.y; 27 | 28 | pos.x += sin(time * a_speed.z) * a_rotation.z; 29 | pos.z += cos(time * a_speed.z) * a_rotation.z; 30 | 31 | gl_Position = projection * vec4(pos.xyz, a_position.w); 32 | gl_PointSize = a_size / gl_Position.w; 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2017 guansss 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | -------------------------------------------------------------------------------- /src/assets/img/settings.svg: -------------------------------------------------------------------------------- 1 | 3 | 8 | -------------------------------------------------------------------------------- /src/module/live2d-event/Live2DEventModule.ts: -------------------------------------------------------------------------------- 1 | import { App, Module } from '@/App'; 2 | import { Config } from '@/module/config/ConfigModule'; 3 | import greet from '@/module/live2d-event/greeting-event'; 4 | import registerHitEvent from '@/module/live2d-event/hit-event'; 5 | import Live2DModule from '@/module/live2d/Live2DModule'; 6 | import Live2DSprite from '@/module/live2d/Live2DSprite'; 7 | import { DisplayObject } from '@pixi/display'; 8 | 9 | export default class Live2DEventModule implements Module { 10 | name = 'Live2DEvent'; 11 | 12 | config?: Config; 13 | 14 | constructor(app: App) { 15 | const live2dModule = app.modules['Live2D']; 16 | 17 | if (!(live2dModule && live2dModule instanceof Live2DModule)) return; 18 | 19 | live2dModule.player.container.on('childAdded', (obj: DisplayObject) => { 20 | if (obj instanceof Live2DSprite) { 21 | this.processSprite(obj); 22 | } 23 | }); 24 | 25 | app.on('configReady', (config: Config) => { 26 | this.config = config; 27 | app.emit('config', 'live2d.greet', true, true); 28 | }); 29 | } 30 | 31 | processSprite(sprite: Live2DSprite) { 32 | registerHitEvent(sprite); 33 | 34 | if (this.config && this.config.get('live2d.greet', false)) { 35 | greet(sprite); 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/module/live2d-motion/SoundManager.ts: -------------------------------------------------------------------------------- 1 | import { error } from '@/core/utils/log'; 2 | import { clamp } from '@/core/utils/math'; 3 | import { VOLUME } from '@/defaults'; 4 | 5 | const TAG = 'SoundManager'; 6 | 7 | export default class SoundManager { 8 | private _volume = VOLUME; 9 | 10 | get volume(): number { 11 | return this._volume; 12 | } 13 | 14 | set volume(value: number) { 15 | this._volume = clamp(value, 0, 1) || 0; 16 | this.audios.forEach(audio => (audio.volume = this._volume)); 17 | } 18 | 19 | tag = SoundManager.name; 20 | 21 | audios: HTMLAudioElement[] = []; 22 | 23 | playSound(file: string): Promise
Waiting...24 | 25 | 91 | 92 | -------------------------------------------------------------------------------- /src/module/background/Background.vue: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 81 | 82 | 86 | 87 | 96 | -------------------------------------------------------------------------------- /src/shim.d.ts: -------------------------------------------------------------------------------- 1 | declare module 'semver/functions/*' { 2 | const F: (...args: any[]) => {}; 3 | export default F; 4 | } 5 | 6 | /** 7 | * Vue shims 8 | */ 9 | declare module '*.vue' { 10 | import Vue from 'vue'; 11 | import 'vue-i18n'; 12 | export default Vue; 13 | } 14 | 15 | declare module 'vue-clickaway' { 16 | export const directive: Function; 17 | } 18 | 19 | /** 20 | * PIXI shims 21 | * @see https://github.com/pixijs/pixi.js/issues/5397 22 | */ 23 | declare module '@pixi/constants' { 24 | export { BLEND_MODES, DRAW_MODES } from 'pixi.js'; 25 | } 26 | 27 | declare module '@pixi/core' { 28 | import { State } from 'pixi.js'; 29 | 30 | class ExposedState extends State { 31 | static for2d(): State; // this is not defined in pixi's types 32 | } 33 | 34 | export { ExposedState as State }; 35 | export { 36 | Buffer, 37 | Geometry, 38 | Renderer, 39 | AbstractBatchRenderer as BatchRenderer, // use a name trick because BatchRenderer is not defined in pixi's types 40 | Shader, 41 | Texture, 42 | BaseTexture, 43 | } from 'pixi.js'; 44 | } 45 | 46 | declare module '@pixi/loaders' { 47 | export { Loader } from 'pixi.js'; 48 | } 49 | 50 | declare module '@pixi/utils' { 51 | import { utils } from 'pixi.js'; 52 | export import EventEmitter = utils.EventEmitter; 53 | export import sayHello = utils.sayHello; 54 | } 55 | 56 | declare module '@pixi/app' { 57 | export { Application } from 'pixi.js'; 58 | } 59 | 60 | declare module '@pixi/display' { 61 | export { DisplayObject, Container } from 'pixi.js'; 62 | } 63 | 64 | declare module '@pixi/particles' { 65 | export { ParticleContainer, ParticleRenderer } from 'pixi.js'; 66 | } 67 | 68 | declare module '@pixi/spritesheet' { 69 | export { SpritesheetLoader } from 'pixi.js'; 70 | } 71 | 72 | declare module '@pixi/sprite' { 73 | export { Sprite } from 'pixi.js'; 74 | } 75 | 76 | declare module '@pixi/mesh' { 77 | export { Mesh } from 'pixi.js'; 78 | } 79 | 80 | declare module '@pixi/math' { 81 | export { Matrix, Point, Rectangle, Bounds, Transform } from 'pixi.js'; 82 | } 83 | 84 | /** 85 | * Webpack import shims 86 | * @see https://stackoverflow.com/questions/43638454/webpack-typescript-image-import?rq=1 87 | */ 88 | declare module '*.png' { 89 | const value: string; 90 | export default value; 91 | } 92 | 93 | declare module '*.svg' { 94 | import Vue from 'vue'; 95 | export default Vue; 96 | } 97 | 98 | declare module '*.vert' { 99 | const value: string; 100 | export default value; 101 | } 102 | 103 | declare module '*.frag' { 104 | const value: string; 105 | export default value; 106 | } 107 | -------------------------------------------------------------------------------- /src/core/utils/EventEmitter.js: -------------------------------------------------------------------------------- 1 | /** 2 | * eventemitter3 patched with sticky events. 3 | * 4 | * @see http://greenrobot.org/eventbus/documentation/configuration/sticky-events/ 5 | */ 6 | 7 | import EventEmitter from 'eventemitter3'; 8 | 9 | class PatchedEventEmitter extends EventEmitter { 10 | _stickies = new Events(); 11 | } 12 | 13 | let prefix = '~'; 14 | 15 | function Events() {} 16 | 17 | if (Object.create) { 18 | Events.prototype = Object.create(null); 19 | if (!new Events().__proto__) prefix = false; 20 | } 21 | 22 | function EE(fn, context, once) { 23 | this.fn = fn; 24 | this.context = context; 25 | this.once = once || false; 26 | } 27 | 28 | function addListener(emitter, event, fn, context, once) { 29 | if (typeof fn !== 'function') { 30 | throw new TypeError('The listener must be a function'); 31 | } 32 | 33 | const evt = prefix ? prefix + event : event; 34 | 35 | // immediately call the listener when it matches a sticky event 36 | if (emitter._stickies[evt]) { 37 | fn.apply(context || emitter, emitter._stickies[evt]); 38 | 39 | // don't save this listener if it's once event 40 | if (once) return emitter; 41 | } 42 | 43 | const listener = new EE(fn, context || emitter, once); 44 | 45 | if (!emitter._events[evt]) (emitter._events[evt] = listener), emitter._eventsCount++; 46 | else if (!emitter._events[evt].fn) emitter._events[evt].push(listener); 47 | else emitter._events[evt] = [emitter._events[evt], listener]; 48 | 49 | return emitter; 50 | } 51 | 52 | PatchedEventEmitter.prototype.on = function on(event, fn, context) { 53 | return addListener(this, event, fn, context, false); 54 | }; 55 | 56 | PatchedEventEmitter.prototype.once = function once(event, fn, context) { 57 | return addListener(this, event, fn, context, true); 58 | }; 59 | 60 | PatchedEventEmitter.prototype.addListener = PatchedEventEmitter.prototype.on; 61 | 62 | PatchedEventEmitter.prototype.sticky = function sticky(event, a1, a2, a3, a4, a5) { 63 | const evt = prefix ? prefix + event : event; 64 | 65 | this._stickies[evt] = Array.prototype.slice.call(arguments, 1); 66 | 67 | // immediately emit this event to call existing listeners 68 | switch (arguments.length) { 69 | case 1: 70 | return this.emit(event); 71 | case 2: 72 | return this.emit(event, a1); 73 | case 3: 74 | return this.emit(event, a1, a2); 75 | case 4: 76 | return this.emit(event, a1, a2, a3); 77 | case 5: 78 | return this.emit(event, a1, a2, a3, a4); 79 | case 6: 80 | return this.emit(event, a1, a2, a3, a4, a5); 81 | } 82 | 83 | return this.emit(event, this._stickies[evt]); 84 | }; 85 | 86 | export default PatchedEventEmitter; 87 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const merge = require('lodash/merge'); 3 | const projectJSON = require('./assets/project.json'); 4 | const { readLocales } = require('./scripts/project-json-generator'); 5 | 6 | module.exports = { 7 | productionSourceMap: false, 8 | publicPath: '', // use empty to make generated files be able to load by 'file://' scheme 9 | 10 | devServer: { 11 | contentBase: path.resolve('wallpaper'), 12 | historyApiFallback: false, 13 | 14 | // see https://webpack.js.org/configuration/dev-server/#devserverbefore 15 | before(app) { 16 | // handle the transfer of Wallpaper Engine properties 17 | // see "/assets/bridge.html" 18 | 19 | // I MUST BE CRAZY TO DO THIS 20 | 21 | const props = { 22 | userProps: {}, 23 | generalProps: {}, 24 | files: {}, 25 | }; 26 | 27 | // receive properties by POST 28 | app.post('/props', require('body-parser').json(), (req, res, next) => { 29 | // save props to local variables 30 | merge(props.userProps, req.body.userProps); 31 | merge(props.generalProps, req.body.generalProps); 32 | 33 | // DON'T use merge on files because merging will keep the removed files! 34 | Object.assign(props.files, req.body.files); 35 | 36 | res.json(props); 37 | }); 38 | 39 | // return properties by GET 40 | app.get('/props', (req, res, next) => { 41 | res.json(props); 42 | }); 43 | }, 44 | 45 | after(app) { 46 | // override default 404 behaviour so it won't send us an HTML 404 page 47 | app.use((req, res, next) => { 48 | res.status(404).end(); 49 | }); 50 | }, 51 | }, 52 | 53 | chainWebpack(config) { 54 | // inject some properties 55 | // see https://github.com/webpack/webpack/issues/237 56 | // and https://stackoverflow.com/questions/53076540/vue-js-webpack-problem-cant-add-plugin-to-vue-config-js-with-configurewebpack 57 | config.plugin('define').tap(args => { 58 | args[0]['process.env'].NAME = JSON.stringify(projectJSON.title); 59 | args[0]['process.env'].VERSION = JSON.stringify(process.env.npm_package_version); 60 | args[0]['process.env'].BUILT_TIME = JSON.stringify(Date.now()); 61 | args[0]['process.env'].I18N = JSON.stringify(readLocales()); 62 | return args; 63 | }); 64 | 65 | // load SVGs 66 | const svgRule = config.module.rule('svg'); 67 | svgRule.uses.clear(); 68 | svgRule.use('vue-svg-loader').loader('vue-svg-loader'); 69 | }, 70 | }; 71 | -------------------------------------------------------------------------------- /src/core/live2d/Live2DExpression.ts: -------------------------------------------------------------------------------- 1 | import { cloneWithCamelCase } from '@/core/utils/misc'; 2 | 3 | const enum ParamCalcType { 4 | Set = 'set', 5 | Add = 'add', 6 | Mult = 'mult', 7 | } 8 | 9 | interface Param { 10 | id: number; 11 | value: number; 12 | type: ParamCalcType; 13 | } 14 | 15 | const DEFAULT_FADING_DURATION = 500; 16 | 17 | export default class Live2DExpression extends AMotion { 18 | name?: string; 19 | 20 | readonly params: Param[] = []; 21 | 22 | constructor(readonly internalModel: Live2DModelWebGL, json: object, name?: string) { 23 | super(); 24 | 25 | this.name = name; 26 | this.load(cloneWithCamelCase(json)); 27 | } 28 | 29 | private load(json: any) { 30 | this.setFadeIn(json.fadeIn > 0 ? json.fadeIn : DEFAULT_FADING_DURATION); 31 | this.setFadeOut(json.fadeOut > 0 ? json.fadeOut : DEFAULT_FADING_DURATION); 32 | 33 | if (Array.isArray(json.params)) { 34 | json.params.forEach((paramDef: any) => { 35 | let value = parseFloat(paramDef.val); 36 | 37 | if (!paramDef.id || !value) { 38 | // skip if missing essential properties 39 | return; 40 | } 41 | 42 | const id = this.internalModel.getParamIndex(paramDef.id); 43 | const type = paramDef.calc || ParamCalcType.Add; 44 | 45 | if (type === ParamCalcType.Add) { 46 | const defaultValue = parseFloat(paramDef.def) || 0; 47 | value -= defaultValue; 48 | } else if (type === ParamCalcType.Mult) { 49 | const defaultValue = parseFloat(paramDef.def) || 1; 50 | value /= defaultValue; 51 | } 52 | 53 | this.params.push({ id, value, type }); 54 | }); 55 | } 56 | } 57 | 58 | /** @override */ 59 | updateParamExe(model: Live2DModelWebGL, time: DOMTimeStamp, weight: number, motionQueueEnt: unknown) { 60 | this.params.forEach(param => { 61 | // this algorithm seems to be broken for newer Neptunia series models, have no idea 62 | // 63 | // switch (param.type) { 64 | // case ParamCalcType.Set: 65 | // model.setParamFloat(param.id, param.value, weight); 66 | // break; 67 | // case ParamCalcType.Add: 68 | // model.addToParamFloat(param.id, param.value * weight); 69 | // break; 70 | // case ParamCalcType.Mult: 71 | // model.multParamFloat(param.id, param.value, weight); 72 | // break; 73 | // } 74 | 75 | // this works fine for any model 76 | model.setParamFloat(param.id, param.value * weight); 77 | }); 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/core/utils/dom.ts: -------------------------------------------------------------------------------- 1 | import { inWallpaperEngine } from '@/core/utils/misc'; 2 | 3 | declare global { 4 | interface Screen { 5 | // these properties are supposed to exist but somehow missing in Typescript 6 | availTop: number; 7 | availLeft: number; 8 | } 9 | } 10 | 11 | const safeWidth = inWallpaperEngine ? screen.availWidth : innerWidth; 12 | const safeHeight = inWallpaperEngine ? screen.availHeight : innerHeight; 13 | const safeTop = inWallpaperEngine ? screen.availTop : 0; 14 | const safeLeft = inWallpaperEngine ? screen.availLeft : 0; 15 | const safeBottom = inWallpaperEngine ? screen.height - (screen.availHeight + screen.availTop) : 0; 16 | const safeRight = inWallpaperEngine ? screen.width - (screen.availWidth + screen.availLeft) : 0; 17 | 18 | export namespace SafeArea { 19 | export const SAFE = { 20 | width: safeWidth, 21 | height: safeHeight, 22 | top: safeTop, 23 | right: safeRight, 24 | bottom: safeBottom, 25 | left: safeLeft, 26 | 27 | widthPX: safeWidth + 'px', 28 | heightPX: safeHeight + 'px', 29 | topPX: safeTop + 'px', 30 | rightPX: safeRight + 'px', 31 | bottomPX: safeBottom + 'px', 32 | leftPX: safeLeft + 'px', 33 | }; 34 | 35 | export const UNSAFE = { 36 | width: innerWidth, 37 | height: innerHeight, 38 | top: 0, 39 | right: 0, 40 | bottom: 0, 41 | left: 0, 42 | 43 | widthPX: innerWidth + 'px', 44 | heightPX: innerHeight + 'px', 45 | topPX: '0', 46 | rightPX: '0', 47 | bottomPX: '0', 48 | leftPX: '0', 49 | }; 50 | 51 | export let area = SAFE; 52 | 53 | export function setSafe(safe: boolean) { 54 | if (safe) { 55 | area = SAFE; 56 | document.documentElement.style.setProperty('--safeTop', SAFE.topPX); 57 | document.documentElement.style.setProperty('--safeRight', SAFE.rightPX); 58 | document.documentElement.style.setProperty('--safeLeft', SAFE.leftPX); 59 | document.documentElement.style.setProperty('--safeBottom', SAFE.bottomPX); 60 | } else { 61 | area = UNSAFE; 62 | document.documentElement.style.removeProperty('--safeTop'); 63 | document.documentElement.style.removeProperty('--safeRight'); 64 | document.documentElement.style.removeProperty('--safeLeft'); 65 | document.documentElement.style.removeProperty('--safeBottom'); 66 | } 67 | } 68 | } 69 | 70 | export const SCREEN_ASPECT_RATIO = (() => { 71 | // https://stackoverflow.com/a/1186465 72 | 73 | function gcd(a: number, b: number): number { 74 | return b == 0 ? a : gcd(b, a % b); 75 | } 76 | 77 | const w = screen.width; 78 | const h = screen.height; 79 | const r = gcd(w, h); 80 | 81 | return w / r + ':' + h / r; 82 | })(); 83 | -------------------------------------------------------------------------------- /src/module/background/BackgroundModule.ts: -------------------------------------------------------------------------------- 1 | import { App, Module } from '@/App'; 2 | import { nop } from '@/core/utils/misc'; 3 | import Background from '@/module/background/Background.vue'; 4 | 5 | export interface Config { 6 | bg?: { 7 | src: string; 8 | volume?: number; 9 | fill?: boolean; 10 | }; 11 | } 12 | 13 | export function isVideo(src: string) { 14 | // only webm ang ogv can be accepted in Wallpaper Engine, mp4 is added for test purpose 15 | // see https://steamcommunity.com/app/431960/discussions/2/1644304412672544283/ 16 | return /(mp4|webm|ogv)$/.test(src); 17 | } 18 | 19 | export default class BackgroundModule implements Module { 20 | name = 'Background'; 21 | 22 | componentPromise?: Promise