Merge pull request #457 from h3poteto/iss-452
closes #452 Add splash screen when starting the window
This commit is contained in:
AkiraFukushima
GitHub
commit
438d85c9fe
|
|
@ -164,7 +164,7 @@ if (process.env.NODE_ENV === 'production') {
|
|||
{
|
||||
from: path.join(__dirname, '../static'),
|
||||
to: path.join(__dirname, '../dist/electron/static'),
|
||||
ignore: ['.*']
|
||||
ignore: ['.*', '*~']
|
||||
}
|
||||
]),
|
||||
new webpack.DefinePlugin({
|
||||
|
|
|
|||
|
|
@ -42,6 +42,11 @@
|
|||
"integrity": "sha512-LAQ1d4OPfSJ/BMbI2DuizmYrrkD9JMaTdi2hQTlI53lQ4kRQPyZQRS4CYQ7O66bnBBnP/oYdRxbk++X0xuFU6A==",
|
||||
"dev": true
|
||||
},
|
||||
"@trodi/electron-splashscreen": {
|
||||
"version": "0.3.1",
|
||||
"resolved": "https://registry.npmjs.org/@trodi/electron-splashscreen/-/electron-splashscreen-0.3.1.tgz",
|
||||
"integrity": "sha512-2NilGoVuVNBKoOwjnDp9MIsb5gPJZTxEK5Dg/Vd/TaOvgMwFl4aPAWky3+O3OH2SISUdmvQyWo0UmWMnjY+04A=="
|
||||
},
|
||||
"@types/caseless": {
|
||||
"version": "0.12.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/caseless/-/caseless-0.12.1.tgz",
|
||||
|
|
@ -10337,7 +10342,7 @@
|
|||
},
|
||||
"onetime": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
|
||||
"resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
|
||||
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
|
||||
"dev": true
|
||||
},
|
||||
|
|
|
|||
|
|
@ -91,6 +91,7 @@
|
|||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"@trodi/electron-splashscreen": "^0.3.1",
|
||||
"about-window": "^1.11.0",
|
||||
"animate.css": "^3.6.1",
|
||||
"axios": "^0.18.0",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
'use strict'
|
||||
|
||||
import { app, ipcMain, BrowserWindow, shell, Menu } from 'electron'
|
||||
import { app, ipcMain, shell, Menu } from 'electron'
|
||||
import Datastore from 'nedb'
|
||||
import empty from 'is-empty'
|
||||
import log from 'electron-log'
|
||||
|
|
@ -9,6 +9,7 @@ import simplayer from 'simplayer'
|
|||
import path from 'path'
|
||||
import openAboutWindow from 'about-window'
|
||||
import ContextMenu from 'electron-context-menu'
|
||||
import * as Splashscreen from '@trodi/electron-splashscreen'
|
||||
|
||||
import Authentication from './auth'
|
||||
import Account from './account'
|
||||
|
|
@ -40,6 +41,10 @@ const winURL = process.env.NODE_ENV === 'development'
|
|||
? `http://localhost:9080`
|
||||
: `file://${__dirname}/index.html`
|
||||
|
||||
const splashURL = process.env.NODE_ENV === 'development'
|
||||
? path.resolve(__dirname, '../../static/splash-screen.html')
|
||||
: `${__dirname}/static/splash-screen.html`
|
||||
|
||||
// https://github.com/louischatriot/nedb/issues/459
|
||||
const userData = app.getPath('userData')
|
||||
const accountDBPath = process.env.NODE_ENV === 'production'
|
||||
|
|
@ -277,7 +282,8 @@ async function createWindow () {
|
|||
defaultWidth: 1000,
|
||||
height: 563
|
||||
})
|
||||
mainWindow = new BrowserWindow({
|
||||
// mainWindow = new BrowserWindow({
|
||||
const mainOpts = {
|
||||
titleBarStyle: 'hidden',
|
||||
transparent: true,
|
||||
x: mainWindowState.x,
|
||||
|
|
@ -286,7 +292,17 @@ async function createWindow () {
|
|||
height: mainWindowState.height,
|
||||
useContentSize: true,
|
||||
icon: path.resolve(__dirname, '../../build/icons/256x256.png')
|
||||
})
|
||||
}
|
||||
const config = {
|
||||
windowOpts: mainOpts,
|
||||
templateUrl: splashURL,
|
||||
splashScreenOpts: {
|
||||
width: 425,
|
||||
height: 325
|
||||
}
|
||||
}
|
||||
mainWindow = Splashscreen.initSplashScreen(config)
|
||||
|
||||
mainWindowState.manage(mainWindow)
|
||||
|
||||
mainWindow.loadURL(winURL)
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
|
|
@ -0,0 +1,49 @@
|
|||
<svg class="lds-spinner" width="200px" height="200px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;"><g transform="rotate(0 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(30 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(60 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(90 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(120 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(150 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(180 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(210 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(240 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(270 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(300 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g><g transform="rotate(330 50 50)">
|
||||
<rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#0074e4">
|
||||
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
|
||||
</rect>
|
||||
</g></svg>
|
||||
|
After Width: | Height: | Size: 3.3 KiB |
|
|
@ -0,0 +1,15 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<html style="height: 100%">
|
||||
<head></head>
|
||||
<body style="height: 100%; background-color: #fff">
|
||||
<div style="display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%">
|
||||
<center>
|
||||
<img src="./images/icon.png" width="120" height="120"></img>
|
||||
</center>
|
||||
<center>
|
||||
<img src="./images/loading.svg" width="40" height="40"></img>
|
||||
</center>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue