[script] deb installer

README.md

@@ -8,7 +8,7 @@
 [![Webpack](https://img.shields.io/badge/dynamic/json.svg?label=webpack&url=https%3A%2F%2Fraw.githubusercontent.com%2Ftoyobayashi%2Fmishiro%2Fmaster%2Fapp%2Fpackage.json&query=%24.devDependencies.webpack&colorB=55a7dd)](https://webpack.js.org/) -->
 
 
-[Release Download](https://github.com/toyobayashi/mishiro/releases) __(Windows Release Only. Do not install mishiro in a path which includes Chinese or Japanese characters)__  
+[Release Download](https://github.com/toyobayashi/mishiro/releases) __(Do not install mishiro in a path which includes Chinese or Japanese characters)__  
 [中文](https://github.com/toyobayashi/mishiro/blob/master/README_CN.md)
 
 

README_CN.md

@@ -1,5 +1,5 @@
 # mishiro
-[戳这里下载](https://github.com/toyobayashi/mishiro/releases) __（只提供Windwos的发布版，MacOS请按照下面的步骤和[Electron分发应用](http://electronjs.org/docs/tutorial/application-distribution)自行编译打包。请不要安装在有汉字的目录下）__  
+[戳这里下载](https://github.com/toyobayashi/mishiro/releases) __（MacOS请按照下面的步骤和[Electron分发应用](http://electronjs.org/docs/tutorial/application-distribution)自行打包。请不要安装在有汉字的目录下）__  
 
 ## 用法
 

app/script/packager.ts

@@ -100,6 +100,74 @@ function zipApp (p: string) {
   return zip(p, p + '.zip')
 }
 
+function createDebInstaller (appPath: string) {
+  ilog(`[${new Date().toLocaleString()}] Create .deb installer...`)
+  const distRoot = path.dirname(appPath)
+  const icon: { [size: string]: string } = {
+    '16x16': path.join(__dirname, '../src/res/icon', '16x16.png'),
+    '24x24': path.join(__dirname, '../src/res/icon', '24x24.png'),
+    '32x32': path.join(__dirname, '../src/res/icon', '32x32.png'),
+    '48x48': path.join(__dirname, '../src/res/icon', '48x48.png'),
+    '64x64': path.join(__dirname, '../src/res/icon', '64x64.png'),
+    '128x128': path.join(__dirname, '../src/res/icon', '128x128.png'),
+    '256x256': path.join(__dirname, '../src/res/icon', '256x256.png'),
+    '512x512': path.join(__dirname, '../src/res/icon', '512x512.png'),
+    '1024x1024': path.join(__dirname, '../src/res/icon', '1024x1024.png')
+  }
+  fs.mkdirsSync(path.join(distRoot, '.tmp/DEBIAN'))
+  fs.writeFileSync(
+    path.join(distRoot, '.tmp/DEBIAN/control'),
+    `Package: ${pkg.name}
+Version: ${pkg.version}-${Math.round(new Date().getTime() / 1000)}
+Section: games
+Priority: optional
+Architecture: ${arch === 'x64' ? 'amd64' : 'i386'}
+Depends: kde-cli-tools | kde-runtime | trash-cli | libglib2.0-bin | gvfs-bin, libgconf-2-4, libgtk-3-0 (>= 3.10.0), libnotify4, libnss3 (>= 2:3.26), libxtst6, xdg-utils
+Installed-Size: ${getDirectorySizeSync(appPath)}
+Maintainer: ${pkg.author.name} <[email protected]>
+Homepage: https://github.com/${pkg.author.name}/${pkg.name}
+Description: CGSS Desktop Application
+`)
+
+  fs.mkdirsSync(path.join(distRoot, '.tmp/usr/share/applications'))
+  fs.writeFileSync(
+    path.join(distRoot, `.tmp/usr/share/applications/${pkg.name}.desktop`),
+    `[Desktop Entry]
+Name=${pkg.name}
+Comment=CGSS Desktop Application
+GenericName=Game Utility
+Exec=/usr/share/${pkg.name}/${pkg.name}
+Icon=${pkg.name}
+Type=Application
+StartupNotify=true
+Categories=Utility;Game;
+`)
+
+  for (const size in icon) {
+    fs.mkdirsSync(path.join(distRoot, `.tmp/usr/share/icons/hicolor/${size}/apps`))
+    fs.copySync(icon[size], path.join(distRoot, `.tmp/usr/share/icons/hicolor/${size}/apps/${pkg.name}.png`))
+  }
+  fs.copySync(appPath, path.join(distRoot, `.tmp/usr/share/${pkg.name}`))
+
+  execSync(`dpkg -b ./.tmp ./${pkg.name}-v${pkg.version}-linux-${arch}.deb`, { cwd: distRoot, stdio: 'inherit' })
+  fs.removeSync(path.join(distRoot, '.tmp'))
+}
+
+function getDirectorySizeSync (dir: string) {
+  const ls = fs.readdirSync(dir)
+  let size = 0
+  for (let i = 0; i < ls.length; i++) {
+    const item = path.join(dir, ls[i])
+    const stat = fs.statSync(item)
+    if (stat.isDirectory()) {
+      size += getDirectorySizeSync(item)
+    } else {
+      size += stat.size
+    }
+  }
+  return size
+}
+
 async function main () {
   const start = new Date().getTime()
   // await reInstall()
@@ -115,6 +183,7 @@ async function main () {
   await copyExtra(root)
   const newPath = await rename(appPath)
   const size = await zipApp(newPath)
+  if (process.platform === 'linux') createDebInstaller(newPath)
   ilog(`[${new Date().toLocaleString()}] Size: ${size} Bytes`)
   return (new Date().getTime() - start) / 1000
 }

app/src/ts/main.ts

@@ -14,7 +14,7 @@ let mainWindow: BrowserWindow | null
 
 function createWindow () {
   // Menu.setApplicationMenu(null)
-  const linuxIcon = require('../res/icon/mishiro.png')
+  const linuxIcon = require('../res/icon/1024x1024.png')
   const browerWindowOptions: BrowserWindowConstructorOptions = {
     width: 1296,
     height: 863,

app/src/vue/view/MishiroLive.vue

@@ -27,7 +27,7 @@
     <TaskLoading :total-loading="total" :current-loading="current" :text="text" :single="true" class="absolute-left" :color="'live'"/>
     <div class="gray-bg absolute-right flex-center timebar">
       <p>{{Math.floor(currentTime) | time}} / {{Math.floor(duration) | time}}</p>
-      <input type="range" ref="playProg" :max="duration" min="0" :value="currentTime" @input="oninput()">
+      <input type="range" ref="playProg" :max="duration" min="0" :value="currentTime" @input="oninput()" :style="{ 'background-size': 100 * (currentTime / duration) + '% 100%' }">
     </div>
   </div>
 </div>
@@ -90,9 +90,15 @@ input[type=range] {
   display: block;
   position: relative;
   width: 90%;
-  height: 30px;
+  margin-top: 10px;
+  height: 5px;
   -webkit-appearance: none;
-  background: none;
+  background-color: #aaa;
+  border-radius: 5px;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1'><rect width='100%' height='100%' style='fill:rgb(64,208,34)' /></svg>");
+  background-repeat: no-repeat;
+  background-size: 0% 100%;
+  cursor: pointer;
   outline: none;
 }
 input[type=range]::-webkit-slider-thumb:hover {
@@ -107,30 +113,15 @@ input[type=range]::-webkit-slider-thumb {
   width: 18px;
   border-radius: 50%;
   background-color: #e0b5db;
-  cursor: pointer;
-  margin-top: -7px;
+  cursor: default;
   -webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
   box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
 }
-input[type=range]::-webkit-slider-runnable-track {
+/*input[type=range]::-webkit-slider-runnable-track {
   width: 100%;
   height: 4px;
   background-color: #aaa;
   border-radius: 4px;
   cursor: pointer;
-}
-/*
-input[type=range]::-webkit-fill-lower {
-  background-color: #85b200;
-}
-input[type=range]::-webkit-fill-upper {
-  background-color: #aaa;
-}
-
-input[type=range]::-webkit-ticks-before {
-  display: none;
-}
-input[type=range]::-webkit-ticks-after {
-  display: none;
 }*/
 </style>