Bump url-parse from 1.5.3 to 1.5.10

Bumps [url-parse](https://github.com/unshiftio/url-parse) from 1.5.3 to 1.5.10.
- [Release notes](https://github.com/unshiftio/url-parse/releases)
- [Commits](https://github.com/unshiftio/url-parse/compare/1.5.3...1.5.10)

---
updated-dependencies:
- dependency-name: url-parse
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.gitignore

@@ -1,5 +1,5 @@
-/node_modules
+/node_modules
-/server/.liberama*
+/server/data
-/dist
+/server/public
-dev*.sh
+/server/ipfs
-
+/dist

README.md

@@ -1,160 +1,43 @@
-# Liberama
+# Liberama
-
+
-Браузерная онлайн-читалка книг.
+Браузерная онлайн-читалка книг и децентрализованная библиотека.
-
+
-Выглядит соледующим образом: <img src="https://omnireader.ru/favicon.ico" width="14px"/>[OmniReader](https://omnireader.ru)
+Читалка <img src="https://omnireader.ru/favicon.ico" width="14px"/>[OmniReader](https://omnireader.ru) является частью данного проекта, размещенной на VPS:
-
+
-![](docs/assets/face.jpg)
+![](docs/assets/face.jpg)
-![](docs/assets/reader.jpg)
+![](docs/assets/reader.jpg)
-
+
-При запуске приложения, по умолчанию веб-сервер доступен по адресу [http://127.0.0.1:44080](http://127.0.0.1:44080)
+## VPS
-
+Для разворачивания читалки на чистом VPS с нуля смотрите [docs/omnireader.ru](docs/omnireader.ru/README.md)
-Для указания местоположения рабочей директории, воспользуйтесь [параметрами командной строки](#cli).
+
-Дополнительные параметры сервера настраиваются в [конфигурационном файле](#config).
+## Сборка проекта
-
+Необходима версия node.js не ниже 14.
-[Отблагодарить автора проекта](https://donatty.com/liberama)
+
-
+```
-## 
+$ git clone https://github.com/bookpauk/liberama
-* [Возможности читалки](#capabilities)
+$ cd liberama
-* [Использование](#usage)
+$ npm i
-    * [Параметры командной строки](#cli)
+```
-    * [Конфигурация](#config)
+
-    * [Разворачивание на VPS](#vps)
+### Windows
-* [Сборка проекта](#build)
+```
-* [Разработка](#development)
+$ npm run build:win
-
+```
-<a id="capabilities" />
+
-
+### Linux
-## Возможности читалки
+```
-- загрузка любой страницы интернета
+$ npm run build:linux
-- синхронизация данных (настроек и читаемых книг) между различными устройствами
+```
-- работа в автономном режиме (без связи)
+
-- изменение цвета фона, текста, размер и тип шрифта и прочее
+Результат сборки будет доступен в каталоге `dist/linux|win` в виде исполнимого (standalone) файла
-- установка и запоминание текущей позиции и настроек в браузере и на сервере
+
-- кэширование файлов книг на клиенте и на сервере
+### Разработка
-- открытие книг с локального диска
+```
-- плавный скроллинг текста
+$ npm run dev
-- анимация перелистывания
+```
-- поиск по тексту и копирование фрагмента
+
-- запоминание недавних книг, скачивание книги из читалки в формате fb2
+## Помочь проекту
-- управление кликом и с клавиатуры
+
-- регистрация не требуется
+* bitcoin: 3EbgZ7MK1UVaN38Gty5DCBtS4PknM4Ut85
-- поддерживаемые браузеры: Google Chrome, Mozilla Firefox последних версий
+* litecoin: MP39Riec4oSNB3XMjiquKoLWxbufRYNXxZ
-- релизы сервера под Linux, MacOS и Windows
+* monero: 8BQPnvHcPSHM5gMQsmuypDgx9NNsYqwXKfDDuswEyF2Q2ewQSfd2pkK6ydH2wmMyq2JViZvy9DQ35hLMx7g72mFWNJTPtnz
-
-<a id="usage" />
-
-## Использование
-Приложение представляет собой полноценный веб-сервер в виде единого исполнимого файла.
-При первом запуске, будет создана рабочая директория `.liberama` (по умолчанию - в той же папке, где исполнимый файл),
-в которой хранится конфигурационный файл `config.json`, файлы веб-приложения, файлы базы данных, журналы и прочее.
-Изменить рабочую директорию можно с помощью cli-параметра --app-dir
-
-По умолчанию веб-интерфейс будет доступен по адресу [http://127.0.0.1:44080](http://127.0.0.1:44080)
-
-<a id="cli" />
-
-### Параметры командной строки
-Запустите `liberama --help`, чтобы увидеть список опций:
-```console
-Usage: liberama [options]
-
-Options:
-  --help              Показать опции командной строки
-  --app-dir=<dirpath> Задать рабочую директорию, по умолчанию: <execDir>/.liberama
-  --auto-repair       Починить БД приложения при запуске, если она повреждена
-```
-
-<a id="config" />
-
-### Конфигурация
-При первом запуске в рабочей директории будет создан конфигурационный файл `config.json`:
-```js
-{
-    // Максимальный размер файла загружаемой книги (в байтах)
-    "maxUploadFileSize": 52428800,
-
-    // Максимальный размер каталога <appDir>/public-files/tmp для хранения конвертированных
-    // файлов книг пользователей (в байтах)
-    "maxTempPublicDirSize": 536870912,
-
-    // Максимальный размер каталога <appDir>/public-files/upload для хранения
-    // загруженных в /upload (кнопка "Загрузить файл с диска") файлов книг пользователей (в байтах)
-    "maxUploadPublicDirSize": 209715200,
-
-    // Использование внешних конвертеров (только в среде Linux)
-    // Без них читалка может работать только с файлами формата fb2, txt, html, xml
-    // Инструкции установки внешних конвертеров см. в docs/omnireader.ru/README.md
-    "useExternalBookConverter": false,
-
-    // Настройки для списка серверов.
-    // Приложение может запускать одновременно несколько веб-серверов на разных портах
-    "servers": [
-        {
-            // Произвольное название сервера
-            "serverName": "1",
-
-            // Режим работы сервера:
-            //  "reader" - обычная читалка
-            //  "omnireader" - модификации для сайта omnireader.ru
-            //  "liberama" - модификации для сайта liberama.top
-            //  "book_update_checker" - сервер обновлений
-            "mode": "reader",
-
-            // Хост, порт сервера
-            "ip": "0.0.0.0",
-            "port": "44080"
-        }
-    ],
-
-    // Настройки удаленного хранилища
-    "remoteStorage": false,
-
-    // Для веб-приложения: включение/выключение работы с сервером обновлений
-    "bucEnabled": false,
-
-    // Подключение себя, как клиента, к серверу обновлений
-    "bucServer": false
-
-    // Сcылка для открытия в новом окне брауpера по клику на кнопку "Сетевая библиотека"
-    // Если не задано, открывается внутренний менеджер библиотек с использванием фрейма
-    "networkLibraryLink": "http://samlib.ru/"
-}
-```
-
-При необходимости, можно настроить нужный параметр в этом файле вручную.
-
-<a id="vps" />
-
-## VPS
-Для разворачивания читалки на чистом VPS с нуля смотрите [docs/omnireader.ru](docs/omnireader.ru/README.md)
-
-<a id="build" />
-
-### Сборка проекта
-Сборка только в среде Linux.
-Необходима версия node.js не ниже 16.
-
-Для сборки linux-arm64 необходимо предварительно установить [QEMU](https://wiki.debian.org/QemuUserEmulation).
-
-```sh
-git clone https://github.com/bookpauk/liberama
-cd liberama
-npm i
-```
-
-#### Релизы
-```sh
-npm run release
-```
-
-Результат сборки будет доступен в каталоге `dist/release`
-
-<a id="development" />
-
-### Разработка
-```sh
-npm run dev
-```
-
-Связаться с автором проекта: [bookpauk@gmail.com](mailto:bookpauk@gmail.com)

build/includer.js

@@ -0,0 +1,31 @@
+const path = require('path');
+const fs = require('fs');
+
+//пример в коде:
+//  @@include('./test/testFile.inc');
+
+function includeRecursive(self, parentFile, source, depth) {
+    depth = (depth ? depth : 0);
+    if (depth > 50)
+        throw new Error('includer: stack too big');
+    const lines = source.split('\n');
+    let result = [];
+    for (const line of lines) {
+        const trimmed = line.trim();
+        const m = trimmed.match(/^@@[\s]*?include[\s]*?\(['"](.*)['"]\)/);
+        if (m) {
+            const includedFile = path.resolve(path.dirname(parentFile), m[1]);
+            self.addDependency(includedFile);
+
+            const fileContent = fs.readFileSync(includedFile, 'utf8');
+            result = result.concat(includeRecursive(self, includedFile, fileContent, depth + 1));
+        } else {
+            result.push(line);
+        }
+    }
+    return result;
+}
+
+exports.default = function includer(source) {
+    return includeRecursive(this, this.resourcePath, source).join('\n');
+}

build/linux.js

@@ -0,0 +1,67 @@
+const fs = require('fs-extra');
+const path = require('path');
+const util = require('util');
+const stream = require('stream');
+const pipeline = util.promisify(stream.pipeline);
+
+const got = require('got');
+const FileDecompressor = require('../server/core/FileDecompressor');
+
+const distDir = path.resolve(__dirname, '../dist');
+const publicDir = `${distDir}/tmp/public`;
+const outDir = `${distDir}/linux`;
+
+const tempDownloadDir = `${distDir}/tmp/download`;
+
+async function main() {
+    const decomp = new FileDecompressor();
+
+    await fs.emptyDir(outDir);
+    // перемещаем public на место
+    if (await fs.pathExists(publicDir))
+        await fs.move(publicDir, `${outDir}/public`);
+
+    await fs.ensureDir(tempDownloadDir);
+
+    //sqlite3
+    const sqliteRemoteUrl = 'https://mapbox-node-binary.s3.amazonaws.com/sqlite3/v5.0.2/napi-v3-linux-x64.tar.gz';
+    const sqliteDecompressedFilename = `${tempDownloadDir}/napi-v3-linux-x64/node_sqlite3.node`;
+
+    if (!await fs.pathExists(sqliteDecompressedFilename)) {
+        // Скачиваем node_sqlite3.node для винды, т.к. pkg не включает его в сборку
+        await pipeline(got.stream(sqliteRemoteUrl), fs.createWriteStream(`${tempDownloadDir}/sqlite.tar.gz`));
+        console.log(`done downloading ${sqliteRemoteUrl}`);
+
+        //распаковываем
+        console.log(await decomp.unpackTarZZ(`${tempDownloadDir}/sqlite.tar.gz`, tempDownloadDir));
+        console.log('files decompressed');
+    }
+    // копируем в дистрибутив
+    await fs.copy(sqliteDecompressedFilename, `${outDir}/node_sqlite3.node`);
+    console.log(`copied ${sqliteDecompressedFilename} to ${outDir}/node_sqlite3.node`);
+
+    //ipfs
+    const ipfsDecompressedFilename = `${tempDownloadDir}/go-ipfs/ipfs`;
+    if (!await fs.pathExists(ipfsDecompressedFilename)) {
+        // Скачиваем ipfs
+        const ipfsRemoteUrl = 'https://dist.ipfs.io/go-ipfs/v0.4.18/go-ipfs_v0.4.18_linux-amd64.tar.gz';
+
+        await pipeline(got.stream(ipfsRemoteUrl), fs.createWriteStream(`${tempDownloadDir}/ipfs.tar.gz`));
+        console.log(`done downloading ${ipfsRemoteUrl}`);
+
+        //распаковываем
+        console.log(await decomp.unpackTarZZ(`${tempDownloadDir}/ipfs.tar.gz`, tempDownloadDir));
+        console.log('files decompressed');
+    }
+
+    // копируем в дистрибутив
+    await fs.copy(ipfsDecompressedFilename, `${outDir}/ipfs`);
+    console.log(`copied ${tempDownloadDir}/go-ipfs/ipfs to ${outDir}/ipfs`);
+    //для development
+    const devIpfsFile = path.resolve(__dirname, '../server/ipfs');
+    if (!await fs.pathExists(devIpfsFile)) {
+        await fs.copy(ipfsDecompressedFilename, devIpfsFile);
+    }
+}
+
+main();

build/prepkg.js

@@ -1,51 +0,0 @@
-const fs = require('fs-extra');
-const path = require('path');
-const { execSync } = require('child_process');
-
-const showdown = require('showdown');
-
-const platform = process.argv[2];
-
-const distDir = path.resolve(__dirname, '../dist');
-const tmpDir = `${distDir}/tmp`;
-const publicDir = `${tmpDir}/public`;
-const outDir = `${distDir}/${platform}`;
-
-async function build() {
-    if (!platform)
-        throw new Error(`Please set platform`);
-
-    await fs.emptyDir(outDir);
-
-    //добавляем readme в релиз
-    let readme = await fs.readFile(path.resolve(__dirname, '../README.md'), 'utf-8');
-    const converter = new showdown.Converter();
-    readme = converter.makeHtml(readme);
-    await fs.writeFile(`${outDir}/readme.html`, readme);
-
-    // перемещаем public на место
-    if (await fs.pathExists(publicDir)) {
-
-        const zipFile = `${tmpDir}/public.zip`;
-        const jsonFile = `${distDir}/public.json`;//distDir !!!
-
-        await fs.remove(zipFile);
-        execSync(`zip -r ${zipFile} .`, {cwd: publicDir, stdio: 'inherit'});
-
-        const data = (await fs.readFile(zipFile)).toString('base64');
-        await fs.writeFile(jsonFile, JSON.stringify({data}));
-    } else {
-        throw new Error(`publicDir: ${publicDir} does not exist`);
-    }
-}
-
-async function main() {
-    try {
-        await build();
-    } catch(e) {
-        console.error(e);
-        process.exit(1);
-    }
-}
-
-main();

build/release.js

@@ -1,33 +0,0 @@
-const fs = require('fs-extra');
-const path = require('path');
-const { execSync } = require('child_process');
-
-const pckg = require('../package.json');
-
-const distDir = path.resolve(__dirname, '../dist');
-const outDir = `${distDir}/release`;
-
-async function makeRelease(target) {
-    const srcDir = `${distDir}/${target}`;
-
-    if (await fs.pathExists(srcDir)) {
-        const zipFile = `${outDir}/${pckg.name}-${pckg.version}-${target}.zip`;
-
-        execSync(`zip -r ${zipFile} .`, {cwd: srcDir, stdio: 'inherit'});
-    }
-}
-
-async function main() {
-    try {
-        await fs.emptyDir(outDir);
-        await makeRelease('win');
-        await makeRelease('linux');
-        await makeRelease('linux-arm64');
-        await makeRelease('macos');
-    } catch(e) {
-        console.error(e);
-        process.exit(1);
-    }
-}
-
-main();

build/webpack.base.config.js

@@ -14,7 +14,6 @@ module.exports = {
     entry: [`${clientDir}/main.js`],
     output: {
         publicPath: '/app/',
-        clean: true
     },
 
     module: {
@@ -30,6 +29,10 @@ module.exports = {
                     }
                 }*/
             },
+            {
+                resourceQuery: /^\?vue/,
+                use: path.resolve(__dirname, 'includer.js')
+            },
             {
                 test: /\.js$/,
                 loader: 'babel-loader',

build/webpack.dev.config.js

@@ -1,6 +1,5 @@
 const path = require('path');
 const webpack = require('webpack');
-const pckg = require('../package.json');
 
 const { merge } = require('webpack-merge');
 const baseWpConfig = require('./webpack.base.config');
@@ -9,15 +8,15 @@ baseWpConfig.entry.unshift('webpack-hot-middleware/client');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 
-const publicDir = path.resolve(__dirname, `../server/.${pckg.name}/public`);
+const publicDir = path.resolve(__dirname, '../server/public');
 const clientDir = path.resolve(__dirname, '../client');
 
 module.exports = merge(baseWpConfig, {
     mode: 'development',
     devtool: 'inline-source-map',
     output: {
-        path: `${publicDir}${baseWpConfig.output.publicPath}`,
+        path: `${publicDir}/app`,
-        filename: 'bundle.js',
+        filename: 'bundle.js'
     },
 
     module: {
@@ -39,6 +38,6 @@ module.exports = merge(baseWpConfig, {
             template: `${clientDir}/index.html.template`,
             filename: `${publicDir}/index.html`
         }),
-        new CopyWebpackPlugin({patterns: [{context: `${clientDir}/assets`, from: `${clientDir}/assets/*`, to: `${publicDir}/`}]})
+        new CopyWebpackPlugin({patterns: [{from: `${clientDir}/assets/*`, to: `${publicDir}/`}]})
     ]
 });

build/webpack.prod.config.js

@@ -17,8 +17,8 @@ const clientDir = path.resolve(__dirname, '../client');
 module.exports = merge(baseWpConfig, {
     mode: 'production',
     output: {
-        path: `${publicDir}${baseWpConfig.output.publicPath}`,
+        path: `${publicDir}/app_new`,
-        filename: 'bundle.[contenthash].js',
+        filename: 'bundle.[contenthash].js'
     },
     module: {
         rules: [
@@ -54,7 +54,7 @@ module.exports = merge(baseWpConfig, {
             filename: `${publicDir}/index.html`
         }),
         new CopyWebpackPlugin({patterns: 
-            [{context: `${clientDir}/assets`, from: `${clientDir}/assets/*`, to: `${publicDir}/` }]
+            [{from: `${clientDir}/assets/*`, to: `${publicDir}/`, context: `${clientDir}/assets` }]
         }),
         new GenerateSW({
             cacheId: 'liberama',

build/win.js

@@ -0,0 +1,61 @@
+const fs = require('fs-extra');
+const path = require('path');
+const util = require('util');
+const stream = require('stream');
+const pipeline = util.promisify(stream.pipeline);
+
+const got = require('got');
+const FileDecompressor = require('../server/core/FileDecompressor');
+
+const distDir = path.resolve(__dirname, '../dist');
+const publicDir = `${distDir}/tmp/public`;
+const outDir = `${distDir}/win`;
+
+const tempDownloadDir = `${distDir}/tmp/download`;
+
+async function main() {
+    const decomp = new FileDecompressor();
+
+    await fs.emptyDir(outDir);
+    // перемещаем public на место
+    if (await fs.pathExists(publicDir))
+        await fs.move(publicDir, `${outDir}/public`);
+
+    await fs.ensureDir(tempDownloadDir);
+
+    //sqlite3
+    const sqliteRemoteUrl = 'https://mapbox-node-binary.s3.amazonaws.com/sqlite3/v5.0.2/napi-v3-win32-x64.tar.gz';
+    const sqliteDecompressedFilename = `${tempDownloadDir}/napi-v3-win32-x64/node_sqlite3.node`;
+
+    if (!await fs.pathExists(sqliteDecompressedFilename)) {
+        // Скачиваем node_sqlite3.node для винды, т.к. pkg не включает его в сборку
+        await pipeline(got.stream(sqliteRemoteUrl), fs.createWriteStream(`${tempDownloadDir}/sqlite.tar.gz`));
+        console.log(`done downloading ${sqliteRemoteUrl}`);
+
+        //распаковываем
+        console.log(await decomp.unpackTarZZ(`${tempDownloadDir}/sqlite.tar.gz`, tempDownloadDir));
+        console.log('files decompressed');
+    }
+    // копируем в дистрибутив
+    await fs.copy(sqliteDecompressedFilename, `${outDir}/node_sqlite3.node`);
+    console.log(`copied ${sqliteDecompressedFilename} to ${outDir}/node_sqlite3.node`);
+
+    //ipfs
+    const ipfsDecompressedFilename = `${tempDownloadDir}/go-ipfs/ipfs.exe`;
+    if (!await fs.pathExists(ipfsDecompressedFilename)) {
+        // Скачиваем ipfs
+        const ipfsRemoteUrl = 'https://dist.ipfs.io/go-ipfs/v0.4.18/go-ipfs_v0.4.18_windows-amd64.zip';
+
+        await pipeline(got.stream(ipfsRemoteUrl), fs.createWriteStream(`${tempDownloadDir}/ipfs.zip`));
+        console.log(`done downloading ${ipfsRemoteUrl}`);
+
+        //распаковываем
+        console.log(await decomp.unpack(`${tempDownloadDir}/ipfs.zip`, tempDownloadDir));
+        console.log('files decompressed');
+    }
+    // копируем в дистрибутив
+    await fs.copy(ipfsDecompressedFilename, `${outDir}/ipfs.exe`);
+    console.log(`copied ${ipfsDecompressedFilename} to ${outDir}/ipfs.exe`);
+}
+
+main();

client/api/misc.js

@@ -1,21 +1,29 @@
+import axios from 'axios';
 import wsc from './webSocketConnection';
 
+const api = axios.create({
+  baseURL: '/api'
+});
+
 class Misc {
-    async loadConfig(_configHash) {
+    async loadConfig() {
 
-        const query = {
+        const query = {params: [
-            params: [
+            'name', 'version', 'mode', 'maxUploadFileSize', 'useExternalBookConverter', 'branch',
-                'name', 'version', 'mode', 'maxUploadFileSize', 'useExternalBookConverter',
+        ]};
-                'acceptFileExt', 'bucEnabled', 'branch', 'networkLibraryLink', 'restricted'
-            ],
-            _configHash,
-        };
 
-        const config = await wsc.message(await wsc.send(Object.assign({action: 'get-config'}, query)));
+        try {
-        if (config.error)
+            const config = await wsc.message(await wsc.send(Object.assign({action: 'get-config'}, query)));
-            throw new Error(config.error);
+            if (config.error)
+                throw new Error(config.error);
+            return config;
+        } catch (e) {
+            console.error(e);
+        }
 
-        return config;
+        //если с WebSocket проблема, работаем по http
+        const response = await api.post('/config', query);
+        return response.data;
     }
 }
 

client/api/reader.js

@@ -1,15 +1,14 @@
 import axios from 'axios';
 import * as utils from '../share/utils';
-import * as cryptoUtils from '../share/cryptoUtils';
 import wsc from './webSocketConnection';
 
 const api = axios.create({
     baseURL: '/api/reader'
 });
 
-/*const workerApi = axios.create({
+const workerApi = axios.create({
     baseURL: '/api/worker'
-});*/
+});
 
 class Reader {
     constructor() {
@@ -19,24 +18,58 @@ class Reader {
         if (!callback) callback = () => {};
 
         let response = {};
-        const requestId = await wsc.send({action: 'worker-get-state-finish', workerId});
+        try {
+            const requestId = await wsc.send({action: 'worker-get-state-finish', workerId});
 
-        let prevResponse = false;
+            let prevResponse = false;
-        while (1) {// eslint-disable-line no-constant-condition
+            while (1) {// eslint-disable-line no-constant-condition
-            response = await wsc.message(requestId);
+                response = await wsc.message(requestId);
 
-            if (!response.state && prevResponse !== false) {//экономия траффика
+                if (!response.state && prevResponse !== false) {//экономия траффика
-                callback(prevResponse);
+                    callback(prevResponse);
-            } else {//были изменения worker state
+                } else {//были изменения worker state
-                if (!response.state)
+                    if (!response.state)
-                    throw new Error('Неверный ответ api');
+                        throw new Error('Неверный ответ api');
-                callback(response);
+                    callback(response);
-                prevResponse = response;
+                    prevResponse = response;
+                }
+
+                if (response.state == 'finish' || response.state == 'error') {
+                    break;
+                }
             }
+            return response;
+        } catch (e) {
+            console.error(e);
+        }
+
+        //если с WebSocket проблема, работаем по http
+        const refreshPause = 500;
+        let i = 0;
+        response = {};
+        while (1) {// eslint-disable-line no-constant-condition
+            const prevProgress = response.progress || 0;
+            const prevState = response.state || 0;
+            response = await workerApi.post('/get-state', {workerId});
+            response = response.data;
+            callback(response);
+
+            if (!response.state)
+                throw new Error('Неверный ответ api');
 
             if (response.state == 'finish' || response.state == 'error') {
                 break;
             }
+
+            if (i > 0)
+                await utils.sleep(refreshPause);
+
+            i++;
+            if (i > 180*1000/refreshPause) {//3 мин ждем телодвижений воркера
+                throw new Error('Слишком долгое время ожидания');
+            }
+            //проверка воркера
+            i = (prevProgress != response.progress || prevState != response.state ? 1 : i);
         }
 
         return response;
@@ -45,13 +78,14 @@ class Reader {
     async loadBook(opts, callback) {
         if (!callback) callback = () => {};
 
-        let response = await wsc.message(await wsc.send(Object.assign({action: 'load-book'}, opts)));
+        let response = await api.post('/load-book', opts);
-        const workerId = response.workerId;
+
+        const workerId = response.data.workerId;
         if (!workerId)
             throw new Error('Неверный ответ api');
 
         callback({totalSteps: 4});
-        callback(response);
+        callback(response.data);
 
         response = await this.getWorkerStateFinish(workerId, callback);
 
@@ -85,7 +119,32 @@ class Reader {
                 estSize = response.headers['content-length'];
             }
         } catch (e) {
-            //
+            //восстановим при необходимости файл на сервере из удаленного облака
+            let response = null
+            
+            try {
+                response = await wsc.message(await wsc.send({action: 'reader-restore-cached-file', path: url}));
+            } catch (e) {
+                console.error(e);
+                //если с WebSocket проблема, работаем по http
+                response = await api.post('/restore-cached-file', {path: url});
+                response = response.data;
+            }
+            if (response.state == 'error') {
+                throw new Error(response.error);
+            }
+
+            const workerId = response.workerId;
+            if (!workerId)
+                throw new Error('Неверный ответ api');
+
+            response = await this.getWorkerStateFinish(workerId);
+            if (response.state == 'error') {
+                throw new Error(response.error);
+            }
+            if (response.size && estSize < 0) {
+                estSize = response.size;
+            }
         }
 
         return estSize;
@@ -115,10 +174,11 @@ class Reader {
         return await axios.get(url, options);
     }
 
-    async uploadFile(file, maxUploadFileSize = 10*1024*1024, callback) {
+    async uploadFile(file, maxUploadFileSize, callback) {
+        if (!maxUploadFileSize)
+            maxUploadFileSize = 10*1024*1024;
         if (file.size > maxUploadFileSize)
             throw new Error(`Размер файла превышает ${maxUploadFileSize} байт`);
-
         let formData = new FormData();
         formData.append('file', file, file.name);
 
@@ -146,56 +206,25 @@ class Reader {
     }
 
     async storage(request) {
-        const response = await wsc.message(await wsc.send({action: 'reader-storage', body: request}));
+        let response = null;
-
-        if (response.error)
-            throw new Error(response.error);
-
-        if (!response.state)
-            throw new Error('Неверный ответ api');
-
-        return response;
-    }
-
-    makeUrlFromBuf(buf) {
-        const key = utils.toHex(cryptoUtils.sha256(buf));
-        return `disk://${key}`;
-    }
-
-    async uploadFileBuf(buf, url) {
-        if (!url)
-            url = this.makeUrlFromBuf(buf);
-
-        let response;
         try {
-            await axios.head(url.replace('disk://', '/upload/'), {headers: {'Cache-Control': 'no-cache'}});
+            response = await wsc.message(await wsc.send({action: 'reader-storage', body: request}));
-            response = await wsc.message(await wsc.send({action: 'upload-file-touch', url}));
         } catch (e) {
-            response = await wsc.message(await wsc.send({action: 'upload-file-buf', buf}));
+            console.error(e);
+            //если с WebSocket проблема, работаем по http
+            response = await api.post('/storage', request);
+            response = response.data;
         }
 
-        if (response.error)
+        const state = response.state;
+        if (!state)
+            throw new Error('Неверный ответ api');
+        if (state == 'error') {
             throw new Error(response.error);
+        }
 
         return response;
     }
-
-    async getUploadedFileBuf(url) {
-        url = url.replace('disk://', '/upload/');
-        return (await axios.get(url)).data;
-    }
-
-    async checkBuc(bookUrls) {
-        const response = await wsc.message(await wsc.send({action: 'check-buc', bookUrls}));
-
-        if (response.error)
-            throw new Error(response.error);
-
-        if (!response.data)
-            throw new Error(`response.data is empty`);
-
-        return response.data;
-    }
 }
 
 export default new Reader();

client/components/App.vue

@@ -20,6 +20,7 @@ import StdDialog from './share/StdDialog.vue';
 import sanitizeHtml from 'sanitize-html';
 
 import miscApi from '../api/misc';
+import * as utils from '../share/utils';
 
 const componentOptions = {
     components: {
@@ -30,10 +31,7 @@ const componentOptions = {
         mode: function() {
             this.setAppTitle();
             this.redirectIfNeeded();
-        },
+        }
-        nightMode() {
-            this.setNightMode();
-        },
     },
 
 };
@@ -41,40 +39,22 @@ class App {
     _options = componentOptions;
     showPage = false;
 
+    itemRuText = {
+        '/cardindex': 'Картотека',
+        '/reader': 'Читалка',
+        '/forum': 'Форум-чат',
+        '/income': 'Поступления',
+        '/sources': 'Источники',
+        '/settings': 'Параметры',
+        '/help': 'Справка',
+    };
+
     created() {
         this.commit = this.$store.commit;
         this.state = this.$store.state;
         this.uistate = this.$store.state.uistate;
         this.config = this.$store.state.config;
 
-        //dark mode
-        let darkMode = null;
-        this.$root.setDarkMode = (value) => {
-            if (darkMode !== value) {
-                const vars = [
-                    '--bg-app-color', '--text-app-color', '--bg-dialog-color', '--text-anchor-color',
-                    '--bg-loader-color', '--bg-input-color', '--bg-btn-color1', '--bg-btn-color2',
-                    '--bg-header-color1', '--bg-header-color2', '--bg-header-color3',
-                    '--bg-menu-color1', '--bg-menu-color2', '--text-menu-color', '--text-ubtn-color',
-                    '--text-tb-normal', '--bg-tb-normal', '--bg-tb-hover',
-                    '--text-tb-active', '--bg-tb-active', '--bg-tb-active-hover',
-                    '--text-tb-disabled', '--bg-tb-disabled',
-                    '--bg-selected-item-color1', '--bg-selected-item-color2',
-                ];
-
-                let root = document.querySelector(':root');
-                let cs = getComputedStyle(root);
-
-                let mode = (value ? '-dark' : '-light');
-                for (const v of vars) {
-                    const propValue = cs.getPropertyValue(`${v}${mode}`);
-                    root.style.setProperty(v, propValue);
-                }
-
-                darkMode = value;
-            }
-        };
-
         //root route
         let cachedRoute = '';
         let cachedPath = '';
@@ -86,7 +66,7 @@ class App {
 
             }
             return cachedRoute;
-        };
+        }
 
         this.$router.beforeEach((to, from, next) => {
             //распознавание хоста, если присутствует домен 3-уровня "b.", то разрешена только определенная страница
@@ -142,8 +122,6 @@ class App {
         window.addEventListener('resize', (event) => {
             this.$root.eventHook('resize', event);
         });
-
-        this.setNightMode();
     }
 
     mounted() {
@@ -152,13 +130,10 @@ class App {
 
         this.setAppTitle();
         (async() => {
-            //загрузим конфиг сервера
+            //загрузим конфиг сревера
             try {
-                const config = await miscApi.loadConfig(this.config._configHash);
+                const config = await miscApi.loadConfig();
-
+                this.commit('config/setConfig', config);
-                if (!config._useCached)
-                    this.commit('config/setConfig', config);
-
                 this.showPage = true;
             } catch(e) {
                 //проверим, не получен ли конфиг ранее
@@ -180,6 +155,38 @@ class App {
         })();
     }
 
+    toggleCollapse() {
+        this.commit('uistate/setAsideBarCollapse', !this.uistate.asideBarCollapse);
+        this.$root.eventHook('resize');
+    }
+
+    get isCollapse() {
+        return this.uistate.asideBarCollapse;
+    }
+
+    get asideWidth() {
+        if (this.uistate.asideBarCollapse) {
+            return 64;
+        } else {
+            return 170;
+        }
+    }
+
+    get buttonCollapseIcon() {
+        if (this.uistate.asideBarCollapse) {
+            return 'el-icon-d-arrow-right';
+        } else {
+            return 'el-icon-d-arrow-left';
+        }
+    }
+
+    get appName() {
+        if (this.isCollapse)
+            return '<br><br>';
+        else
+            return `${this.config.name} <br>v${this.config.version}`;
+    }
+
     get apiError() {
         return this.state.apiError;
     }
@@ -188,23 +195,14 @@ class App {
         return this.$root.getRootRoute();
     }
 
-    get nightMode() {
-        return this.$store.state.reader.settings.nightMode;
-    }
-
-    setNightMode() {
-        this.$root.setDarkMode(this.nightMode);
-        this.$q.dark.set(this.nightMode);
-    }
-
     setAppTitle(title) {
         if (!title) {
-            if (this.mode == 'liberama') {
+            if (this.mode == 'liberama.top') {
                 document.title = `Liberama Reader - всегда с вами`;
             } else if (this.mode == 'omnireader') {
                 document.title = `Omni Reader - всегда с вами`;
             } else if (this.config && this.mode !== null) {
-                document.title = `Универсальная читалка книг и ресурсов интернета`;
+                document.title = `${this.config.name} - ${this.itemRuText[this.rootRoute]}`;
             }
         } else {
             document.title = title;
@@ -219,15 +217,33 @@ class App {
         return this.$store.state.config.mode;
     }
 
-    redirectIfNeeded() {
+    get showAsideBar() {
-        const search = window.location.search.substr(1);
+        return (this.mode !== null && this.mode != 'reader' && this.mode != 'omnireader' && this.mode != 'liberama.top');
+    }
 
-        //распознавание параметра url вида "?url=<link>" и редирект при необходимости
+    set showAsideBar(value) {
-        const s = search.split('url=');
+    }
-        const url = s[1] || '';
+
-        if (url) {
+    get isReaderActive() {
-            window.history.replaceState({}, '', '/');
+        return (this.rootRoute == '/reader' || this.rootRoute == '/external-libs');
-            this.$router.replace({ path: '/reader', query: {url} });
+    }
+
+    redirectIfNeeded() {
+        if ((this.mode == 'reader' || this.mode == 'omnireader' || this.mode == 'liberama.top')) {
+            const search = window.location.search.substr(1);
+
+            //распознавание параметра url вида "?url=<link>" и редирект при необходимости
+            if (!this.isReaderActive) {
+                const s = search.split('url=');
+                const url = s[1] || '';
+                const q = utils.parseQuery(s[0] || '');
+                if (url) {
+                    q.url = decodeURIComponent(url);
+                }
+
+                window.history.replaceState({}, '', '/');
+                this.$router.replace({ path: '/reader', query: q });
+            }
         }
     }
 }
@@ -237,155 +253,22 @@ export default vueComponent(App);
 </script>
 
 <style scoped>
+.app-name {
+    margin-left: 10px;
+    margin-top: 10px;
+    text-align: center;
+    line-height: 140%;
+    font-weight: bold;
+}
 </style>
 
 <style>
-/* color schemes */
-:root {
-    /* current */
-    --bg-app-color: #fff;
-    --text-app-color: #000;
-    --bg-dialog-color: #fff;
-    --text-anchor-color: #00f;
-    --bg-loader-color: #ebe2c9;
-    --bg-input-color: #eee;
-    --bg-btn-color1: #1976d2;
-    --bg-btn-color2: #eee;
-    --bg-header-color1: #007000;
-    --bg-header-color2: #59b04f;
-    --bg-header-color3: #bbdefb;
-    --bg-menu-color1: #eee;
-    --bg-menu-color2: #e0e0e0;
-    --text-menu-color: #757575;
-    --text-ubtn-color: #bbb;
-
-    --text-tb-normal: #3e843e;
-    --bg-tb-normal: #e6edf4;
-    --bg-tb-hover: #fff;
-    --text-tb-active: #fff;
-    --bg-tb-active: #8ab45f;
-    --bg-tb-active-hover: #81c581;
-    --text-tb-disabled: #d3d3d3;
-    --bg-tb-disabled: #808080;
-
-    --bg-selected-item-color1: #b0f0b0;
-    --bg-selected-item-color2: #d0f5d0;
-
-    /* light */
-    --bg-app-color-light: #fff;
-    --text-app-color-light: #000;
-    --bg-dialog-color-light: #fff;
-    --text-anchor-color-light: #00f;
-    --bg-loader-color-light: #ebe2c9;
-    --bg-input-color-light: #eee;
-    --bg-btn-color1-light: #1976d2;
-    --bg-btn-color2-light: #eee;
-    --bg-header-color1-light: #007000;
-    --bg-header-color2-light: #59b04f;
-    --bg-header-color3-light: #bbdefb;
-    --bg-menu-color1-light: #eee;
-    --bg-menu-color2-light: #e0e0e0;
-    --text-menu-color-light: #757575;
-    --text-ubtn-color-light: #bbb;
-
-    --text-tb-normal-light: #3e843e;
-    --bg-tb-normal-light: #e6edf4;
-    --bg-tb-hover-light: #fff;
-    --text-tb-active-light: #fff;
-    --bg-tb-active-light: #8ab45f;
-    --bg-tb-active-hover-light: #81c581;
-    --text-tb-disabled-light: #d3d3d3;
-    --bg-tb-disabled-light: #808080;
-
-    --bg-selected-item-color1-light: #b0f0b0;
-    --bg-selected-item-color2-light: #d0f5d0;
-
-    /* dark */
-    --bg-app-color-dark: #222;
-    --text-app-color-dark: #ccc;
-    --bg-dialog-color-dark: #444;
-    --text-anchor-color-dark: #09f;
-    --bg-loader-color-dark: #222;
-    --bg-input-color-dark: #333;
-    --bg-btn-color1-dark: #00695c;
-    --bg-btn-color2-dark: #333;
-    --bg-header-color1-dark: #004000;
-    --bg-header-color2-dark: #29901f;
-    --bg-header-color3-dark: #335673;
-    --bg-menu-color1-dark: #333;
-    --bg-menu-color2-dark: #424242;
-    --text-menu-color-dark: #858585;
-    --text-ubtn-color-dark: #555;
-    
-    --text-tb-normal-dark: #3e843e;
-    --bg-tb-normal-dark: #ddd;
-    --bg-tb-hover-dark: #ccc;
-    --text-tb-active-dark: #ddd;
-    --bg-tb-active-dark: #7aa44f;
-    --bg-tb-active-hover-dark: #71b571;
-    --text-tb-disabled-dark: #d3d3d3;
-    --bg-tb-disabled-dark: #808080;
-
-    --bg-selected-item-color1-dark: #605020;
-    --bg-selected-item-color2-dark: #403010;
-}
-
-a {
-    color: var(--text-anchor-color);
-}
-
-.bg-app, .text-bg-app {
-    background-color: var(--bg-app-color);
-}
-
-.text-app {
-    color: var(--text-app-color);
-}
-
-.bg-dialog {
-    background-color: var(--bg-dialog-color);
-}
-
-.bg-input {
-    background-color: var(--bg-input-color);
-}
-
-.bg-btn1 {
-    background-color: var(--bg-btn-color1);
-}
-
-.bg-btn2 {
-    background-color: var(--bg-btn-color2);
-}
-
-.bg-menu-1 {
-    background-color: var(--bg-menu-color1);
-}
-
-.bg-menu-2 {
-    background-color: var(--bg-menu-color2);
-}
-
-.text-menu {
-    color: var(--text-menu-color);
-}
-
-.bg-header-3 {
-    background-color: var(--bg-header-color3);
-}
-
-/* main section */
 body, html, #app {    
     margin: 0;
     padding: 0;
     width: 100%;
     height: 100%;
     font: normal 12pt ReaderDefault;
-    background-color: #333;
-}
-
-.q-notifications__list--top {
-    top: 55px !important;
 }
 
 .dborder {

client/components/CardIndex/Book/Book.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        Раздел Book в разработке
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../vueComponent.js';
+
+class Book {
+    created() {
+    }
+
+}
+
+export default vueComponent(Book);
+//-----------------------------------------------------------------------------
+</script>

client/components/CardIndex/Card/Card.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        Раздел Card в разработке
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../vueComponent.js';
+
+class Card {
+    created() {
+    }
+
+}
+
+export default vueComponent(Card);
+//-----------------------------------------------------------------------------
+</script>

client/components/CardIndex/CardIndex.vue

@@ -0,0 +1,93 @@
+<template>
+    <div>
+        <router-view v-slot="{ Component }">
+            <keep-alive>
+                <component :is="Component" />
+            </keep-alive>
+        </router-view>        
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../vueComponent.js';
+import _ from 'lodash';
+
+const selfRoute = '/cardindex';
+const tab2Route = [
+    '/cardindex/search',
+    '/cardindex/card',
+    '/cardindex/book',
+    '/cardindex/history',
+];
+let lastActiveTab = null;
+
+const componentOptions = {
+    watch: {
+        selectedTab: function(newValue) {
+            lastActiveTab = newValue;
+            this.setRouteByTab(newValue);
+        },
+        curRoute: function(newValue) {
+            this.setTabByRoute(newValue);
+        },
+    },
+};
+class CardIndex {
+    _options = componentOptions;
+    selectedTab = null;
+
+    created() {
+        this.$watch(
+            () => this.$route.path,
+            (newValue) => {
+                if (newValue == '/cardindex' && this.isReader) {
+                    this.$router.replace({ path: '/reader' });
+                }
+            }
+        )
+    }
+
+    mounted() {
+        this.setTabByRoute(this.curRoute);
+    }
+
+    setTabByRoute(route) {
+        const t = _.indexOf(tab2Route, route);
+        if (t >= 0) {
+            if (t !== this.selectedTab)
+                this.selectedTab = t.toString();
+        } else {
+            if (route == selfRoute && lastActiveTab !== null)
+                this.setRouteByTab(lastActiveTab);
+        }
+    }
+
+    setRouteByTab(tab) {
+        const t = Number(tab);
+        if (tab2Route[t] !== this.curRoute) {
+            this.$router.replace(tab2Route[t]);
+        }
+    }
+
+    get mode() {
+        return this.$store.state.config.mode;
+    }
+
+    get curRoute() {
+        const m = this.$route.path.match(/^(\/[^/]*\/[^/]*).*$/i);
+        return (m ? m[1] : this.$route.path);
+    }
+
+    get isReader() {
+        return (this.mode !== null && (this.mode == 'reader' || this.mode == 'omnireader' || this.mode == 'liberama.top'));
+    }
+
+}
+
+export default vueComponent(CardIndex);
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+</style>

client/components/CardIndex/History/History.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        Раздел History в разработке
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../vueComponent.js';
+
+class History {
+    created() {
+    }
+
+}
+
+export default vueComponent(History);
+//-----------------------------------------------------------------------------
+</script>

client/components/CardIndex/Search/Search.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        Раздел Search в разработке
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../../vueComponent.js';
+
+class Search {
+    created() {
+    }
+
+}
+
+export default vueComponent(Search);
+//-----------------------------------------------------------------------------
+</script>

client/components/ExternalLibs/BookmarkSettings/BookmarkSettings.vue

@@ -5,13 +5,13 @@
         </template>
 
         <div class="col column fit">
-            <div class="row items-center top-panel bg-menu-2">
+            <div class="row items-center top-panel bg-grey-3">
                 <q-btn :disabled="!selected" class="q-mr-md" round dense color="blue" icon="la la-check" size="16px" @click.stop="openSelected">
                     <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
                         Открыть выбранную закладку
                     </q-tooltip>
                 </q-btn>
-                <q-input ref="search" v-model="search" bg-color="input" class="col" outlined dense placeholder="Найти">
+                <q-input ref="search" v-model="search" class="col" rounded outlined dense bg-color="white" placeholder="Найти">
                     <template #append>
                         <q-icon v-if="search !== ''" name="la la-times" class="cursor-pointer" @click="resetSearch" />
                     </template>
@@ -19,7 +19,7 @@
             </div>
 
             <div class="col row">
-                <div class="left-panel column items-center no-wrap bg-menu-1">
+                <div class="left-panel column items-center no-wrap bg-grey-3">
                     <q-btn class="q-my-sm" round dense color="blue" icon="la la-plus" size="14px" @click.stop="addBookmark">
                         <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
                             Добавить закладку
@@ -62,7 +62,6 @@
                         v-model:ticked="ticked"
                         v-model:expanded="expanded"
                         class="q-my-xs"
-                        color="input" 
                         :nodes="nodes"
                         node-key="key"
                         tick-strategy="leaf"
@@ -348,7 +347,6 @@ export default vueComponent(BookmarkSettings);
     padding: 0px 10px 10px 10px;
     overflow-x: auto;
     overflow-y: auto;
-    max-width: 520px;
 }
 
 .selected {

client/components/ExternalLibs/ExternalLibs.vue

@@ -5,19 +5,19 @@
         </template>
 
         <template #buttons>
-            <span class="header-button row justify-center items-center" @mousedown.stop @click="fullScreenToggle">
+            <span class="full-screen-button row justify-center items-center" @mousedown.stop @click="fullScreenToggle">
                 <q-icon :name="(fullScreenActive ? 'la la-compress-arrows-alt': 'la la-expand-arrows-alt')" size="16px" />
                 <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">На весь экран</q-tooltip>
             </span>
-            <span class="header-button row justify-center items-center" @mousedown.stop @click="changeScale(0.1)">
+            <span class="full-screen-button row justify-center items-center" @mousedown.stop @click="changeScale(0.1)">
                 <q-icon name="la la-plus" size="16px" />
                 <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Увеличить масштаб</q-tooltip>
             </span>
-            <span class="header-button row justify-center items-center" @mousedown.stop @click="changeScale(-0.1)">
+            <span class="full-screen-button row justify-center items-center" @mousedown.stop @click="changeScale(-0.1)">
                 <q-icon name="la la-minus" size="16px" />
                 <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Уменьшить масштаб</q-tooltip>
             </span>
-            <span class="header-button row justify-center items-center" @mousedown.stop @click="showHelp">
+            <span class="full-screen-button row justify-center items-center" @mousedown.stop @click="showHelp">
                 <q-icon name="la la-question-circle" size="16px" />
                 <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Справка</q-tooltip>
             </span>
@@ -29,11 +29,10 @@
                     ref="rootLink"
                     v-model="rootLink"
                     class="q-mr-sm"
-                    bg-color="input" 
                     :options="rootLinkOptions"
                     style="width: 230px"
                     dropdown-icon="la la-angle-down la-sm"
-                    outlined dense emit-value map-options display-value-sanitize options-sanitize
+                    rounded outlined dense emit-value map-options display-value-sanitize options-sanitize
                     @popup-show="onSelectPopupShow" @popup-hide="onSelectPopupHide"
                 >
                     <template #prepend>
@@ -59,11 +58,10 @@
                     ref="selectedLink"
                     v-model="selectedLink"
                     class="q-mr-sm"
-                    bg-color="input" 
                     :options="selectedLinkOptions"
                     style="width: 50px"
                     dropdown-icon="la la-angle-down la-sm"
-                    outlined dense emit-value map-options hide-selected display-value-sanitize options-sanitize
+                    rounded outlined dense emit-value map-options hide-selected display-value-sanitize options-sanitize
                     @popup-show="onSelectPopupShow" @popup-hide="onSelectPopupHide"
                 >
                     <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
@@ -75,9 +73,9 @@
                     ref="input"
                     v-model="bookUrl"
                     class="col q-mr-sm"
-                    bg-color="input" 
+                    rounded outlined dense
-                    outlined dense
+                    bg-color="white"
-                    placeholder="Скопируйте сюда ссылку на книгу и нажмите 'Открыть'"
+                    placeholder="Скопируйте сюда URL книги"
                     @focus="selectAllOnFocus" @keydown="bookUrlKeyDown"
                 >
                     <template #prepend>
@@ -101,7 +99,7 @@
                     </template>
                 </q-input>
 
-                <q-btn :disabled="!bookUrl" color="green-7" no-caps size="14px" @click="submitUrl()">
+                <q-btn :disabled="!bookUrl" rounded color="green-7" no-caps size="14px" @click="submitUrl">
                     Открыть
                     <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
                         Открыть в читалке
@@ -110,9 +108,9 @@
             </div>
             <div class="separator"></div>
 
-            <div ref="frameBox" class="col fit" style="position: relative; background-color: white">
+            <div ref="frameBox" class="col fit" style="position: relative;">
                 <div ref="frameWrap" class="overflow-hidden">
-                    <iframe v-if="frameVisible" ref="frame" :src="frameSrc" frameborder="0" allow="clipboard-read; clipboard-write"></iframe>
+                    <iframe v-if="frameVisible" ref="frame" :src="frameSrc" frameborder="0"></iframe>
                 </div>
                 <div v-show="transparentLayoutVisible" ref="transparentLayout" class="fit transparent-layout" @click="transparentLayoutClick"></div>
             </div>
@@ -135,8 +133,8 @@
                         ref="bookmarkLink"
                         v-model="bookmarkLink"
                         class="col q-mr-sm"
-                        bg-color="input" 
                         outlined dense
+                        bg-color="white"
                         placeholder="Ссылка для закладки" maxlength="2000" @focus="selectAllOnFocus" @keydown="bookmarkLinkKeyDown"
                     >
                     </q-input>
@@ -145,7 +143,6 @@
                         ref="defaultRootLink"
                         v-model="defaultRootLink"
                         class="q-mr-sm"
-                        bg-color="input" 
                         :options="defaultRootLinkOptions"
                         style="width: 50px"
                         dropdown-icon="la la-angle-down la-sm"
@@ -162,8 +159,8 @@
                         ref="bookmarkDesc"
                         v-model="bookmarkDesc"
                         class="col q-mr-sm"
-                        bg-color="input" 
                         outlined dense
+                        bg-color="white"
                         placeholder="Описание" style="width: 400px" maxlength="100" @focus="selectAllOnFocus" @keydown="bookmarkDescKeyDown"
                     >
                     </q-input>
@@ -307,12 +304,7 @@ class ExternalLibs {
     openInFrameOnAdd = false;
     frameScale = 1;
 
-    inpxReady = false;
-    inpxTitle = '';
-    inpxUrl = '';
-
     created() {
-        this.commit = this.$store.commit;
         this.oldStartLink = '';
         this.justOpened = true;
         this.$root.addEventHook('key', this.keyHook);
@@ -329,6 +321,8 @@ class ExternalLibs {
         this.debouncedGoToLink = _.debounce((link) => {
             this.goToLink(link);
         }, 100, {'maxWait':200});
+        //this.commit = this.$store.commit;
+        //this.commit('reader/setLibs', rstore.libsDefaults);
     }
 
     mounted() {
@@ -340,7 +334,10 @@ class ExternalLibs {
                 i++;
             }
 
-            this.libsDefaults = rstore.getLibsDefaults(this.mode);
+            if (this.mode != 'liberama.top') {
+                this.$router.replace('/404');
+                return;
+            }
 
             this.$refs.window.init();
 
@@ -351,29 +348,18 @@ class ExternalLibs {
             const openerOrigin2 = `https://${openerHost}`;
 
             window.addEventListener('message', (event) => {
-                //from inpx-web
-                if (_.isObject(event.data) && event.data.from === 'inpx-web') {
-                    //console.log(event);
-
-                    this.inpxOrigin = event.origin;
-
-                    this.recvInpxMessage(event.data);
-                    return;
-                }
-
-                //from parent
                 if (event.origin !== openerOrigin1 && event.origin !== openerOrigin2)
                     return;
-
                 if (!_.isObject(event.data) || event.data.from != 'LibsPage')
                     return;
                 if (event.origin == openerOrigin1)
                     this.opener = window.opener;
                 else
                     this.opener = event.source;
-
                 this.openerOrigin = event.origin;
 
+                //console.log(event);
+
                 this.recvMessage(event.data);
             });
 
@@ -403,10 +389,7 @@ class ExternalLibs {
             }
         } else if (d.type == 'libs') {
             this.ready = true;
-            if (d.data)
+            this.libs = _.cloneDeep(d.data);
-                this.libs = _.cloneDeep(d.data);
-            if (d.sets)
-                this.updateSets(d.sets);
         } else if (d.type == 'notify') {
             this.$root.notify.success(d.data, '', {position: 'bottom-right'});
         }
@@ -420,30 +403,6 @@ class ExternalLibs {
         })();
     }
 
-    recvInpxMessage(d) {
-        if (d.type == 'mes') {
-            switch(d.data) {
-                case 'hello-from-inpx-web':
-                    this.sendInpxMessage({type: 'mes', data: 'ready'});
-                    break;
-                case 'ready':
-                    this.inpxReady = true;
-                    break;
-            }
-        } else if (d.type == 'submitUrl') {
-            this.submitUrl(d.data);
-        } else if (d.type == 'titleChange') {
-            this.inpxTitle = d.data;
-        } else if (d.type == 'urlChange') {
-            this.inpxUrl = d.data;
-        }
-    }
-
-    sendInpxMessage(d) {
-        if (this.$refs.frame && this.inpxOrigin)
-            this.$refs.frame.contentWindow.postMessage(Object.assign({}, {from: 'ExternalLibs'}, d), this.inpxOrigin);
-    }
-
     async checkOpener() {
         if (this.opener.closed) {
             await this.$root.stdDialog.alert('Потеряна связь с читалкой. Окно будет закрыто', 'Ошибка');
@@ -451,11 +410,6 @@ class ExternalLibs {
         }
     }
 
-    updateSets(sets) {
-        if (sets.nightMode !== this.nightMode)
-            this.commit('reader/nightModeToggle');
-    }
-
     commitLibs(libs) {
         this.sendMessage({type: 'libs', data: libs});
     }
@@ -504,24 +458,11 @@ class ExternalLibs {
         return this.$store.state.config.mode;
     }
 
-    get nightMode() {
-        return this.$store.state.reader.settings.nightMode;
-    }
-
     get header() {
-        let result = [this.ready ? 'Сетевая библиотека' : 'Загрузка...'];
+        let result = (this.ready ? 'Сетевая библиотека' : 'Загрузка...');
         if (this.ready && this.selectedLink) {
-
+            result += ` | ${(this.libs.comment ? this.libs.comment + ' ': '') + lu.removeProtocol(this.libs.startLink)}`;
-            if (this.inpxReady && this.inpxTitle) {
-                result.push(this.inpxTitle);
-                result.push(lu.removeProtocol(this.inpxUrl));
-            } else {
-                result.push(this.libs.comment);
-                result.push(lu.removeProtocol(this.libs.startLink));
-            }
         }
-
-        result = result.filter(s => s).join(' | ');
         this.$root.setAppTitle(result);
         return result;
     }
@@ -591,7 +532,7 @@ class ExternalLibs {
     get defaultRootLinkOptions() {
         let result = [];
 
-        this.libsDefaults.groups.forEach(group => {
+        rstore.libsDefaults.groups.forEach(group => {
             result.push({label: lu.removeProtocol(group.r), value: group.r});
         });
 
@@ -620,11 +561,6 @@ class ExternalLibs {
     }
 
     goToLink(link) {
-        this.inpxReady = false;
-        this.inpxTitle = '';
-        this.inpxUrl = '';
-        this.inpxOrigin = false;
-
         if (!this.ready || !link)
             return;
 
@@ -640,7 +576,6 @@ class ExternalLibs {
             this.frameVisible = true;
             this.$nextTick(() => {
                 if (this.$refs.frame) {
-                    this.$refs.frame.contentWindow.location.reload(true);
                     this.$refs.frame.contentWindow.focus();
                     this.frameResize();
                 }
@@ -713,17 +648,13 @@ class ExternalLibs {
         this.updateStartLink(true);
     }
 
-    submitUrl(url) {
+    submitUrl() {
-        if (!url) {
+        if (this.bookUrl) {
-            url = this.bookUrl;
-            this.bookUrl = '';
-        }
-
-        if (url) {
             this.sendMessage({type: 'submitUrl', data: {
-                url,
+                url: this.bookUrl,
                 force: true
             }});
+            this.bookUrl = '';
             if (this.closeAfterSubmit)
                 this.close();
         }
@@ -737,12 +668,6 @@ class ExternalLibs {
         } else {
             this.bookmarkLink = this.bookUrl;
             this.bookmarkDesc = '';
-
-            if (!this.bookmarkLink && this.inpxReady && this.inpxUrl) {
-                this.bookmarkLink = this.inpxUrl;
-                if (this.inpxTitle)
-                    this.bookmarkDesc = this.inpxTitle;
-            }
         }
 
         this.addBookmarkMode = mode;
@@ -754,10 +679,10 @@ class ExternalLibs {
     }
 
     updateBookmarkLink() {
-        const index = lu.getSafeRootIndexByUrl(this.libsDefaults.groups, this.defaultRootLink);
+        const index = lu.getSafeRootIndexByUrl(rstore.libsDefaults.groups, this.defaultRootLink);
         if (index >= 0) {
-            this.bookmarkLink = this.libsDefaults.groups[index].s;
+            this.bookmarkLink = rstore.libsDefaults.groups[index].s;
-            this.bookmarkDesc = this.getCommentByLink(this.libsDefaults.groups[index].list, this.bookmarkLink);
+            this.bookmarkDesc = this.getCommentByLink(rstore.libsDefaults.groups[index].list, this.bookmarkLink);
         } else {
             this.bookmarkLink = '';
             this.bookmarkDesc = '';
@@ -912,22 +837,20 @@ class ExternalLibs {
 <p>Окно 'Сетевая библиотека' позволяет открывать ссылки в читалке без переключения между окнами,
 что особенно актуально для мобильных устройств. Имеется возможность управлять закладками
 на понравившиеся ресурсы, книги или страницы авторов. Открытие ссылок и навигация происходят во фрейме, но,
-к сожалению, в нем открываются не все страницы.</p>` + 
+к сожалению, в нем открываются не все страницы.</p>
 
-(this.mode === 'liberama' ?
+<p>Доступ к сайтам <span style="color: blue">http://flibusta.is</span> и <span style="color: blue">http://fantasy-worlds.org</span> работает через прокси.
-`<p>Доступ к сайтам <span style="color: blue">http://flibusta.is</span> и <span style="color: blue">http://fantasy-worlds.org</span> работает через прокси.
 
 <br><span style="color: red"><b>ПРЕДУПРЕЖДЕНИЕ!</b></span>
 Доступ предназначен только для просмотра и скачивания книг. Авторизоваться на этих сайтах
 из фрейма категорически не рекомендуется, т.к. ваше подключение не защищено и данные могут попасть 
 к третьим лицам.
 </p>
-`
-: '') + 
 
-`<p>Из-за проблем с безопасностью, навигация 'вперед-назад' во фрейме осуществляется с помощью контекстного меню правой кнопкой мыши.
+<p>Из-за проблем с безопасностью, навигация 'вперед-назад' во фрейме осуществляется с помощью контекстного меню правой кнопкой мыши.
 На мобильных устройствах для этого служит системная клавиша 'Назад (стрелка влево)' и опция 'Вперед (стрелка вправо)' в меню браузера. 
 </p>
+
 <p>Приятного пользования ;-)
 </p>
             `, 'Справка', {iconName: 'la la-info-circle'});
@@ -971,15 +894,14 @@ export default vueComponent(ExternalLibs);
     background-color: #A0A0A0;
 }
 
-.header-button {
+.full-screen-button {
     width: 30px;
     height: 30px;
     cursor: pointer;
 }
 
-.header-button:hover {
+.full-screen-button:hover {
-    color: white;
+    background-color: #69C05F;
-    background-color: #39902F;
 }
 
 .transparent-layout {

client/components/Help/Help.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        Раздел Help в разработке
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../vueComponent.js';
+
+class Help {
+    created() {
+    }
+
+}
+
+export default vueComponent(Help);
+//-----------------------------------------------------------------------------
+</script>

client/components/Income/Income.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        Раздел Income в разработке
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../vueComponent.js';
+
+class Income {
+    created() {
+    }
+
+}
+
+export default vueComponent(Income);
+//-----------------------------------------------------------------------------
+</script>

client/components/NotFound404/NotFound404.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        Страница не найдена
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../vueComponent.js';
+
+class NotFound404 {
+    created() {
+    }
+
+}
+
+export default vueComponent(NotFound404);
+//-----------------------------------------------------------------------------
+</script>

client/components/Reader/ContentsPage/ContentsPage.vue

@@ -4,34 +4,34 @@
             Оглавление/закладки
         </template>
 
-        <div class="bg-menu-1 row">
+        <div class="bg-grey-3 row">
             <q-tabs
                 v-model="selectedTab"
-                active-color="app"
+                active-color="black"
-                active-bg-color="app"
+                active-bg-color="white"
-                indicator-color="bg-app"
+                indicator-color="white"
                 dense
                 no-caps
                 inline-label
-                class="no-mp bg-menu-2 text-menu"
+                class="no-mp bg-grey-4 text-grey-7"
             >
                 <q-tab name="contents" icon="la la-list" label="Оглавление" />
                 <q-tab name="images" icon="la la-image" label="Изображения" />
-                <!--q-tab name="bookmarks" icon="la la-bookmark" label="Закладки" /-->
+                <q-tab name="bookmarks" icon="la la-bookmark" label="Закладки" />
             </q-tabs>
         </div>
 
         <div class="q-mb-sm" />
 
-        <div v-show="selectedTab == 'contents'" ref="tabPanelContents" class="tab-panel">
+        <div v-show="selectedTab == 'contents'" class="tab-panel">
             <div>
                 <div v-for="item in contents" :key="item.key" class="column" style="width: 540px">
-                    <div :ref="`mainitem${item.key}`" class="row q-px-sm no-wrap" :class="{'item': !item.isBookPos, 'item-book-pos': item.isBookPos}">
+                    <div class="row q-px-sm no-wrap" :class="{'item': !item.isBookPos, 'item-book-pos': item.isBookPos}">
                         <div v-if="item.list.length" class="row justify-center items-center expand-button clickable" @click="expandClick(item.key)">
-                            <q-icon name="la la-caret-right" class="icon" :class="{'expanded-icon': item.expanded}" color="green-8" size="24px" />
+                            <q-icon name="la la-caret-right" class="icon" :class="{'expanded-icon': item.expanded}" color="green-8" size="20px" />
                         </div>
                         <div v-else class="no-expand-button clickable" @click="setBookPos(item.offset)">
-                            <q-icon name="la la-stop" class="icon" style="visibility: hidden" size="24px" />
+                            <q-icon name="la la-stop" class="icon" style="visibility: hidden" size="20px" />
                         </div>
                         <div class="col row clickable" @click="setBookPos(item.offset)">
                             <div :style="item.indentStyle"></div>
@@ -42,12 +42,8 @@
                         </div>
                     </div>
                     
-                    <div v-if="item.expanded" :ref="`subdiv${item.key}`" class="subitems-transition">
+                    <div v-if="item.expanded" :ref="`subitem${item.key}`" class="subitems-transition">
-                        <div 
+                        <div v-for="subitem in item.list" :key="subitem.key" class="row q-px-sm no-wrap" :class="{'subitem': !subitem.isBookPos, 'subitem-book-pos': subitem.isBookPos}">
-                            v-for="subitem in item.list" 
-                            :ref="`subitem${subitem.key}`" 
-                            :key="subitem.key" class="row q-px-sm no-wrap" :class="{'subitem': !subitem.isBookPos, 'subitem-book-pos': subitem.isBookPos}"
-                        >
                             <div class="col row clickable" @click="setBookPos(subitem.offset)">
                                 <div class="no-expand-button"></div>
                                 <div :style="subitem.indentStyle"></div>
@@ -65,10 +61,10 @@
             </div>
         </div>
 
-        <div v-show="selectedTab == 'images'" ref="tabPanelImages" class="tab-panel">
+        <div v-show="selectedTab == 'images'" class="tab-panel">
             <div>
                 <div v-for="item in images" :key="item.key" class="column" style="width: 540px">
-                    <div :ref="`image${item.key}`" class="row q-px-sm no-wrap" :class="{'item': !item.isBookPos, 'item-book-pos': item.isBookPos}">
+                    <div class="row q-px-sm no-wrap" :class="{'item': !item.isBookPos, 'item-book-pos': item.isBookPos}">
                         <div class="col row clickable" @click="setBookPos(item.offset)">
                             <div class="image-thumb-box row justify-center items-center">
                                 <div v-show="!imageLoaded[item.id]" class="image-thumb column justify-center">
@@ -80,13 +76,13 @@
                                 <div class="image-num">
                                     {{ item.num }}
                                 </div>
-                                <div v-show="item.type == 'image/jpeg'" class="image-type text-black it-jpg-color row justify-center">
+                                <div v-show="item.type == 'image/jpeg'" class="image-type it-jpg-color row justify-center">
                                     JPG
                                 </div>
-                                <div v-show="item.type == 'image/png'" class="image-type text-black it-png-color row justify-center">
+                                <div v-show="item.type == 'image/png'" class="image-type it-png-color row justify-center">
                                     PNG
                                 </div>
-                                <div v-show="!item.local" class="image-type text-black it-net-color row justify-center">
+                                <div v-show="!item.local" class="image-type it-net-color row justify-center">
                                     INET
                                 </div>
                             </div>
@@ -128,10 +124,7 @@ const componentOptions = {
     watch: {
         bookPos() {
             this.updateBookPosSelection();
-        },
+        }
-        selectedTab() {
-            this.updateBookPosScrollTop();
-        },
     },
 };
 class ContentsPage {
@@ -250,7 +243,7 @@ class ContentsPage {
             const bin = parsed.binary[image.id];
             const type = (bin ? bin.type : '');
             
-            const label = (image.alt ? image.alt : '<span style="font-size: 90%; color: var(--bg-menu-color2)"><i>Без названия</i></span>');
+            const label = (image.alt ? image.alt : '<span style="font-size: 90%; color: #dddddd"><i>Без названия</i></span>');
             const indentStyle = getIndentStyle(1);
             const labelStyle = getLabelStyle(1);
 
@@ -289,30 +282,31 @@ class ContentsPage {
         if (!this.isVisible)
             return;
 
-        await this.$nextTick();
+        await utils.sleep(50);
         const bp = this.bookPos;
         
         for (let i = 0; i < this.contents.length; i++) {
             const item = this.contents[i];
             const nextOffset = (i < this.contents.length - 1 ? this.contents[i + 1].offset : this.parsed.textLength);
 
-            if (bp >= item.offset && bp < nextOffset) {
-                item.isBookPos = true;
-            } else if (item.isBookPos) {
-                item.isBookPos = false;
-            }
-
             for (let j = 0; j < item.list.length; j++) {
                 const subitem = item.list[j];
                 const nextSubOffset = (j < item.list.length - 1 ? item.list[j + 1].offset : nextOffset);
 
                 if (bp >= subitem.offset && bp < nextSubOffset) {
                     subitem.isBookPos = true;
-                    this.updateBookPosScrollTop('contents', item, subitem, j);
+                    this.contents[i] = Object.assign(item, {list: item.list});
                 } else if (subitem.isBookPos) {
                     subitem.isBookPos = false;
+                    this.contents[i] = Object.assign(item, {list: item.list});
                 }
             }
+
+            if (bp >= item.offset && bp < nextOffset) {
+                this.contents[i] = Object.assign(item, {isBookPos: true});
+            } else if (item.isBookPos) {
+                this.contents[i] = Object.assign(item, {isBookPos: false});
+            }
         }
 
         for (let i = 0; i < this.images.length; i++) {
@@ -320,96 +314,11 @@ class ContentsPage {
             const nextOffset = (i < this.images.length - 1 ? this.images[i + 1].offset : this.parsed.textLength);
 
             if (bp >= img.offset && bp < nextOffset) {
-                this.images[i].isBookPos = true;
+                this.images[i] = Object.assign(img, {isBookPos: true});
             } else if (img.isBookPos) {
-                this.images[i].isBookPos = false;
+                this.images[i] = Object.assign(img, {isBookPos: false});
             }
         }
-
-        this.updateBookPosScrollTop();
-    }
-
-    /*getOffsetTop(key) {
-        let el = this.getFirstElem(this.$refs[`mainitem${key}`]);
-        return (el ? el.offsetTop : 0);
-    }*/
-
-    async updateBookPosScrollTop() {
-        try {
-            await this.$nextTick();
-
-            if (this.selectedTab == 'contents') {
-                let item;
-                let subitem;
-                let i;
-
-                //ищем выделенные item
-                for(const _item of this.contents) {
-                    if (_item.isBookPos) {
-                        item = _item;
-                        for (let ii = 0; ii < item.list.length; ii++) {
-                            const _subitem = item.list[ii];
-                            if (_subitem.isBookPos) {
-                                subitem = _subitem;
-                                i = ii;
-                                break;
-                            }
-                        }
-                        break;
-                    }
-                }
-
-                if (!item)
-                    return;
-
-                //вычисляем и смещаем tabPanel.scrollTop
-                let el = this.getFirstElem(this.$refs[`mainitem${item.key}`]);
-                let elShift = 0;
-                if (subitem && item.expanded) {
-                    const subEl = this.getFirstElem(this.$refs[`subitem${subitem.key}`]);
-                    elShift = el.offsetHeight - subEl.offsetHeight*(i + 1);
-                } else {
-                    elShift = el.offsetHeight;
-                }
-
-                const tabPanel = this.$refs.tabPanelContents;
-                const halfH = tabPanel.clientHeight/2;
-                const newScrollTop = el.offsetTop - halfH - elShift;
-                if (newScrollTop < 20 + tabPanel.scrollTop - halfH || newScrollTop > -20 + tabPanel.scrollTop + halfH) 
-                    tabPanel.scrollTop = newScrollTop;
-            }
-
-            if (this.selectedTab == 'images') {
-                let item;
-
-                //ищем выделенные item
-                for(const _item of this.images) {
-                    if (_item.isBookPos) {
-                        item = _item;
-                        break;
-                    }
-                }
-
-                if (!item)
-                    return;
-
-                //вычисляем и смещаем tabPanel.scrollTop
-                let el = this.getFirstElem(this.$refs[`image${item.key}`]);
-
-                const tabPanel = this.$refs.tabPanelImages;
-                const halfH = tabPanel.clientHeight/2;
-                const newScrollTop = el.offsetTop - halfH - el.offsetHeight/2;
-
-                if (newScrollTop < 20 + tabPanel.scrollTop - halfH || newScrollTop > -20 + tabPanel.scrollTop + halfH) 
-                    tabPanel.scrollTop = newScrollTop;
-            }
-        } catch (e) {
-            console.error(e);
-        }
-    }
-
-    getFirstElem(items) {
-        return (Array.isArray(items) ? items[0] : items);
     }
 
     async expandClick(key) {
@@ -417,17 +326,17 @@ class ContentsPage {
         const expanded = !item.expanded;
 
         if (!expanded) {
-            let subdiv = this.getFirstElem(this.$refs[`subdiv${key}`]);
+            const subitems = this.$refs[`subitem${key}`];
-            subdiv.style.height = '0';
+            subitems.style.height = '0';
             await utils.sleep(200);
         }
 
-        this.contents[key].expanded = expanded;
+        this.contents[key] = Object.assign({}, item, {expanded});
 
         if (expanded) {
             await this.$nextTick();
-            let subdiv = this.getFirstElem(this.$refs[`subdiv${key}`]);
+            const subitems = this.$refs[`subitem${key}`];
-            subdiv.style.height = subdiv.scrollHeight + 'px';
+            subitems.style.height = subitems.scrollHeight + 'px';
         }
     }
 
@@ -466,31 +375,27 @@ export default vueComponent(ContentsPage);
 }
 
 .item, .subitem, .item-book-pos, .subitem-book-pos {
-    border-bottom: 1px solid var(--bg-menu-color2);
+    border-bottom: 1px solid #e0e0e0;
 }
 
 .item:hover, .subitem:hover {
-    background-color: var(--bg-menu-color2);
+    background-color: #f0f0f0;
 }
 
 .item-book-pos {
-    opacity: 1;
+    background-color: #b0f0b0;
-    background-color: var(--bg-selected-item-color1);
 }
 
 .subitem-book-pos {
-    opacity: 1;
+    background-color: #d0f5d0;
-    background-color: var(--bg-selected-item-color2);
 }
 
 .item-book-pos:hover {
-    opacity: 0.8;
+    background-color: #b0e0b0;
-    transition: opacity 0.2s linear;
 }
 
 .subitem-book-pos:hover {
-    opacity: 0.8;
+    background-color: #d0f0d0;
-    transition: opacity 0.2s linear;
 }
 
 .expand-button, .no-expand-button {
@@ -539,7 +444,6 @@ export default vueComponent(ContentsPage);
 
 .image-thumb {
     height: 50px;
-    background-color: white;
 }
 
 .loading-img-icon {

client/components/Reader/CopyTextPage/CopyTextPage.vue

@@ -52,21 +52,18 @@ class CopyTextPage {
             from = (from < 0 ? 0 : from);
             to = paraIndex + 100;
             to = (to > parsed.para.length ? parsed.para.length : to);
-            cut = '<dd>..... Текст вырезан. Если хотите скопировать больше, поставьте в настройках галочку "Загружать весь текст"';
+            cut = '<p>..... Текст вырезан. Если хотите скопировать больше, поставьте в настройках галочку "Загружать весь текст"';
         }
 
         if (from > 0)
             text += cut;
         for (let i = from; i < to; i++) {
             const p = parsed.para[i];
-            if (p.addIndex > 0)
-                continue;
-
             const parts = parsed.splitToStyle(p.text);
             if (this.stopInit)
                 return;
 
-            text += `<dd id="p${i}" class="copyPara">&nbsp;&nbsp;`;
+            text += `<p id="p${i}" class="copyPara">`;
             for (const part of parts)
                 text += part.text;
 

client/components/Reader/HelpPage/CommonHelpPage/CommonHelpPage.vue

@@ -24,7 +24,7 @@
         </p>
         <p>Поддерживаемые форматы: <b>fb2, fb2.zip, html, txt</b> и другие.</p>
 
-        <div v-show="mode == 'omnireader' || mode == 'liberama'">
+        <div v-show="mode == 'omnireader' || mode == 'liberama.top'">
             <p>
                 Вы можете добавить в свой браузер закладку, указав в ее свойствах вместо адреса следующий код:
                 <br><strong>{{ bookmarkText }}</strong>
@@ -59,7 +59,7 @@ class CommonHelpPage {
     }
 
     get bookmarkText() {
-        return `javascript:location.href='${window.location.protocol}//${window.location.host}/#/reader?url='+location.href;`
+        return `javascript:location.href='https://${window.location.host}/?url='+location.href;`
     }
 
     async copyText(text, mes) {
@@ -88,6 +88,6 @@ export default vueComponent(CommonHelpPage);
     margin-left: 10px;
     cursor: pointer;
     font-size: 120%;
-    color: var(--text-anchor-color);
+    color: blue;
 }
 </style>

client/components/Reader/HelpPage/DonateHelpPage/DonateHelpPage.vue

@@ -1,17 +1,70 @@
 <template>
     <div class="page">
-        <div class="column items-center" style="width: 500px">
+        <div class="box">
             <p class="p">
-                Здесь вы можете пожертвовать на развитие проекта:
+                Вы можете пожертвовать на развитие проекта любую сумму:
             </p>
+            <div class="address">
+                <img class="logo" src="./assets/yoomoney.png">
+                <q-btn class="q-ml-sm q-px-sm" dense no-caps @click="donateYooMoney">
+                    Пожертвовать
+                </q-btn><br>
+                <div class="para">
+                    {{ yooAddress }}
+                    <q-icon class="copy-icon" name="la la-copy" @click="copyAddress(yooAddress, 'Кошелёк ЮMoney')">
+                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
+                            Скопировать
+                        </q-tooltip>                    
+                    </q-icon>
+                </div>
+            </div>
 
-            <q-btn no-caps class="q-my-lg" color="green-8" size="14px" style="width: 200px" @click="makeDonation">
+            <!--div class="address">                
-                <q-icon class="q-mr-xs" name="la la-donate" size="24px" />
+                <img class="logo" src="./assets/paypal.png">
-                Поддержать проект
+                <div class="para">
-            </q-btn>
+                    {{ paypalAddress }}
+                    <q-icon class="copy-icon" name="la la-copy" @click="copyAddress(paypalAddress, 'Paypal-адрес')">
+                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
+                            Скопировать
+                        </q-tooltip>                    
+                    </q-icon>
+                </div>
+            </div-->
 
-            <div style="font-size: 60%">
+            <div class="address">                
-                * Ваш донат является подарком автору проекта
+                <img class="logo" src="./assets/bitcoin.png">
+                <div class="para">
+                    {{ bitcoinAddress }}
+                    <q-icon class="copy-icon" name="la la-copy" @click="copyAddress(bitcoinAddress, 'Bitcoin-адрес')">
+                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
+                            Скопировать
+                        </q-tooltip>                    
+                    </q-icon>
+                </div>
+            </div>
+
+            <div class="address">                
+                <img class="logo" src="./assets/litecoin.png">
+                <div class="para">
+                    {{ litecoinAddress }}
+                    <q-icon class="copy-icon" name="la la-copy" @click="copyAddress(litecoinAddress, 'Litecoin-адрес')">
+                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
+                            Скопировать
+                        </q-tooltip>                    
+                    </q-icon>
+                </div>
+            </div>
+
+            <div class="address">                
+                <img class="logo" src="./assets/monero.png">
+                <div class="para">
+                    {{ moneroAddress }}
+                    <q-icon class="copy-icon" name="la la-copy" @click="copyAddress(moneroAddress, 'Monero-адрес')">
+                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
+                            Скопировать
+                        </q-tooltip>                    
+                    </q-icon>
+                </div>
             </div>
         </div>
     </div>
@@ -21,14 +74,28 @@
 //-----------------------------------------------------------------------------
 import vueComponent from '../../../vueComponent.js';
 
-import * as utils from '../../../../share/utils';
+import {copyTextToClipboard} from '../../../../share/utils';
 
 class DonateHelpPage {
+    yooAddress = '410018702323056';
+    paypalAddress = 'bookpauk@gmail.com';
+    bitcoinAddress = '3EbgZ7MK1UVaN38Gty5DCBtS4PknM4Ut85';
+    litecoinAddress = 'MP39Riec4oSNB3XMjiquKoLWxbufRYNXxZ';
+    moneroAddress = '8BQPnvHcPSHM5gMQsmuypDgx9NNsYqwXKfDDuswEyF2Q2ewQSfd2pkK6ydH2wmMyq2JViZvy9DQ35hLMx7g72mFWNJTPtnz';
+
     created() {
     }
 
-    makeDonation() {
+    donateYooMoney() {
-        utils.makeDonation();
+        window.open(`https://yoomoney.ru/to/${this.yooAddress}`, '_blank');
+    }
+
+    async copyAddress(address, prefix) {
+        const result = await copyTextToClipboard(address);
+        if (result)
+            this.$root.notify.success(`${prefix} ${address} успешно скопирован в буфер обмена`);
+        else
+            this.$root.notify.error('Копирование не удалось');
     }
 }
 
@@ -49,4 +116,31 @@ export default vueComponent(DonateHelpPage);
     padding: 0;
     text-indent: 20px;
 }
+
+.box {
+    max-width: 550px;
+    overflow-wrap: break-word;
+}
+
+.address {
+    padding-top: 10px;
+    margin-top: 20px;
+}
+
+.para {
+    margin: 10px 10px 10px 40px;
+}
+
+.logo {
+    width: 130px;
+    position: relative;
+    top: 10px;
+}
+
+.copy-icon {
+    margin-left: 10px;
+    cursor: pointer;
+    font-size: 120%;
+    color: blue;
+}
 </style>

client/components/Reader/HelpPage/HelpPage.vue

@@ -1,24 +1,17 @@
 <template>
-    <Window style="z-index: 200" @close="close">
+    <Window @close="close">
         <template #header>
             Справка
         </template>
 
         <div class="col column" style="min-width: 600px">
-            <div class="bg-menu-1 row">
+            <q-btn-toggle
-                <q-tabs
+                v-model="selectedTab"
-                    v-model="selectedTab"
+                toggle-color="primary"
-                    active-color="app"
+                no-caps unelevated
-                    active-bg-color="app"
+                :options="buttons"
-                    indicator-color="bg-app"
+            />
-                    dense
+            <div class="separator"></div>
-                    no-caps
-                    inline-label
-                    class="bg-menu-2 text-menu"
-                >
-                    <q-tab v-for="btn in buttons" :key="btn.value" :name="btn.value" :label="btn.label" />
-                </q-tabs>
-            </div>
 
             <keep-alive>
                 <component :is="activePage" ref="page" class="col"></component>
@@ -36,14 +29,14 @@ import CommonHelpPage from './CommonHelpPage/CommonHelpPage.vue';
 import HotkeysHelpPage from './HotkeysHelpPage/HotkeysHelpPage.vue';
 import MouseHelpPage from './MouseHelpPage/MouseHelpPage.vue';
 import VersionHistoryPage from './VersionHistoryPage/VersionHistoryPage.vue';
-import DonateHelpPage from './DonateHelpPage/DonateHelpPage.vue';
+//import DonateHelpPage from './DonateHelpPage/DonateHelpPage.vue';
 
 const pages = {
     'CommonHelpPage': CommonHelpPage,
     'HotkeysHelpPage': HotkeysHelpPage,
     'MouseHelpPage': MouseHelpPage,
     'VersionHistoryPage': VersionHistoryPage,
-    'DonateHelpPage': DonateHelpPage,
+    //'DonateHelpPage': DonateHelpPage,
 };
 
 const tabs = [
@@ -80,7 +73,7 @@ class HelpPage {
     }
 
     activateDonateHelpPage() {
-        this.selectedTab = 'DonateHelpPage';
+        //this.selectedTab = 'DonateHelpPage';
     }
 
     activateVersionHistoryHelpPage() {
@@ -100,4 +93,8 @@ export default vueComponent(HelpPage);
 </script>
 
 <style scoped>
+.separator {
+    height: 1px;
+    background-color: #E0E0E0;
+}
 </style>

client/components/Reader/HelpPage/HotkeysHelpPage/HotkeysHelpPage.vue

@@ -19,7 +19,7 @@
 //-----------------------------------------------------------------------------
 import vueComponent from '../../../vueComponent.js';
 
-import UserHotKeys from '../../SettingsPage/KeysTab/UserHotKeys/UserHotKeys.vue';
+import UserHotKeys from '../../SettingsPage/UserHotKeys/UserHotKeys.vue';
 
 const componentOptions = {
     components: {

client/components/Reader/HelpPage/MouseHelpPage/MouseHelpPage.vue

@@ -13,7 +13,7 @@
             <li>Жесты для тачскрина:</li>
             <ul>
                 <li style="list-style-type: square">
-                    от центра вверх/двойной тап по центру: на весь экран
+                    от центра вверх: на весь экран
                 </li>
                 <li style="list-style-type: square">
                     от центра вниз: плавный скроллинг

client/components/Reader/HelpPage/VersionHistoryPage/VersionHistoryPage.vue

@@ -72,7 +72,7 @@ p {
 }
 
 .clickable {
-    color: var(--text-anchor-color);
+    color: blue;
     text-decoration: underline;
     cursor: pointer;
 }

client/components/Reader/LibsPage/LibsPage.vue

@@ -8,7 +8,7 @@ import vueComponent from '../../vueComponent.js';
 
 import Window from '../../share/Window.vue';
 import * as utils from '../../../share/utils';
-import rstore from '../../../store/modules/reader';
+//import rstore from '../../../store/modules/reader';
 import _ from 'lodash';
 
 const componentOptions = {
@@ -28,18 +28,13 @@ class LibsPage {
         this.popupWindow = null;
         this.commit = this.$store.commit;
         this.messageListener = null;
+        //this.commit('reader/setLibs', rstore.libsDefaults);
     }
 
-    async init() {
+    init() {
-        if (!this.mode)
+        if (this.mode != 'liberama.top')
             return;
 
-        //TODO: убрать условие с mode в 24г
-        if (!this.libs || !this.libs.groups || (this.mode === 'omnireader' && this.libs.mode !== this.mode)) {
-            const defaults = rstore.getLibsDefaults(this.mode);
-            this.commit('reader/setLibs', defaults);
-        }
-
         this.childReady = false;
         const subdomain = (window.location.protocol != 'http:' ? 'b.' : '');
         this.origin = `http://${subdomain}${window.location.host}`;
@@ -119,12 +114,8 @@ class LibsPage {
         return this.$store.state.reader.libs;
     }
 
-    get nightMode() {
-        return this.$store.state.reader.settings.nightMode;
-    }
-
     sendLibs() {
-        this.sendMessage({type: 'libs', data: _.cloneDeep(this.libs), sets: {nightMode: this.nightMode}});
+        this.sendMessage({type: 'libs', data: _.cloneDeep(this.libs)});
     }
 
     close() {

client/components/Reader/LoaderPage/LoaderPage.vue

@@ -1,6 +1,6 @@
 <template>
     <div ref="main" class="column no-wrap" style="min-height: 500px">
-        <div v-if="mode != 'liberama'" class="relative-position">
+        <div v-if="mode != 'liberama.top'" class="relative-position">
             <GithubCorner url="https://github.com/bookpauk/liberama" corner-color="#1B695F" git-color="#EBE2C9"></GithubCorner>
         </div>
         <div class="col column justify-center items-center no-wrap overflow-hidden" style="min-height: 230px">
@@ -12,30 +12,22 @@
         </div>
 
         <div class="col-auto column justify-start items-center no-wrap overflow-hidden">
-            <q-input
+            <q-input ref="input" v-model="bookUrl" class="full-width q-px-sm" style="max-width: 700px" outlined dense bg-color="white" placeholder="URL книги" @keydown="onInputKeydown">
-                ref="input" v-model="bookUrl" class="full-width q-px-sm" style="max-width: 700px" 
-                outlined dense bg-color="input" placeholder="Ссылка на книгу или веб-страницу" @keydown="onInputKeydown"
-            >
                 <template #append>
                     <q-btn rounded flat style="width: 40px" icon="la la-check" @click="submitUrl" />
                 </template>
             </q-input>
 
-            <input
+            <input id="file" ref="file" type="file" style="display: none;" @change="loadFile" />
-                id="file" ref="file" type="file" 
-                style="display: none;"
-                :accept="acceptFileExt"
-                @change="loadFile" 
-            />
 
             <div class="q-my-sm"></div>
-            <q-btn no-caps dense class="q-px-sm" color="btn1" size="13px" @click="loadFileClick">
+            <q-btn no-caps dense class="q-px-sm" color="primary" size="13px" @click="loadFileClick">
                 <q-icon class="q-mr-xs" name="la la-caret-square-up" size="24px" />
                 Загрузить файл с диска
             </q-btn>
             
             <div class="q-my-sm"></div>
-            <q-btn no-caps dense class="q-px-sm" color="btn1" size="13px" @click="loadBufferClick">
+            <q-btn no-caps dense class="q-px-sm" color="primary" size="13px" @click="loadBufferClick">
                 <q-icon class="q-mr-xs" name="la la-comment" size="24px" />
                 Из буфера обмена
             </q-btn>
@@ -56,7 +48,7 @@
 
         <div class="col column justify-end items-center no-wrap overflow-hidden">
             <span class="bottom-span clickable" @click="openHelp">Справка</span>
-            <span class="bottom-span clickable" @click="openDonate">Помочь проекту</span>
+            <!--span class="bottom-span clickable" @click="openDonate">Помочь проекту</span-->
 
             <span v-if="version == clientVersion" class="bottom-span">v{{ version }}</span>
             <span v-else class="bottom-span">Версия сервера {{ version }}, версия клиента {{ clientVersion }}, необходимо обновить страницу</span>
@@ -72,7 +64,6 @@ import vueComponent from '../../vueComponent.js';
 
 import GithubCorner from './GithubCorner/GithubCorner.vue';
 
-import Dialog from '../../share/Dialog.vue';
 import PasteTextPage from './PasteTextPage/PasteTextPage.vue';
 import {versionHistory} from '../versionHistory';
 import * as utils from '../../../share/utils';
@@ -80,7 +71,6 @@ import * as utils from '../../../share/utils';
 const componentOptions = {
     components: {
         GithubCorner,
-        Dialog,
         PasteTextPage,
     },
 };
@@ -108,7 +98,7 @@ class LoaderPage {
     get title() {
         if (this.mode == 'omnireader')
             return 'Omni Reader - браузерная онлайн-читалка.';
-        if (this.mode == 'liberama')
+        if (this.mode == 'liberama.top')
             return 'Liberama Reader - браузерная онлайн-читалка.';
         return 'Универсальная читалка книг и ресурсов интернета.';
 
@@ -122,10 +112,6 @@ class LoaderPage {
         return this.$store.state.config.version;
     }
 
-    get acceptFileExt() {
-        return this.$store.state.config.acceptFileExt;
-    }
-
     get isExternalConverter() {
         return this.$store.state.config.useExternalBookConverter;
     }
@@ -158,7 +144,7 @@ class LoaderPage {
 
     loadBuffer(opts) {
         if (opts.buffer.length) {
-            const file = new File([opts.buffer], `paste_from_clipboard_#${utils.randomHexString(10)}`);
+            const file = new File([opts.buffer], 'dummyName-PasteFromClipboard');
             this.$emit('load-file', {file});
         }
     }
@@ -217,7 +203,7 @@ export default vueComponent(LoaderPage);
 }
 
 .clickable {
-    color: var(--text-anchor-color);
+    color: blue;
     text-decoration: underline;
     cursor: pointer;
 }

client/components/Reader/LoaderPage/PasteTextPage/PasteTextPage.vue

@@ -8,11 +8,9 @@
             </span>
         </template>
 
-        <div class="fit column main">
+        <q-input v-model="bookTitle" class="q-px-sm" dense borderless placeholder="Введите название текста" />
-            <q-input v-model="bookTitle" class="q-px-sm" dense borderless placeholder="Введите название текста" />
+        <hr />
-            <hr />
+        <textarea ref="textArea" class="text" @paste="calcTitle"></textarea>
-            <textarea ref="textArea" class="main text" @paste="calcTitle"></textarea>
-        </div>
     </Window>
 </template>
 
@@ -41,10 +39,6 @@ class PasteTextPage {
         this.$refs.textArea.focus();
     }
 
-    get dark() {
-        return this.$store.state.reader.settings.nightMode;
-    }
-
     getNonEmptyLine3words(text, count) {
         let result = '';
         const lines = text.split("\n");
@@ -66,7 +60,7 @@ class PasteTextPage {
 
     calcTitle(event) {
         if (this.bookTitle == '') {
-            this.bookTitle = `Из буфера обмена ${utils.dateFormat(new Date())}`;
+            this.bookTitle = `Из буфера обмена ${utils.formatDate(new Date(), 'noDate')}`;
             if (event) {
                 let text = event.clipboardData.getData('text');
                 this.bookTitle += ': ' + _.compact([
@@ -121,11 +115,6 @@ export default vueComponent(PasteTextPage);
     outline: none;
 }
 
-.main {
-    color: var(--text-app-color);
-    background-color: var(--bg-app-color);
-}
-
 hr {
     margin: 0;
     padding: 0;

client/components/Reader/ProgressPage/ProgressPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div v-show="visible" class="column justify-center items-center" style="background-color: rgba(0, 0, 0, 0.8); z-index: 100;">
+    <div v-show="visible" class="column justify-center items-center z-max" style="background-color: rgba(0, 0, 0, 0.8)">
         <div class="column justify-start items-center" style="height: 250px">
             <q-circular-progress
                 show-value

client/components/Reader/ReaderDialogs/ReaderDialogs.vue

@@ -12,69 +12,62 @@
             <span class="clickable" style="font-size: 13px" @click="openVersionHistory">Посмотреть историю версий</span>
 
             <template #footer>
-                <q-btn class="q-px-md" color="btn2" text-color="app" dense no-caps @click="whatsNewDisable">
+                <q-btn class="q-px-md" dense no-caps @click="whatsNewDisable">
                     Больше не показывать
                 </q-btn>
             </template>
         </Dialog>
 
-        <q-dialog ref="dialog2" v-model="donationVisible" style="z-index: 100" no-route-dismiss no-esc-dismiss no-backdrop-dismiss>
+        <Dialog ref="dialog2" v-model="donationVisible">
-            <div class="column bg-dialog no-wrap q-pa-md">
+            <template #header>
-                <div class="row justify-center q-mb-md">
+                Здравствуйте, уважаемые читатели!
-                    Здравствуйте, дорогие читатели!
+            </template>
-                </div>
 
-                <div class="q-mx-md column" style="font-size: 90%; word-break: normal">
+            <div style="word-break: normal">
-                    <div>
+                Стартовала ежегодная акция "Оплатим хостинг вместе".<br><br>
-                        Вот уже много лет мы все вместе пользуемся нашей любимой читалкой.<br><br>
 
-                        Напоминаем вам, что проект является некоммерческим и обладает такими
+                Для оплаты годового хостинга читалки, необходимо собрать около 2000 рублей.
-                        достоинствами, как:
+                В настоящий момент у автора эта сумма есть в наличии. Однако будет справедливо, если каждый
+                сможет проголосовать рублем за то, чтобы читалка так и оставалась:
 
-                        <ul>
+                <ul>
-                            <li>все функции читалки открыты и доступны совершенно бесплатно</li>
+                    <li>непрерывно улучшаемой</li>
-                            <li>в проекте отсутствует какая-либо реклама или баннеры</li>
+                    <li>без рекламы</li>
-                            <li>нет никакой регистрации и монетизации</li>
+                    <li>без регистрации</li>
-                            <li>нет сбора персональных данных</li>
+                    <li>Open Source</li>
-                            <li>открытый исходный код</li>
+                </ul>
-                            <li>проект постепенно улучшается, по мере возможности</li>
-                        </ul>
 
-                        Однако на оплату хостинга читалки и сервера обновлений автор тратит свои 
+                Автор также обращается с просьбой о помощи в распространении 
-                        собственные средства, а также тратит свое время и силы на улучшение проекта.
+                <a href="https://omnireader.ru" target="_blank">ссылки</a>
-                        <br><br>
+                <q-icon class="copy-icon" name="la la-copy" @click="copyLink('https://omnireader.ru')">
-                        Давайте поддержим наш ресурс, чтобы и дальше спокойно существовать и развиваться:
+                    <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
-                    </div>
+                        Скопировать
+                    </q-tooltip>                    
+                </q-icon>
+                на читалку через тематические форумы, соцсети, мессенджеры и пр.
+                Чем нас больше, тем легче оставаться на плаву и тем больше мотивации у разработчика, чтобы продолжать работать над проектом.
 
-                    <q-btn style="margin: 10px 20px 10px 20px" color="green-8" no-caps @click="makeDonation">
+                <br><br>
-                        <q-icon class="q-mr-xs" name="la la-donate" size="24px" />
+                Если соберется бóльшая сумма, то разработка децентрализованной библиотеки для свободного обмена книгами будет по возможности ускорена.
-                        Поддержать проект
+                <br><br>
-                    </q-btn>
+                P.S. При необходимости можно воспользоваться подходящим обменником на <a href="https://www.bestchange.ru" target="_blank">bestchange.ru</a>
 
-                    <div class="row justify-center q-mt-sm">
+                <br><br>
-                        Напомнить снова через:
+                <div class="row justify-center">
-                    </div>
+                    <!--q-btn class="q-px-sm" color="primary" dense no-caps rounded @click="openDonate">
-
+                        Помочь проекту
-                    <div class="row justify-between" style="margin: 0 20px 10px 20px">
+                    </q-btn-->
-                        <q-btn style="width: 140px; margin-top: 5px" no-caps @click="donationDialogRemindLater(30)">
-                            1 месяц
-                        </q-btn>
-                        <q-btn style="width: 140px; margin-top: 5px" no-caps @click="donationDialogRemindLater(60)">
-                            2 месяца
-                        </q-btn>
-                        <q-btn style="width: 140px; margin-top: 5px" no-caps @click="donationDialogRemindLater(90)">
-                            3 месяца
-                        </q-btn>
-                    </div>
-
-                    <div class="row justify-center q-mt-md">
-                        <div class="q-px-sm clickable" style="font-size: 80%" @click="openDonate">
-                            Помочь проекту можно в любое время
-                        </div>
-                    </div>
                 </div>
             </div>
-        </q-dialog>
+
+            <template #footer>
+                <span class="clickable row justify-end" style="font-size: 60%; color: grey" @click="donationDialogDisable">Больше не показывать</span>                        
+                <br>
+                <q-btn class="q-px-sm" dense no-caps @click="donationDialogRemind">
+                    Напомнить позже
+                </q-btn>
+            </template>
+        </Dialog>
 
         <Dialog ref="dialog3" v-model="urlHelpVisible">
             <template #header>
@@ -83,8 +76,13 @@
             </template>
 
             <div style="word-break: normal">
-                Если вы пытаетесь вставить текст в читалку из буфера обмена, пожалуйста воспользуйтесь кнопкой
+                Если вы хотите найти определенную книгу и открыть в читалке, добро пожаловать в
-                <q-btn no-caps dense class="q-px-sm" color="btn1" size="13px" @click="loadBufferClick">
+                раздел "Сетевая библиотека" (кнопка <q-icon name="la la-sitemap" size="32px" />) на сайте
+                <a href="https://liberama.top" target="_blank">liberama.top</a>
+
+                <br><br>
+                Если же вы пытаетесь вставить текст в читалку из буфера обмена, пожалуйста воспользуйтесь кнопкой
+                <q-btn no-caps dense class="q-px-sm" color="primary" size="13px" @click="loadBufferClick">
                     <q-icon class="q-mr-xs" name="la la-comment" size="24px" />
                     Из буфера обмена
                 </q-btn>
@@ -101,7 +99,6 @@ import vueComponent from '../../vueComponent.js';
 import Dialog from '../../share/Dialog.vue';
 import * as utils from '../../../share/utils';
 import {versionHistory} from '../versionHistory';
-import rstore from '../../../store/modules/reader';
 
 const componentOptions = {
     components: {
@@ -131,19 +128,19 @@ class ReaderDialogs {
 
     async init() {
         await this.showWhatsNew();
-        //await this.showDonation();
+        await this.showDonation();
     }
 
     loadSettings() {
         const settings = this.settings;
         this.showWhatsNewDialog = settings.showWhatsNewDialog;
-        this.showDonationDialog = settings.showDonationDialog;
+        this.showDonationDialog2020 = settings.showDonationDialog2020;
     }
 
     async showWhatsNew() {
         const whatsNew = versionHistory[0];
         if (this.showWhatsNewDialog &&
-            whatsNew.showUntil >= utils.dateFormat(new Date(), 'YYYY-MM-DD') &&
+            whatsNew.showUntil >= utils.formatDate(new Date(), 'coDate') &&
             this.whatsNewHeader != this.whatsNewContentHash) {
             await utils.sleep(2000);
             this.whatsNewContent = 'Версия ' + this.whatsNewHeader + whatsNew.content;
@@ -152,7 +149,9 @@ class ReaderDialogs {
     }
 
     async showDonation() {
-        if ((this.mode == 'omnireader' || this.mode == 'liberama') && this.showDonationDialog && this.donationNextPopup <= Date.now()) {
+        const today = utils.formatDate(new Date(), 'coDate');
+
+        if ((this.mode == 'omnireader' || this.mode == 'liberama.top') && today < '2020-03-01' && this.showDonationDialog2020 && this.donationRemindDate != today) {
             await utils.sleep(3000);
             this.donationVisible = true;
         }
@@ -163,22 +162,23 @@ class ReaderDialogs {
     }
 
     loadBufferClick() {
-        this.$emit('load-buffer-toggle');
         this.urlHelpVisible = false;
     }
 
-    donationDialogRemindLater(remindAfter = 30) {
+    donationDialogDisable() {
         this.donationVisible = false;
-
+        if (this.showDonationDialog2020) {
-        this.commit('reader/setDonationNextPopup', Date.now() + rstore.dayMs*remindAfter);
+            this.commit('reader/setSettings', { showDonationDialog2020: false });
+        }
     }
 
-    makeDonation() {
+    donationDialogRemind() {
-        utils.makeDonation();
+        this.donationVisible = false;
-        this.donationDialogRemindLater();
+        this.commit('reader/setDonationRemindDate', utils.formatDate(new Date(), 'coDate'));
     }
 
     openDonate() {
+        this.donationVisible = false;
         this.$emit('donate-toggle');
     }
 
@@ -216,8 +216,8 @@ class ReaderDialogs {
         return this.$store.state.reader.whatsNewContentHash;
     }
 
-    get donationNextPopup() {
+    get donationRemindDate() {
-        return this.$store.state.reader.donationNextPopup;
+        return this.$store.state.reader.donationRemindDate;
     }
 
     keyHook() {
@@ -233,7 +233,7 @@ export default vueComponent(ReaderDialogs);
 
 <style scoped>
 .clickable {
-    color: var(--text-anchor-color);
+    color: blue;
     text-decoration: underline;
     cursor: pointer;
 }

client/components/Reader/SearchPage/SearchPage.vue

@@ -8,11 +8,12 @@
             <span v-show="initStep">{{ initPercentage }}%</span>
 
             <div v-show="!initStep" class="input">
-                <q-input
+                <!--input ref="input"
-                    ref="input" v-model="needle"
+                    placeholder="что ищем"
+                    :value="needle" @input="needle = $event.target.value"/-->
+                <q-input ref="input" v-model="needle"
                     class="col" outlined dense
-                    bg-color="input"
+                    placeholder="что ищем"
-                    placeholder="Найти"
                     @keydown="inputKeyDown"         
                 />
                 <div style="position: absolute; right: 10px; margin-top: 10px; font-size: 16px;">
@@ -21,10 +22,10 @@
             </div>
             <q-btn-group v-show="!initStep" class="button-group row no-wrap">
                 <q-btn class="button" dense stretch @click="showNext">
-                    <q-icon style="top: -2px" name="la la-angle-down" dense size="22px" />
+                    <q-icon style="top: -6px" name="la la-angle-down" dense size="22px" />
                 </q-btn>
                 <q-btn class="button" dense stretch @click="showPrev">
-                    <q-icon name="la la-angle-up" dense size="22px" />
+                    <q-icon style="top: -4px" class="icon" name="la la-angle-up" dense size="22px" />
                 </q-btn>
             </q-btn-group>
         </div>
@@ -107,17 +108,12 @@ class SearchPage {
             this.parsed = parsed;
         }
 
-        this.header = 'Поиск в тексте';
+        this.header = 'Найти';
         await this.$nextTick();
-        this.focusInput();
+        this.$refs.input.focus();
         this.$refs.input.select();
     }
 
-    focusInput() {
-        if (!this.$root.isMobileDevice)
-            this.$refs.input.focus();
-    }
-
     get foundText() {
         if (this.foundList.length && this.foundCur >= 0)
             return `${this.foundCur + 1}/${this.foundList.length}`;
@@ -155,8 +151,7 @@ class SearchPage {
         } else {
             this.$emit('stop-text-search');
         }
-
+        this.$refs.input.focus();
-        this.focusInput();
     }
 
     showPrev() {
@@ -172,8 +167,7 @@ class SearchPage {
         } else {
             this.$emit('stop-text-search');
         }
-
+        this.$refs.input.focus();
-        this.focusInput();
     }
 
     close() {

client/components/Reader/ServerStorage/ServerStorage.vue

@@ -12,7 +12,6 @@ import bookManager from '../share/bookManager';
 import readerApi from '../../../api/reader';
 import * as utils from '../../../share/utils';
 import * as cryptoUtils from '../../../share/cryptoUtils';
-import LockQueue from '../../../share/LockQueue';
 
 import localForage from 'localforage';
 const ssCacheStore = localForage.createInstance({
@@ -22,12 +21,10 @@ const ssCacheStore = localForage.createInstance({
 const componentOptions = {
     watch: {
         serverSyncEnabled: function() {
-            if (this.inited)
+            this.serverSyncEnabledChanged();
-                this.serverSyncEnabledChanged();
         },
         serverStorageKey: function() {
-            if (this.inited)
+            this.serverStorageKeyChanged(true);
-                this.serverStorageKeyChanged(true);
         },
         settings: function() {
             this.debouncedSaveSettings();
@@ -51,9 +48,6 @@ class ServerStorage {
         this.keyInited = false;
         this.commit = this.$store.commit;
         this.prevServerStorageKey = null;
-        this.identity = utils.randomHexString(20);
-        this.lock = new LockQueue(100);
-
         this.$root.generateNewServerStorageKey = () => {this.generateNewServerStorageKey()};
 
         this.debouncedSaveSettings = _.debounce(() => {
@@ -87,13 +81,6 @@ class ServerStorage {
             if (!this.cachedRecentMod)
                 await this.cleanCachedRecent('cachedRecentMod');
 
-            //подстраховка хранения ключа, восстановим из IndexedDB при проблемах в localStorage
-            if (!this.serverStorageKey) {
-                const key = await ssCacheStore.getItem('storageKey');
-                if (key)
-                    this.commit('reader/setServerStorageKey', key);
-            }
-
             if (!this.serverStorageKey) {
                 //генерируем новый ключ
                 await this.generateNewServerStorageKey();
@@ -132,7 +119,6 @@ class ServerStorage {
     async generateNewServerStorageKey() {
         const key = utils.toBase58(utils.randomArray(32));
         this.commit('reader/setServerStorageKey', key);
-        //дождемся serverStorageKeyChanged, событие по watch не работает при this.inited == false
         await this.serverStorageKeyChanged(true);
     }
 
@@ -151,10 +137,6 @@ class ServerStorage {
     async serverStorageKeyChanged(force) {
         if (this.prevServerStorageKey != this.serverStorageKey) {
             this.prevServerStorageKey = this.serverStorageKey;
-
-            //сохраним ключ также в IndexedDB, чтобы была возможность восстановить при проблемах с localStorage
-            await ssCacheStore.setItem('storageKey', this.serverStorageKey);
-
             this.hashedStorageKey = utils.toBase58(cryptoUtils.sha256(this.serverStorageKey));
             this.keyInited = true;
 
@@ -219,10 +201,6 @@ class ServerStorage {
         return this.$store.state.reader.libsRev;
     }
 
-    get offlineModeActive() {
-        return this.$store.state.reader.offlineModeActive;
-    }
-
     checkCurrentProfile() {
         if (!this.profiles[this.currentProfile]) {
             this.commit('reader/setCurrentProfile', '');
@@ -564,16 +542,14 @@ class ServerStorage {
         return true;
     }
 
-    async saveRecent(itemKeys, recurse) {
+    async saveRecent(itemKey, recurse) {
-        while (!this.inited)
+        while (!this.inited || this.savingRecent)
             await utils.sleep(100);
 
-        if (!this.keyInited || !this.serverSyncEnabled)
+        if (!this.keyInited || !this.serverSyncEnabled || this.savingRecent)
             return;
 
-        let needRecurseCall = false;
+        this.savingRecent = true;
-
-        await this.lock.get();
         try {        
             const bm = bookManager;
 
@@ -583,29 +559,22 @@ class ServerStorage {
 
             //newRecentMod
             let newRecentMod = {};
-            let oneItemKey = null;
+            if (itemKey && this.cachedRecentPatch.data[itemKey] && this.prevItemKey == itemKey) {
-            if (itemKeys && itemKeys.length == 1)
-                oneItemKey = itemKeys[0];
-
-            if (oneItemKey && this.cachedRecentPatch.data[oneItemKey] && this.prevItemKey == oneItemKey) {
                 newRecentMod = _.cloneDeep(this.cachedRecentMod);
                 newRecentMod.rev++;
 
-                newRecentMod.data.key = oneItemKey;
+                newRecentMod.data.key = itemKey;
-                newRecentMod.data.mod = utils.getObjDiff(this.cachedRecentPatch.data[oneItemKey], bm.recent[oneItemKey]);
+                newRecentMod.data.mod = utils.getObjDiff(this.cachedRecentPatch.data[itemKey], bm.recent[itemKey]);
                 needSaveRecentMod = true;
             }
-            this.prevItemKey = oneItemKey;
+            this.prevItemKey = itemKey;
 
             //newRecentPatch
             let newRecentPatch = {};
-            if (itemKeys && !needSaveRecentMod) {
+            if (itemKey && !needSaveRecentMod) {
                 newRecentPatch = _.cloneDeep(this.cachedRecentPatch);
                 newRecentPatch.rev++;
-
+                newRecentPatch.data[itemKey] = _.cloneDeep(bm.recent[itemKey]);
-                for (const key of itemKeys) {
-                    newRecentPatch.data[key] = _.cloneDeep(bm.recent[key]);
-                }
 
                 const applyMod = this.cachedRecentMod.data;
                 if (applyMod && applyMod.key && newRecentPatch.data[applyMod.key])
@@ -618,7 +587,11 @@ class ServerStorage {
 
             //newRecent
             let newRecent = {};
-            if (!itemKeys || (needSaveRecentPatch && Object.keys(newRecentPatch.data).length > 10)) {
+            if (!itemKey || (needSaveRecentPatch && Object.keys(newRecentPatch.data).length > 10)) {
+                //ждем весь bm.recent
+                /*while (!bookManager.loaded)
+                    await utils.sleep(100);*/
+
                 newRecent = {rev: this.cachedRecent.rev + 1, data: _.cloneDeep(bm.recent)};
                 newRecentPatch = {rev: this.cachedRecentPatch.rev + 1, data: {}};
                 newRecentMod = {rev: this.cachedRecentMod.rev + 1, data: {}};
@@ -652,8 +625,10 @@ class ServerStorage {
 
                 if (res)
                     this.warning(`Последние изменения отменены. Данные синхронизированы с сервером.`);
-                if (!recurse && itemKeys) {
+                if (!recurse && itemKey) {
-                    needRecurseCall = true;
+                    this.savingRecent = false;
+                    await this.saveRecent(itemKey, true);
+                    return;
                 }
             } else if (result.state == 'success') {
                 if (needSaveRecent && newRecent.rev)
@@ -662,15 +637,10 @@ class ServerStorage {
                     await this.setCachedRecentPatch(newRecentPatch);
                 if (needSaveRecentMod && newRecentMod.rev)
                     await this.setCachedRecentMod(newRecentMod);
-            } else {
-                this.prevItemKey = null;
             }
         } finally {
-            this.lock.ret();
+            this.savingRecent = false;
         }
-
-        if (needRecurseCall)
-            await this.saveRecent(itemKeys, true);
     }
 
     async storageCheck(items) {
@@ -686,7 +656,7 @@ class ServerStorage {
     }
 
     async storageApi(action, items, force) {
-        const request = {action, identity: this.identity, items};
+        const request = {action, items};
         if (force)
             request.force = true;
         const encodedRequest = await this.encodeStorageItems(request);
@@ -758,10 +728,10 @@ class ServerStorage {
                 const ids = id.split('.');
                 if (!(ids.length == 2) || !(ids[0] == this.hashedStorageKey))
                     throw new Error(`decodeStorageItems: bad id - ${id}`);
-                items[utils.fromBase58(ids[1]).toString()] = decoded;
+                items[utils.fromBase58(ids[1])] = decoded;
             }
         }
-        
+
         result.items = items;
         return result;
     }

client/components/Reader/SetPositionPage/SetPositionPage.vue

@@ -1,21 +1,19 @@
 <template>
-    <Window ref="window" height="125px" max-width="600px" :top-shift="-50" @close="close">
+    <Window ref="window" height="140px" max-width="600px" :top-shift="-50" @close="close">
         <template #header>
             Установить позицию
         </template>
 
-        <div class="col column justify-center">
+        <div id="set-position-slider" class="slider q-px-md">
-            <div id="set-position-slider" class="slider q-px-md column justify-center">
+            <q-slider
-                <q-slider
+                v-model="sliderValue"
-                    v-model="sliderValue"
+                thumb-path="M 2, 10 a 8.5,8.5 0 1,0 17,0 a 8.5,8.5 0 1,0 -17,0"
-                    thumb-path="M 2, 10 a 8.5,8.5 0 1,0 17,0 a 8.5,8.5 0 1,0 -17,0"
+                
-                    
+                :max="sliderMax"
-                    :max="sliderMax"
+                label
-                    label
+                :label-value="(sliderMax ? (sliderValue/sliderMax*100).toFixed(2) + '%' : 0)"
-                    :label-value="(sliderMax ? (sliderValue/sliderMax*100).toFixed(2) + '%' : 0)"
+                color="primary"
-                    color="primary"
+            />
-                />
-            </div>
         </div>
     </Window>
 </template>
@@ -78,9 +76,8 @@ export default vueComponent(SetPositionPage);
 
 <style scoped>
 .slider {
-    margin: 0 20px 0 20px;
+    margin: 20px;
-    height: 35px;
+    background-color: #efefef;
-    background-color: var(--bg-input-color);
     border-radius: 15px;
 }
 </style>

client/components/Reader/SettingsPage/ButtonsTab.inc

@@ -0,0 +1,9 @@
+<div class="part-header">Показывать кнопки панели</div>
+
+<div class="item row" v-for="item in toolButtons" :key="item.name" v-show="item.name != 'libs' || mode == 'liberama.top'">
+    <div class="label-3"></div>
+    <div class="col row">
+        <q-checkbox size="xs" v-model="showToolButton[item.name]" :label="rstore.readerActions[item.name]"
+        />
+    </div>
+</div>

client/components/Reader/SettingsPage/ConvertTab.inc

@@ -0,0 +1,87 @@
+<!---------------------------------------------->
+<div class="q-mt-sm column items-center">
+    <span>Настройки конвертирования применяются ко всем</span>
+    <span>вновь загружаемым или обновляемым файлам</span>
+</div>
+
+<!---------------------------------------------->
+<div class="part-header">HTML, XML, TXT</div>
+
+<div class="item row">
+    <div class="label-7">Текст</div>
+    <div class="col row">
+        <q-checkbox v-model="splitToPara" size="xs" label="Попытаться разбить текст на параграфы">
+            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                Опция принудительно включает эвристику разбиения текста на<br>
+                параграфы в случае, если формат файла определен как html,<br>
+                xml или txt. Возможна нечитабельная разметка текста.
+            </q-tooltip>
+        </q-checkbox>
+    </div>
+</div>
+
+<div class="item row">
+    <div class="label-7">Сайты</div>
+    <div class="col row">
+        <q-checkbox v-model="enableSitesFilter" size="xs" label="Включить html-фильтр для сайтов">
+            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                Html-фильтр вырезает лишние элементы со<br>
+                страницы для определенных сайтов, таких как:<br>
+                samlib.ru<br>
+                www.fanfiction.net<br>
+                archiveofourown.org<br>
+                и других
+            </q-tooltip>
+        </q-checkbox>
+    </div>
+</div>
+
+<!---------------------------------------------->
+<div v-if="isExternalConverter">
+    <div class="part-header">PDF</div>
+
+    <div class="item row">
+        <div class="label-7">Формат</div>
+        <div class="col row">
+            <q-checkbox v-model="pdfAsText" size="xs" label="Извлекать текст из PDF">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Пытается извлечь текст из pdf-файла и переразбить на параграфы.<br>
+                    Размер получаемого fb2-файла при этом относительно небольшой.<br>
+                    При отключении этой опции, pdf будет представлен как набор<br>
+                    изображений (аналогично ковертированию djvu).
+                </q-tooltip>
+            </q-checkbox>
+        </div>
+    </div>
+
+    <div class="item row">
+        <div class="label-7">Качество</div>
+        <div class="col row">
+            <NumInput class="col-5" v-model="pdfQuality" :min="10" :max="100" :disable="pdfAsText" >
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Качество конвертирования Pdf в Fb2. Чем значение выше, тем больше<br>
+                    размер итогового файла. Если сервер отказывается конвертировать<br>
+                    слишком большой файл, то попробуйте понизить качество.
+                </q-tooltip>
+            </NumInput>
+        </div>
+    </div>
+</div>
+
+<!---------------------------------------------->
+<div v-if="isExternalConverter">
+    <div class="part-header">DJVU</div>
+
+    <div class="item row">
+        <div class="label-7">Качество</div>
+        <div class="col row">
+            <NumInput class="col-5" v-model="djvuQuality" :min="10" :max="100">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Качество конвертирования Djvu в Fb2. Чем значение выше, тем больше<br>
+                    размер итогового файла. Если сервер отказывается конвертировать<br>
+                    слишком большой файл, то попробуйте понизить качество.
+                </q-tooltip>
+            </NumInput>
+        </div>
+    </div>
+</div>

client/components/Reader/SettingsPage/ConvertTab/ConvertTab.vue

@@ -1,145 +0,0 @@
-<template>
-    <div class="fit sets-tab-panel">
-        <!---------------------------------------------->
-        <div class="q-mt-sm column items-center">
-            <span>Настройки конвертирования применяются ко всем</span>
-            <span>вновь загружаемым или обновляемым файлам</span>
-        </div>
-
-        <!---------------------------------------------->
-        <div class="sets-part-header">
-            HTML, XML, TXT
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Текст
-            </div>
-            <div class="col row">
-                <q-checkbox v-model="form.splitToPara" size="xs" label="Попытаться разбить текст на параграфы">
-                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                        Опция принудительно включает эвристику разбиения текста на<br>
-                        параграфы в случае, если формат файла определен как html,<br>
-                        xml или txt. Возможна нечитабельная разметка текста.
-                    </q-tooltip>
-                </q-checkbox>
-            </div>
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Сайты
-            </div>
-            <div class="col row">
-                <q-checkbox v-model="form.enableSitesFilter" size="xs" label="Включить html-фильтр для сайтов">
-                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                        Html-фильтр вырезает лишние элементы со<br>
-                        страницы для определенных сайтов, таких как:<br>
-                        samlib.ru<br>
-                        www.fanfiction.net<br>
-                        archiveofourown.org<br>
-                        и других
-                    </q-tooltip>
-                </q-checkbox>
-            </div>
-        </div>
-
-        <!---------------------------------------------->
-        <div v-if="isExternalConverter">
-            <div class="sets-part-header">
-                PDF
-            </div>
-
-            <div class="sets-item row">
-                <div class="sets-label label">
-                    Формат
-                </div>
-                <div class="col row">
-                    <q-checkbox v-model="form.pdfAsText" size="xs" label="Извлекать текст из PDF">
-                        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                            Пытается извлечь текст из pdf-файла и переразбить на параграфы.<br>
-                            Размер получаемого fb2-файла при этом относительно небольшой.<br>
-                            При отключении этой опции, pdf будет представлен как набор<br>
-                            изображений (аналогично ковертированию djvu).
-                        </q-tooltip>
-                    </q-checkbox>
-                </div>
-            </div>
-
-            <div v-if="!form.pdfAsText" class="sets-item row">
-                <div class="sets-label label">
-                    Качество
-                </div>
-                <div class="col row">
-                    <NumInput v-model="form.pdfQuality" bg-color="input" class="col-5" :min="10" :max="100">
-                        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                            Качество конвертирования Pdf в Fb2. Чем значение выше, тем больше<br>
-                            размер итогового файла. Если сервер отказывается конвертировать<br>
-                            слишком большой файл, то попробуйте понизить качество.
-                        </q-tooltip>
-                    </NumInput>
-                </div>
-            </div>
-        </div>
-
-        <!---------------------------------------------->
-        <div v-if="isExternalConverter">
-            <div class="sets-part-header">
-                DJVU
-            </div>
-
-            <div class="sets-item row">
-                <div class="sets-label label">
-                    Качество
-                </div>
-                <div class="col row">
-                    <NumInput v-model="form.djvuQuality" bg-color="input" class="col-5" :min="10" :max="100">
-                        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                            Качество конвертирования Djvu в Fb2. Чем значение выше, тем больше<br>
-                            размер итогового файла. Если сервер отказывается конвертировать<br>
-                            слишком большой файл, то попробуйте понизить качество.
-                        </q-tooltip>
-                    </NumInput>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import vueComponent from '../../../vueComponent.js';
-import NumInput from '../../../share/NumInput.vue';
-
-const componentOptions = {
-    components: {
-        NumInput
-    },
-};
-class ConvertTab {
-    _options = componentOptions;
-    _props = {
-        form: Object,
-    };
-
-    created() {
-    }
-
-    mounted() {
-    }
-
-    get isExternalConverter() {
-        return this.$store.state.config.useExternalBookConverter;
-    }
-}
-
-export default vueComponent(ConvertTab);
-//-----------------------------------------------------------------------------
-</script>
-
-<style scoped>
-.label {
-    width: 75px;
-}
-
-</style>

client/components/Reader/SettingsPage/KeysTab.inc

@@ -0,0 +1,33 @@
+<div class="bg-grey-3 row">
+    <q-tabs
+        v-model="selectedKeysTab"
+        active-color="black"
+        active-bg-color="white"
+        indicator-color="white"
+        dense
+        no-caps
+        class="no-mp bg-grey-4 text-grey-7"
+    >
+        <q-tab name="mouse" label="Мышь/тачскрин" />
+        <q-tab name="keyboard" label="Клавиатура" />
+    </q-tabs>
+</div>
+
+<div class="q-mb-sm"/>
+
+<div class="col tab-panel">
+    <div v-if="selectedKeysTab == 'mouse'">
+        <div class="item row">
+            <div class="label-4"></div>
+            <div class="col row">
+                <q-checkbox size="xs" v-model="clickControl" label="Включить управление кликом" />
+            </div>
+        </div>
+    </div>
+
+    <div v-if="selectedKeysTab == 'keyboard'">
+        <div class="item row">
+            <UserHotKeys v-model="userHotKeys" />
+        </div>
+    </div>
+</div>

client/components/Reader/SettingsPage/KeysTab/KeysTab.vue

@@ -1,78 +0,0 @@
-<template>
-    <div class="fit column">
-        <div class="bg-menu-1 row">
-            <q-tabs
-                v-model="selectedTab"
-                active-color="app"
-                active-bg-color="app"
-                indicator-color="bg-app"
-                dense
-                no-caps
-                class="bg-menu-2 text-menu"
-            >
-                <q-tab name="mouse" label="Мышь/тачскрин" />
-                <q-tab name="keyboard" label="Клавиатура" />
-            </q-tabs>
-        </div>
-
-        <div class="q-mb-sm" />
-
-        <div class="col sets-tab-panel">
-            <div v-if="selectedTab == 'mouse'">
-                <div class="sets-item row">
-                    <div class="sets-label label"></div>
-                    <div class="col row">
-                        <q-checkbox v-model="form.clickControl" size="xs" label="Включить управление кликом" />
-                    </div>
-                </div>
-            </div>
-
-            <div v-if="selectedTab == 'keyboard'">
-                <div class="sets-item row">
-                    <UserHotKeys v-model="form.userHotKeys" />
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import vueComponent from '../../../vueComponent.js';
-
-import UserHotKeys from './UserHotKeys/UserHotKeys.vue';
-
-const componentOptions = {
-    components: {
-        UserHotKeys,
-    },
-};
-class KeysTab {
-    _options = componentOptions;
-    _props = {
-        form: Object,
-    };
-
-    selectedTab = 'mouse';
-
-    created() {
-    }
-
-    mounted() {
-    }
-
-    get mode() {
-        return this.$store.state.config.mode;
-    }
-}
-
-export default vueComponent(KeysTab);
-//-----------------------------------------------------------------------------
-</script>
-
-<style scoped>
-.label {
-    width: 110px;
-}
-
-</style>

client/components/Reader/SettingsPage/OthersTab.inc

@@ -0,0 +1,102 @@
+<!---------------------------------------------->
+<div class="part-header">Подсказки, уведомления</div>
+
+<div class="item row no-wrap">
+    <div class="label-6">Подсказка</div>
+    <q-checkbox size="xs" v-model="showClickMapPage" label="Показывать области управления кликом" :disable="!clickControl" >
+        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+            Показывать или нет подсказку при каждой загрузке книги
+        </q-tooltip>
+    </q-checkbox>
+</div>
+
+<div class="item row">
+    <div class="label-6">Подсказка</div>
+    <q-checkbox size="xs" v-model="blinkCachedLoad" label="Предупреждать о загрузке из кэша">
+        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+            Мерцать сообщением в строке статуса и на кнопке<br>
+            обновления при загрузке книги из кэша
+        </q-tooltip>
+    </q-checkbox>
+</div>
+
+<div class="item row no-wrap">
+    <div class="label-6">Уведомление</div>
+    <q-checkbox size="xs" v-model="showServerStorageMessages" label="Показывать сообщения синхронизации">
+        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+            Показывать уведомления и ошибки от<br>
+            синхронизатора данных с сервером
+        </q-tooltip>
+    </q-checkbox>
+</div>
+
+<div class="item row">
+    <div class="label-6">Уведомление</div>
+    <q-checkbox size="xs" v-model="showWhatsNewDialog">
+        Показывать уведомление "Что нового"
+        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+            Показывать уведомления "Что нового"<br>
+            при появлении новой версии читалки
+        </q-tooltip>
+    </q-checkbox>
+</div>
+
+<div class="item row">
+    <div class="label-6">Уведомление</div>
+    <q-checkbox size="xs" v-model="showNeedUpdateNotify">
+        Показывать уведомление о новой версии
+        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+            Напоминать о необходимости обновления страницы<br>
+            при появлении новой версии читалки
+        </q-tooltip>
+    </q-checkbox>
+</div>
+
+<!--div class="item row">
+    <div class="label-6">Уведомление</div>
+    <q-checkbox size="xs" v-model="showDonationDialog2020">
+        Показывать "Оплатим хостинг вместе"
+        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+            Показывать уведомление "Оплатим хостинг вместе"
+        </q-tooltip>
+    </q-checkbox>
+</div-->
+
+<!---------------------------------------------->
+<div class="part-header">Другое</div>
+
+<div class="item row">
+    <div class="label-6">Обработка</div>
+    <q-checkbox size="xs" v-model="lazyParseEnabled" label="Предварительная подготовка текста">
+        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+            Включение этой опции позволяет делать предварительную<br>
+            подготовку всего текста в ленивом режиме сразу после<br>
+            загрузки книги. Это может повысить отзывчивость читалки,<br>
+            но нагружает процессор каждый раз при открытии книги.
+        </q-tooltip>
+    </q-checkbox>
+</div>
+
+<div class="item row">
+    <div class="label-6">Парам. в URL</div>
+    <q-checkbox size="xs" v-model="allowUrlParamBookPos">
+        Добавлять параметр "__p"
+        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+            Добавление параметра "__p" в строке браузера<br>
+            позволяет передавать ссылку на книгу в читалке<br>
+            без потери текущей позиции. Однако в этом случае<br>
+            при листании забивается история браузера, т.к. на<br>
+            каждое изменение позиции происходит смена URL.
+        </q-tooltip>
+    </q-checkbox>
+</div>
+
+<div class="item row">
+    <div class="label-6">Копирование</div>
+    <q-checkbox size="xs" v-model="copyFullText" label="Загружать весь текст">
+        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+            Загружать весь текст в окно<br>
+            копирования текста со страницы
+        </q-tooltip>
+    </q-checkbox>
+</div>

client/components/Reader/SettingsPage/OthersTab/OthersTab.vue

@@ -1,134 +0,0 @@
-<template>
-    <div class="fit sets-tab-panel">
-        <!---------------------------------------------->
-        <div class="sets-part-header">
-            Подсказки, уведомления
-        </div>
-
-        <div class="sets-item row no-wrap">
-            <div class="sets-label label">
-                Подсказка
-            </div>
-            <q-checkbox v-model="form.showClickMapPage" size="xs" label="Показывать области управления кликом" :disable="!form.clickControl">
-                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                    Показывать или нет подсказку при каждой загрузке книги
-                </q-tooltip>
-            </q-checkbox>
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Подсказка
-            </div>
-            <q-checkbox v-model="form.blinkCachedLoad" size="xs" label="Предупреждать о загрузке из кэша">
-                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                    Мерцать сообщением в строке статуса и на кнопке<br>
-                    обновления при загрузке книги из кэша
-                </q-tooltip>
-            </q-checkbox>
-        </div>
-
-        <div class="sets-item row no-wrap">
-            <div class="sets-label label">
-                Уведомление
-            </div>
-            <q-checkbox v-model="form.showServerStorageMessages" size="xs" label="Показывать сообщения синхронизации">
-                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                    Показывать уведомления и ошибки от<br>
-                    синхронизатора данных с сервером
-                </q-tooltip>
-            </q-checkbox>
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Уведомление
-            </div>
-            <q-checkbox v-model="form.showWhatsNewDialog" size="xs">
-                Показывать уведомление "Что нового"
-                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                    Показывать уведомления "Что нового"<br>
-                    при появлении новой версии читалки
-                </q-tooltip>
-            </q-checkbox>
-        </div>
-
-        <!--div class="sets-item row">
-            <div class="sets-label label">
-                Уведомление
-            </div>
-            <q-checkbox v-model="form.showDonationDialog" size="xs">
-                Показывать форму доната
-                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                    Показывать диалог для сбора пожертвований
-                </q-tooltip>
-            </q-checkbox>
-        </div-->
-
-        <!---------------------------------------------->
-        <div class="sets-part-header">
-            Другое
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Парам. в URL
-            </div>
-            <q-checkbox v-model="form.allowUrlParamBookPos" size="xs">
-                Добавлять параметр "__p"
-                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                    Добавление параметра "__p" в строке браузера<br>
-                    позволяет передавать ссылку на книгу в читалке<br>
-                    без потери текущей позиции. Однако в этом случае<br>
-                    при листании забивается история браузера, т.к. на<br>
-                    каждое изменение позиции происходит смена URL.
-                </q-tooltip>
-            </q-checkbox>
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Копирование
-            </div>
-            <q-checkbox v-model="form.copyFullText" size="xs" label="Загружать весь текст">
-                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                    Загружать весь текст в окно<br>
-                    копирования текста со страницы
-                </q-tooltip>
-            </q-checkbox>
-        </div>
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import vueComponent from '../../../vueComponent.js';
-
-const componentOptions = {
-    components: {
-    },
-};
-class OthersTab {
-    _options = componentOptions;
-    _props = {
-        form: Object,
-    };
-
-    created() {
-    }
-
-    mounted() {
-    }
-
-}
-
-export default vueComponent(OthersTab);
-//-----------------------------------------------------------------------------
-</script>
-
-<style scoped>
-.label {
-    width: 100px;
-}
-
-</style>

client/components/Reader/SettingsPage/PageMoveTab.inc

@@ -0,0 +1,28 @@
+<!---------------------------------------------->
+<div class="part-header">Анимация</div>
+
+<div class="item row">
+    <div class="label-5">Тип</div>
+    <q-select class="col-left" v-model="pageChangeAnimation" :options="pageChangeAnimationOptions"
+        dropdown-icon="la la-angle-down la-sm"
+        outlined dense emit-value map-options
+    />
+</div>
+
+<div class="item row">
+    <div class="label-5">Скорость</div>
+    <NumInput class="col-left" v-model="pageChangeAnimationSpeed" :min="0" :max="100" :disable="pageChangeAnimation == ''"/>
+</div>
+
+<!---------------------------------------------->
+<div class="part-header">Другое</div>
+
+<div class="item row">
+    <div class="label-5">Страница</div>
+    <q-checkbox v-model="keepLastToFirst" size="xs" label="Переносить последнюю строку">
+        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+            Переносить последнюю строку страницы<br>
+            в начало следующей при листании
+        </q-tooltip>
+    </q-checkbox>
+</div>

client/components/Reader/SettingsPage/PageMoveTab/PageMoveTab.vue

@@ -1,96 +0,0 @@
-<template>
-    <div class="fit sets-tab-panel">
-        <!---------------------------------------------->
-        <div class="sets-part-header">
-            Анимация
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Тип
-            </div>
-            <q-select
-                v-model="form.pageChangeAnimation" bg-color="input" class="col-left" :options="pageChangeAnimationOptions"
-                dropdown-icon="la la-angle-down la-sm"
-                outlined dense emit-value map-options
-            />
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Скорость
-            </div>
-            <NumInput v-model="form.pageChangeAnimationSpeed" bg-color="input" class="col-left" :min="0" :max="100" :disable="form.pageChangeAnimation == ''" />
-        </div>
-
-        <!---------------------------------------------->
-        <div class="sets-part-header">
-            Другое
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Страница
-            </div>
-            <q-checkbox v-model="form.keepLastToFirst" size="xs" label="Переносить последнюю строку">
-                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                    Переносить последнюю строку страницы<br>
-                    в начало следующей при листании
-                </q-tooltip>
-            </q-checkbox>
-        </div>
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import vueComponent from '../../../vueComponent.js';
-import NumInput from '../../../share/NumInput.vue';
-
-const componentOptions = {
-    components: {
-        NumInput,
-    },
-};
-class PageMoveTab {
-    _options = componentOptions;
-    _props = {
-        form: Object,
-    };
-
-    created() {
-    }
-
-    mounted() {
-    }
-
-    get pageChangeAnimationOptions() {
-        let result = [
-            {label: 'Нет', value: ''},
-            {label: 'Вверх-вниз', value: 'downShift'},
-            (!this.form.dualPageMode ? {label: 'Вправо-влево', value: 'rightShift'} : null),
-            {label: 'Протаивание', value: 'thaw'},
-            {label: 'Мерцание', value: 'blink'},
-            {label: 'Вращение', value: 'rotate'},
-            (this.form.wallpaper == '' && !this.form.dualPageMode ? {label: 'Листание', value: 'flip'} : null),
-        ];        
-
-        result = result.filter(v => v);
-
-        return result;
-    }
-}
-
-export default vueComponent(PageMoveTab);
-//-----------------------------------------------------------------------------
-</script>
-
-<style scoped>
-.label {
-    width: 110px;
-}
-
-.col-left {
-    width: 150px;
-}
-</style>

client/components/Reader/SettingsPage/ProfilesTab.inc

@@ -0,0 +1,101 @@
+<div class="part-header">Управление синхронизацией данных</div>
+
+<div class="item row">
+    <div class="label-1"></div>
+    <q-checkbox class="col" v-model="serverSyncEnabled" size="xs" label="Включить синхронизацию с сервером" />
+</div>
+
+<div v-show="serverSyncEnabled">
+    <!---------------------------------------------->
+    <div class="part-header">Профили устройств</div>
+
+    <div class="item row">
+        <div class="label-1"></div>
+        <div class="text col">
+            Выберите или добавьте профиль устройства, чтобы начать синхронизацию настроек с сервером.
+            <br>При выборе "Нет" синхронизация настроек (но не книг) отключается.
+        </div>
+    </div>
+     <div class="item row">
+        <div class="label-1">Устройство</div>
+        <div class="col">
+            <q-select v-model="currentProfile" :options="currentProfileOptions"
+                style="width: 275px"
+                dropdown-icon="la la-angle-down la-sm"
+                outlined dense emit-value map-options display-value-sanitize options-sanitize
+            />
+        </div>
+    </div>
+    <div class="item row">
+        <div class="label-1"></div>
+        <q-btn class="button" dense no-caps @click="addProfile">Добавить</q-btn>
+        <q-btn class="button" dense no-caps @click="delProfile">Удалить</q-btn>
+        <q-btn class="button" dense no-caps @click="delAllProfiles">Удалить все</q-btn>
+    </div>
+
+    <!---------------------------------------------->
+    <div class="part-header">Ключ доступа</div>
+    
+    <div class="item row">
+        <div class="label-1"></div>
+        <div class="text col">
+            Ключ доступа позволяет восстановить профили с настройками и список читаемых книг.
+            Для этого необходимо передать ключ на новое устройство через почту, мессенджер или другим способом.
+        </div>
+    </div>
+
+    <div class="item row">
+        <div class="label-1"></div>
+        <q-btn class="button" style="width: 250px" dense no-caps @click="showServerStorageKey">
+                <span v-show="serverStorageKeyVisible">Скрыть</span>
+                <span v-show="!serverStorageKeyVisible">Показать</span>
+                &nbsp;ключ доступа
+         </q-btn>
+    </div>
+
+    <div class="item row">
+        <div class="label-1"></div>
+        <div v-if="!serverStorageKeyVisible" class="col">
+            <hr/>
+            <b>{{ partialStorageKey }}</b> (часть вашего ключа)
+            <hr/>
+        </div>
+        <div v-else class="col" style="line-height: 100%">
+            <hr/>
+            <div style="width: 300px; padding-top: 5px; overflow-wrap: break-word;">
+                <b>{{ serverStorageKey }}</b>
+                <q-icon class="copy-icon" name="la la-copy" @click="copyToClip(serverStorageKey, 'Ключ')">
+                    <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
+                </q-icon>            
+            </div>
+            <div v-if="mode == 'omnireader' || mode == 'liberama.top'">
+                <br>Переход по ссылке позволит автоматически ввести ключ доступа:
+                <br><div class="text-center" style="margin-top: 5px">
+                    <a :href="setStorageKeyLink" target="_blank">Ссылка для ввода ключа</a>
+                    <q-icon class="copy-icon" name="la la-copy" @click="copyToClip(setStorageKeyLink, 'Ссылка')">
+                        <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
+                    </q-icon>            
+                </div>
+            </div>
+            <hr/>
+        </div>
+    </div>
+
+    <div class="item row">
+        <div class="label-1"></div>
+        <q-btn class="button" style="width: 250px" dense no-caps @click="enterServerStorageKey">Ввести ключ доступа</q-btn>
+    </div>
+    <div class="item row">
+        <div class="label-1"></div>
+        <q-btn class="button" style="width: 250px" dense no-caps @click="generateServerStorageKey">Сгенерировать новый ключ</q-btn>
+    </div>
+    <div class="item row">
+        <div class="label-1"></div>
+        <div class="text col">
+            Рекомендуется сохранить ключ в надежном месте, чтобы всегда иметь возможность восстановить настройки,
+            например, после переустановки ОС или чистки/смены браузера.<br>
+            <b>ПРЕДУПРЕЖДЕНИЕ!</b> При утере ключа, НИКТО не сможет восстановить ваши данные, т.к. они сжимаются
+            и шифруются ключом доступа перед отправкой на сервер.
+        </div>
+    </div>
+</div>

client/components/Reader/SettingsPage/ProfilesTab/ProfilesTab.vue

@@ -1,363 +0,0 @@
-<template>
-    <div class="fit sets-tab-panel">
-        <div class="sets-part-header">
-            Управление синхронизацией данных
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label"></div>
-            <q-checkbox v-model="serverSyncEnabled" class="col" size="xs" label="Включить синхронизацию с сервером" />
-        </div>
-
-        <div v-show="serverSyncEnabled">
-            <!---------------------------------------------->
-            <div class="sets-part-header">
-                Профили устройств
-            </div>
-
-            <div class="sets-item row">
-                <div class="sets-label label"></div>
-                <div class="text col">
-                    Выберите или добавьте профиль устройства, чтобы начать синхронизацию настроек с сервером.
-                    <br>При выборе "Нет" синхронизация настроек (но не книг) отключается.
-                </div>
-            </div>
-            <div class="sets-item row">
-                <div class="sets-label label">
-                    Устройство
-                </div>
-                <div class="col">
-                    <q-select
-                        v-model="currentProfile" :options="currentProfileOptions"
-                        style="width: 275px"
-                        bg-color="input"
-                        dropdown-icon="la la-angle-down la-sm"
-                        outlined dense emit-value map-options display-value-sanitize options-sanitize
-                    />
-                </div>
-            </div>
-            <div class="sets-item row">
-                <div class="sets-label label"></div>
-                <q-btn class="sets-button" color="btn2" text-color="app" dense no-caps @click="addProfile">
-                    Добавить
-                </q-btn>
-                <q-btn class="sets-button" color="btn2" text-color="app" dense no-caps @click="delProfile">
-                    Удалить
-                </q-btn>
-                <q-btn class="sets-button" color="btn2" text-color="app" dense no-caps @click="delAllProfiles">
-                    Удалить все
-                </q-btn>
-            </div>
-
-            <!---------------------------------------------->
-            <div class="sets-part-header">
-                Ключ доступа
-            </div>
-            
-            <div class="sets-item row">
-                <div class="sets-label label"></div>
-                <div class="text col">
-                    Ключ доступа позволяет восстановить профили с настройками и список читаемых книг.
-                    Для этого необходимо передать ключ на новое устройство через почту, мессенджер или другим способом.
-                </div>
-            </div>
-
-            <div class="sets-item row">
-                <div class="sets-label label"></div>
-                <q-btn class="sets-button" color="btn2" text-color="app" style="width: 250px" dense no-caps @click="showServerStorageKey">
-                    <span v-show="serverStorageKeyVisible">Скрыть</span>
-                    <span v-show="!serverStorageKeyVisible">Показать</span>
-                    &nbsp;ключ доступа
-                </q-btn>
-            </div>
-
-            <div class="sets-item row">
-                <div class="sets-label label"></div>
-                <div v-if="!serverStorageKeyVisible" class="col">
-                    <hr />
-                    <b>{{ partialStorageKey }}</b> (часть вашего ключа)
-                    <hr />
-                </div>
-                <div v-else class="col" style="line-height: 100%">
-                    <hr />
-                    <div style="width: 300px; padding-top: 5px; overflow-wrap: break-word;">
-                        <b>{{ serverStorageKey }}</b>
-                        <q-icon class="copy-icon" name="la la-copy" @click="copyToClip(serverStorageKey, 'Ключ')">
-                            <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
-                                Скопировать
-                            </q-tooltip>                    
-                        </q-icon>            
-                    </div>
-                    <div v-if="mode == 'omnireader' || mode == 'liberama'">
-                        <br>Переход по ссылке позволит автоматически ввести ключ доступа:
-                        <br><div class="text-center" style="margin-top: 5px">
-                            <a :href="setStorageKeyLink" target="_blank">Ссылка для ввода ключа</a>
-                            <q-icon class="copy-icon" name="la la-copy" @click="copyToClip(setStorageKeyLink, 'Ссылка')">
-                                <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">
-                                    Скопировать
-                                </q-tooltip>                    
-                            </q-icon>            
-                        </div>
-                    </div>
-                    <hr />
-                </div>
-            </div>
-
-            <div class="sets-item row">
-                <div class="sets-label label"></div>
-                <q-btn class="sets-button" color="btn2" text-color="app" style="width: 250px" dense no-caps @click="enterServerStorageKey">
-                    Ввести ключ доступа
-                </q-btn>
-            </div>
-            <div class="sets-item row">
-                <div class="sets-label label"></div>
-                <q-btn class="sets-button" color="btn2" text-color="app" style="width: 250px" dense no-caps @click="generateServerStorageKey">
-                    Сгенерировать новый ключ
-                </q-btn>
-            </div>
-            <div class="sets-item row">
-                <div class="sets-label label"></div>
-                <div class="text col">
-                    Рекомендуется сохранить ключ в надежном месте, чтобы всегда иметь возможность восстановить настройки,
-                    например, после переустановки ОС или чистки/смены браузера.<br>
-                    <b>ПРЕДУПРЕЖДЕНИЕ!</b> При утере ключа, НИКТО не сможет восстановить ваши данные, т.к. они сжимаются
-                    и шифруются ключом доступа перед отправкой на сервер.
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import vueComponent from '../../../vueComponent.js';
-
-import _ from 'lodash';
-
-import * as utils from '../../../../share/utils';
-import rstore from '../../../../store/modules/reader';
-
-const componentOptions = {
-    watch: {
-    },
-};
-class ProfilesTab {
-    _options = componentOptions;
-    _props = {
-        form: Object,
-    };
-
-    rstore = rstore;
-
-    serverStorageKeyVisible = false;
-
-    created() {
-        this.commit = this.$store.commit;
-    }
-
-    mounted() {
-    }
-
-    get mode() {
-        return this.$store.state.config.mode;
-    }
-
-    get serverSyncEnabled() {
-        return this.$store.state.reader.serverSyncEnabled;
-    }
-
-    set serverSyncEnabled(newValue) {
-        this.commit('reader/setServerSyncEnabled', newValue);
-    }
-
-    get currentProfile() {
-        return this.$store.state.reader.currentProfile;
-    }
-
-    set currentProfile(newValue) {
-        this.commit('reader/setCurrentProfile', newValue);
-    }
-
-    get profiles() {
-        return this.$store.state.reader.profiles;
-    }
-
-    get currentProfileOptions() {
-        const profNames = Object.keys(this.profiles)
-        profNames.sort();
-
-        let result = [{label: 'Нет', value: ''}];
-        profNames.forEach(name => {
-            result.push({label: name, value: name});
-        });
-        return result;
-    }
-
-    get partialStorageKey() {
-        return this.serverStorageKey.substr(0, 7) + '***';
-    }
-
-    get serverStorageKey() {
-        return this.$store.state.reader.serverStorageKey;
-    }
-
-    get setStorageKeyLink() {
-        return `https://${window.location.host}/#/reader?setStorageAccessKey=${utils.toBase58(this.serverStorageKey)}`;
-    }
-
-    async addProfile() {
-        try {
-            if (Object.keys(this.profiles).length >= 100) {
-                this.$root.stdDialog.alert('Достигнут предел количества профилей', 'Ошибка');
-                return;
-            }
-            const result = await this.$root.stdDialog.prompt('Введите произвольное название для профиля устройства:', ' ', {
-                inputValidator: (str) => { if (!str) return 'Название не должно быть пустым'; else if (str.length > 50) return 'Слишком длинное название'; else return true; },
-            });
-            if (result && result.value) {
-                if (this.profiles[result.value]) {
-                    this.$root.stdDialog.alert('Такой профиль уже существует', 'Ошибка');
-                } else {
-                    const newProfiles = Object.assign({}, this.profiles, {[result.value]: 1});
-                    this.commit('reader/setAllowProfilesSave', true);
-                    await this.$nextTick();//ждем обработчики watch
-                    this.commit('reader/setProfiles', newProfiles);
-                    await this.$nextTick();//ждем обработчики watch
-                    this.commit('reader/setAllowProfilesSave', false);
-                    this.currentProfile = result.value;
-                }
-            }
-        } catch (e) {
-            //
-        }
-    }
-
-    async delProfile() {
-        if (!this.currentProfile)
-            return;
-
-        try {
-            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Удаление профиля '${this.$root.sanitize(this.currentProfile)}' необратимо.` +
-                    `<br>Все настройки профиля будут потеряны, однако список читаемых книг сохранится.` +
-                    `<br><br>Введите 'да' для подтверждения удаления:`, ' ', {
-                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
-            });
-
-            if (result && result.value && result.value.toLowerCase() == 'да') {
-                if (this.profiles[this.currentProfile]) {
-                    const newProfiles = Object.assign({}, this.profiles);
-                    delete newProfiles[this.currentProfile];
-                    this.commit('reader/setAllowProfilesSave', true);
-                    await this.$nextTick();//ждем обработчики watch
-                    this.commit('reader/setProfiles', newProfiles);
-                    await this.$nextTick();//ждем обработчики watch
-                    this.commit('reader/setAllowProfilesSave', false);
-                    this.currentProfile = '';
-                }
-            }
-        } catch (e) {
-            //
-        }
-    }
-
-    async delAllProfiles() {
-        if (!Object.keys(this.profiles).length)
-            return;
-
-        try {
-            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Удаление ВСЕХ профилей с настройками необратимо.` +
-                    `<br><br>Введите 'да' для подтверждения удаления:`, ' ', {
-                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
-            });
-
-            if (result && result.value && result.value.toLowerCase() == 'да') {
-                this.commit('reader/setAllowProfilesSave', true);
-                await this.$nextTick();//ждем обработчики watch
-                this.commit('reader/setProfiles', {});
-                await this.$nextTick();//ждем обработчики watch
-                this.commit('reader/setAllowProfilesSave', false);
-                this.currentProfile = '';
-            }
-        } catch (e) {
-            //
-        }
-    }
-
-    async showServerStorageKey() {
-        this.serverStorageKeyVisible = !this.serverStorageKeyVisible;
-    }
-
-    async enterServerStorageKey(key) {
-        try {
-            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Изменение ключа доступа приведет к замене всех профилей и читаемых книг в читалке.` +
-                    `<br><br>Введите новый ключ доступа:`, ' ', {
-                inputValidator: (str) => {
-                    try {
-                        if (str && utils.fromBase58(str).length == 32) {
-                            return true;
-                        }
-                    } catch (e) {
-                        //
-                    }
-                    return 'Неверный формат ключа'; 
-                },
-                inputValue: (key && _.isString(key) ? key : null),
-            });
-
-            if (result && result.value && utils.fromBase58(result.value).length == 32) {
-                this.commit('reader/setServerStorageKey', result.value);
-            }
-        } catch (e) {
-            //
-        }
-    }
-
-    async generateServerStorageKey() {
-        try {
-            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Генерация нового ключа доступа приведет к удалению всех профилей и читаемых книг в читалке.` +
-                    `<br><br>Введите 'да' для подтверждения генерации нового ключа:`, ' ', {
-                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Генерация не подтверждена'; },
-            });
-
-            if (result && result.value && result.value.toLowerCase() == 'да') {
-                if (this.$root.generateNewServerStorageKey)
-                    this.$root.generateNewServerStorageKey();
-            }
-        } catch (e) {
-            //
-        }
-
-    }
-
-    async copyToClip(text, prefix) {
-        const result = await utils.copyTextToClipboard(text);
-        const suf = (prefix.substr(-1) == 'а' ? 'а' : '');
-        const msg = (result ? `${prefix} успешно скопирован${suf} в буфер обмена` : 'Копирование не удалось');
-        if (result)
-            this.$root.notify.success(msg);
-        else
-            this.$root.notify.error(msg);
-    }
-}
-
-export default vueComponent(ProfilesTab);
-//-----------------------------------------------------------------------------
-</script>
-
-<style scoped>
-.label {
-    width: 75px;
-}
-
-.text {
-    font-size: 90%;
-    line-height: 130%;
-}
-
-.copy-icon {
-    margin-left: 5px;
-    cursor: pointer;
-    font-size: 120%;
-    color: var(--text-anchor-color);
-}
-</style>

client/components/Reader/SettingsPage/ResetTab.inc

@@ -0,0 +1,3 @@
+<div class="item row">
+    <q-btn class="col q-ma-sm" dense no-caps @click="setDefaults">Установить по умолчанию</q-btn>
+</div>

client/components/Reader/SettingsPage/ResetTab/ResetTab.vue

@@ -1,41 +0,0 @@
-<template>
-    <div class="fit sets-tab-panel">
-        <div class="sets-item row">
-            <q-btn class="col q-ma-sm" color="btn2" text-color="app" dense no-caps @click="setDefaults">
-                Установить по умолчанию
-            </q-btn>
-        </div>
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import vueComponent from '../../../vueComponent.js';
-
-const componentOptions = {
-    components: {
-    },
-};
-class ResetTab {
-    _options = componentOptions;
-    _props = {
-        form: Object,
-    };
-
-    created() {
-    }
-
-    mounted() {
-    }
-
-    setDefaults() {
-        this.$emit('tab-event', {action: 'set-defaults'});
-    }
-}
-
-export default vueComponent(ResetTab);
-//-----------------------------------------------------------------------------
-</script>
-
-<style scoped>
-</style>

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <Window ref="window" width="600px" @close="close">
+    <Window ref="window" height="95%" width="600px" @close="close">
         <template #header>
             Настройки
         </template>
@@ -9,47 +9,102 @@
                 <q-tabs
                     ref="tabs"
                     v-model="selectedTab"
-                    class="bg-menu-1 text-menu"
+                    class="bg-grey-3 text-black"
-                    style="max-width: 130px"
                     
                     left-icon="la la-caret-up"
                     right-icon="la la-caret-down"
                     active-color="white"
                     active-bg-color="primary"
-                    indicator-color="bg-app"
+                    indicator-color="black"
                     vertical
                     no-caps
                     stretch
                     inline-label
                 >
-                    <q-tab v-for="item in tabs" :key="item.name" class="tab row items-center" :name="item.name">
+                    <div v-show="tabsScrollable" class="q-pt-lg" />
-                        <q-icon :name="item.icon" :color="selectedTab == item.name ? 'yellow' : 'teal-7'" size="24px" />
+                    <q-tab class="tab" name="profiles" icon="la la-users" label="Профили" />
-                        <div class="q-ml-xs" style="font-size: 90%">
+                    <q-tab class="tab" name="view" icon="la la-eye" label="Вид" />
-                            {{ item.label }}
+                    <q-tab class="tab" name="buttons" icon="la la-grip-horizontal" label="Кнопки" />
-                        </div>
+                    <q-tab class="tab" name="keys" icon="la la-gamepad" label="Управление" />
-                    </q-tab>
+                    <q-tab class="tab" name="pagemove" icon="la la-school" label="Листание" />
+                    <q-tab class="tab" name="convert" icon="la la-magic" label="Конвертир." />
+                    <q-tab class="tab" name="others" icon="la la-list-ul" label="Прочее" />
+                    <q-tab class="tab" name="reset" icon="la la-broom" label="Сброс" />
+                    <div v-show="tabsScrollable" class="q-pt-lg" />
                 </q-tabs>
             </div>
 
             <div class="col fit">
                 <!-- Профили --------------------------------------------------------------------->
-                <ProfilesTab v-if="selectedTab == 'profiles'" :form="form" />
+                <div v-if="selectedTab == 'profiles'" class="fit tab-panel">
+                    @@include('./ProfilesTab.inc');
+                </div>
                 <!-- Вид ------------------------------------------------------------------------->                    
-                <ViewTab v-if="selectedTab == 'view'" :form="form" @tab-event="tabEvent" />
+                <div v-if="selectedTab == 'view'" class="fit column">
+                    <q-tabs
+                        v-model="selectedViewTab"
+                        active-color="black"
+                        active-bg-color="white"
+                        indicator-color="white"
+                        dense
+                        no-caps
+                        class="no-mp bg-grey-4 text-grey-7"
+                    >
+                        <q-tab name="mode" label="Режим" />
+                        <q-tab name="color" label="Цвет" />
+                        <q-tab name="font" label="Шрифт" />
+                        <q-tab name="text" label="Текст" />
+                        <q-tab name="status" label="Строка статуса" />
+                    </q-tabs>
+
+                    <div class="q-mb-sm" />
+
+                    <div class="col tab-panel">
+                        <div v-if="selectedViewTab == 'mode'">
+                            @@include('./ViewTab/Mode.inc');
+                        </div>
+
+                        <div v-if="selectedViewTab == 'color'">
+                            @@include('./ViewTab/Color.inc');
+                        </div>
+
+                        <div v-if="selectedViewTab == 'font'">
+                            @@include('./ViewTab/Font.inc');
+                        </div>
+
+                        <div v-if="selectedViewTab == 'text'">
+                            @@include('./ViewTab/Text.inc');
+                        </div>
+
+                        <div v-if="selectedViewTab == 'status'">
+                            @@include('./ViewTab/Status.inc');
+                        </div>
+                    </div>
+                </div>
                 <!-- Кнопки ---------------------------------------------------------------------->
-                <ToolBarTab v-if="selectedTab == 'toolbar'" :form="form" />
+                <div v-if="selectedTab == 'buttons'" class="fit tab-panel">
+                    @@include('./ButtonsTab.inc');
+                </div>
                 <!-- Управление ------------------------------------------------------------------>
-                <KeysTab v-if="selectedTab == 'keys'" :form="form" />
+                <div v-if="selectedTab == 'keys'" class="fit column">
+                    @@include('./KeysTab.inc');
+                </div>
                 <!-- Листание -------------------------------------------------------------------->
-                <PageMoveTab v-if="selectedTab == 'pagemove'" :form="form" />
+                <div v-if="selectedTab == 'pagemove'" class="fit tab-panel">
+                    @@include('./PageMoveTab.inc');
+                </div>
                 <!-- Конвертирование ------------------------------------------------------------->
-                <ConvertTab v-if="selectedTab == 'convert'" :form="form" />
+                <div v-if="selectedTab == 'convert'" class="fit tab-panel">
-                <!-- Обновление ------------------------------------------------------------------>
+                    @@include('./ConvertTab.inc');
-                <UpdateTab v-if="selectedTab == 'update'" :form="form" />
+                </div>
                 <!-- Прочее ---------------------------------------------------------------------->
-                <OthersTab v-if="selectedTab == 'others'" :form="form" />
+                <div v-if="selectedTab == 'others'" class="fit tab-panel">
-                <!-- Сброс ----------------------------------------------------------------------->                
+                    @@include('./OthersTab.inc');
-                <ResetTab v-if="selectedTab == 'reset'" :form="form" @tab-event="tabEvent" />
+                </div>
+                <!-- Сброс ----------------------------------------------------------------------->
+                <div v-if="selectedTab == 'reset'" class="fit tab-panel">
+                    @@include('./ResetTab.inc');
+                </div>
             </div>
         </div>
     </Window>
@@ -57,86 +112,151 @@
 
 <script>
 //-----------------------------------------------------------------------------
+import { ref, watch } from 'vue';
 import vueComponent from '../../vueComponent.js';
-import { reactive } from 'vue';
 
 import _ from 'lodash';
 
-//stuff
+import * as utils from '../../../share/utils';
+import * as cryptoUtils from '../../../share/cryptoUtils';
 import Window from '../../share/Window.vue';
+import NumInput from '../../share/NumInput.vue';
+import UserHotKeys from './UserHotKeys/UserHotKeys.vue';
+import wallpaperStorage from '../share/wallpaperStorage';
 
 import rstore from '../../../store/modules/reader';
+import defPalette from './defPalette';
 
-//pages
+const hex = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/;
-import ProfilesTab from './ProfilesTab/ProfilesTab.vue';
-import ViewTab from './ViewTab/ViewTab.vue';
-import ToolBarTab from './ToolBarTab/ToolBarTab.vue';
-import KeysTab from './KeysTab/KeysTab.vue';
-import PageMoveTab from './PageMoveTab/PageMoveTab.vue';
-import ConvertTab from './ConvertTab/ConvertTab.vue';
-import UpdateTab from './UpdateTab/UpdateTab.vue';
-import OthersTab from './OthersTab/OthersTab.vue';
-import ResetTab from './ResetTab/ResetTab.vue';
 
 const componentOptions = {
     components: {
         Window,
-        //pages
+        NumInput,
-        ProfilesTab,
+        UserHotKeys,
-        ViewTab,
+    },
-        ToolBarTab,
+    data: function() {
-        KeysTab,
+        return Object.assign({}, rstore.settingDefaults);
-        PageMoveTab,
-        ConvertTab,
-        UpdateTab,
-        OthersTab,
-        ResetTab,
     },
     watch: {
         settings: function() {
-            this.settingsChanged();//no await
+            this.settingsChanged();
         },
-        form: {
+        form: function(newValue) {
-            handler() {
+            if (this.inited) {
-                if (this.inited && !this.isSetsChanged) {
+                this.commit('reader/setSettings', _.cloneDeep(newValue));
-                    this.debouncedCommitSettings();
+            }
-                }
+        },
-            },
+        fontBold: function(newValue) {
-            deep: true,
+            this.fontWeight = (newValue ? 'bold' : '');
+        },
+        fontItalic: function(newValue) {
+            this.fontStyle = (newValue ? 'italic' : '');
+        },
+        vertShift: function(newValue) {
+            const font = (this.webFontName ? this.webFontName : this.fontName);
+            if (this.fontShifts[font] != newValue || this.fontVertShift != newValue) {
+                this.fontShifts = Object.assign({}, this.fontShifts, {[font]: newValue});
+                this.fontVertShift = newValue;
+            }
+        },
+        fontName: function(newValue) {
+            const font = (this.webFontName ? this.webFontName : newValue);
+            this.vertShift = this.fontShifts[font] || 0;
+        },
+        webFontName: function(newValue) {
+            const font = (newValue ? newValue : this.fontName);
+            this.vertShift = this.fontShifts[font] || 0;
+        },
+        wallpaper: function(newValue) {
+            if (newValue != '' && this.pageChangeAnimation == 'flip')
+                this.pageChangeAnimation = '';
+        },
+        dualPageMode(newValue) {
+            if (newValue && this.pageChangeAnimation == 'flip' || this.pageChangeAnimation == 'rightShift')
+                this.pageChangeAnimation = '';
+        },
+        textColor: function(newValue) {
+            this.textColorFiltered = newValue;
+        },
+        textColorFiltered: function(newValue) {
+            if (hex.test(newValue))
+                this.textColor = newValue;
+        },
+        backgroundColor: function(newValue) {
+            this.bgColorFiltered = newValue;
+        },
+        bgColorFiltered: function(newValue) {
+            if (hex.test(newValue))
+                this.backgroundColor = newValue;
+        },
+        dualDivColor(newValue) {
+            this.dualDivColorFiltered = newValue;
+        },
+        dualDivColorFiltered(newValue) {
+            if (hex.test(newValue))
+                this.dualDivColor = newValue;
+        },
+        statusBarColor(newValue) {
+            this.statusBarColorFiltered = newValue;
+        },
+        statusBarColorFiltered(newValue) {
+            if (hex.test(newValue))
+                this.statusBarColor = newValue;
         },
     },
 };
 class SettingsPage {
     _options = componentOptions;
 
-    form = {};
-
-    tabs = [
-        { name: 'profiles', icon: 'la la-users', label: 'Профили' },
-        { name: 'view', icon: 'la la-eye', label: 'Вид'},
-        { name: 'toolbar', icon: 'la la-grip-horizontal', label: 'Панель'},
-        { name: 'keys', icon: 'la la-gamepad', label: 'Управление'},
-        { name: 'pagemove', icon: 'la la-school', label: 'Листание'},
-        { name: 'convert', icon: 'la la-magic', label: 'Конвертир.'},
-        { name: 'update', icon: 'la la-retweet', label: 'Обновление'},
-        { name: 'others', icon: 'la la-list-ul', label: 'Прочее'},
-        { name: 'reset', icon: 'la la-broom', label: 'Сброс'},
-    ];
     selectedTab = 'profiles';
+    selectedViewTab = 'mode';
+    selectedKeysTab = 'mouse';
+    fontBold = false;
+    fontItalic = false;
+    vertShift = 0;
+    tabsScrollable = false;
+    textColorFiltered = '';
+    bgColorFiltered = '';
+    dualDivColorFiltered = '';
 
-    isSetsChanged = false;
+    webFonts = [];
+    fonts = [];
+
+    serverStorageKeyVisible = false;
+    toolButtons = [];
+    rstore = {};
+
+    setup() {
+        const settingsProps = { form: ref({}) };
+
+        for (let prop in rstore.settingDefaults) {
+            settingsProps[prop] = ref(_.cloneDeep(rstore.settingDefaults[prop]));
+            watch(settingsProps[prop], (newValue) => {
+                settingsProps.form.value = Object.assign({}, settingsProps.form.value, {[prop]: newValue});
+            }, {deep: true});
+        }
+
+        return settingsProps;
+    }
 
     created() {
         this.commit = this.$store.commit;
+        this.reader = this.$store.state.reader;
 
-        this.debouncedCommitSettings = _.debounce(() => {            
+        this.form = {};
-            this.commit('reader/setSettings', _.cloneDeep(this.form));
+        this.rstore = rstore;
-        }, 50);
+        this.toolButtons = rstore.toolButtons;
-
+        this.settingsChanged();
-        this.settingsChanged();//no await
     }
 
     mounted() {
+        this.$watch(
+            '$refs.tabs.scrollable',
+            (newValue) => {
+                this.tabsScrollable = newValue && !this.$root.isMobileDevice;
+            }
+        );
     }
 
     init() {
@@ -144,20 +264,190 @@ class SettingsPage {
         this.inited = true;
     }
 
-    async settingsChanged() {
+    settingsChanged() {
-        this.isSetsChanged = true;
+        if (_.isEqual(this.form, this.settings))
-        try {
+            return;
-            this.form = reactive(_.cloneDeep(this.settings));
+
-        } finally {
+        this.form = Object.assign({}, this.settings);
-            await this.$nextTick();
+        for (const prop in rstore.settingDefaults) {
-            this.isSetsChanged = false;
+            this[prop] = _.cloneDeep(this.form[prop]);
         }
+
+        this.fontBold = (this.fontWeight == 'bold');
+        this.fontItalic = (this.fontStyle == 'italic');
+
+        this.fonts = rstore.fonts;
+        this.webFonts = rstore.webFonts;
+        const font = (this.webFontName ? this.webFontName : this.fontName);
+        this.vertShift = this.fontShifts[font] || 0;
+        this.textColorFiltered = this.textColor;
+        this.bgColorFiltered = this.backgroundColor;
+        this.dualDivColorFiltered = this.dualDivColor;
+        this.statusBarColorFiltered = this.statusBarColor;
+    }
+
+    get mode() {
+        return this.$store.state.config.mode;
+    }
+
+    get isExternalConverter() {
+        return this.$store.state.config.useExternalBookConverter;
     }
 
     get settings() {
         return this.$store.state.reader.settings;
     }
 
+    get serverSyncEnabled() {
+        return this.$store.state.reader.serverSyncEnabled;
+    }
+
+    set serverSyncEnabled(newValue) {
+        this.commit('reader/setServerSyncEnabled', newValue);
+    }
+
+    get profiles() {
+        return this.$store.state.reader.profiles;
+    }
+
+    get currentProfileOptions() {
+        const profNames = Object.keys(this.profiles)
+        profNames.sort();
+
+        let result = [{label: 'Нет', value: ''}];
+        profNames.forEach(name => {
+            result.push({label: name, value: name});
+        });
+        return result;
+    }
+
+    get wallpaperOptions() {
+        let result = [{label: 'Нет', value: ''}];
+
+        const userWallpapers = _.cloneDeep(this.userWallpapers);
+        userWallpapers.sort((a, b) => a.label.localeCompare(b.label));
+
+        for (const wp of userWallpapers) {
+            if (wallpaperStorage.keyExists(wp.cssClass))
+                result.push({label: wp.label, value: wp.cssClass});
+        }
+
+        for (let i = 1; i <= 17; i++) {
+            result.push({label: i, value: `paper${i}`});
+        }
+
+        return result;
+    }
+
+    get fontsOptions() {
+        let result = [];
+        this.fonts.forEach(font => {
+            result.push({label: (font.label ? font.label : font.name), value: font.name});
+        });
+        return result;
+    }
+
+    get webFontsOptions() {
+        let result = [{label: 'Нет', value: ''}];
+        this.webFonts.forEach(font => {
+            result.push({label: font.name, value: font.name});
+        });
+        return result;
+    }
+
+    get pageChangeAnimationOptions() {
+        let result = [
+            {label: 'Нет', value: ''},
+            {label: 'Вверх-вниз', value: 'downShift'},
+            (!this.dualPageMode ? {label: 'Вправо-влево', value: 'rightShift'} : null),
+            {label: 'Протаивание', value: 'thaw'},
+            {label: 'Мерцание', value: 'blink'},
+            {label: 'Вращение', value: 'rotate'},
+            (this.wallpaper == '' && !this.dualPageMode ? {label: 'Листание', value: 'flip'} : null),
+        ];        
+
+        result = result.filter(v => v);
+
+        return result;
+    }
+
+    get currentProfile() {
+        return this.$store.state.reader.currentProfile;
+    }
+
+    set currentProfile(newValue) {
+        this.commit('reader/setCurrentProfile', newValue);
+    }
+
+    get partialStorageKey() {
+        return this.serverStorageKey.substr(0, 7) + '***';
+    }
+
+    get serverStorageKey() {
+        return this.$store.state.reader.serverStorageKey;
+    }
+
+    get setStorageKeyLink() {
+        return `https://${window.location.host}/#/reader?setStorageAccessKey=${utils.toBase58(this.serverStorageKey)}`;
+    }
+
+    get predefineTextColors() {
+        return defPalette.concat([
+          '#ffffff',
+          '#000000',
+          '#202020',
+          '#323232',
+          '#aaaaaa',
+          '#00c0c0',
+          '#ebe2c9',
+          '#cfdc99',
+          '#478355',
+          '#909080',
+        ]);
+    }
+
+    get predefineBackgroundColors() {
+        return defPalette.concat([
+          '#ffffff',
+          '#000000',
+          '#202020',
+          '#ebe2c9',
+          '#cfdc99',
+          '#478355',
+          '#a6caf0',
+          '#909080',
+          '#808080',
+          '#c8c8c8',
+        ]);
+    }
+
+    colorPanStyle(type) {
+        let result = 'width: 30px; height: 30px; border: 1px solid black; border-radius: 4px;';
+        switch (type) {
+            case 'text':
+                result += `background-color: ${this.textColor};`
+                break;
+            case 'bg':
+                result += `background-color: ${this.backgroundColor};`
+                break;
+            case 'div':
+                result += `background-color: ${this.dualDivColor};`
+                break;
+            case 'statusbar':
+                result += `background-color: ${this.statusBarColor};`
+                break;
+        }
+        return result;
+    }
+
+    needReload() {
+        this.$root.notify.warning('Необходимо обновить страницу (F5), чтобы изменения возымели эффект');
+    }
+
+    needTextReload() {
+        this.$root.notify.warning('Необходимо обновить книгу в обход кэша, чтобы изменения возымели эффект');
+    }
+
     close() {
         this.$emit('do-action', {action: 'settings'});
     }
@@ -165,20 +455,212 @@ class SettingsPage {
     async setDefaults() {
         try {
             if (await this.$root.stdDialog.confirm('Подтвердите установку настроек по умолчанию:', ' ')) {
-                this.form = _.cloneDeep(rstore.settingDefaults);
+                this.form = Object.assign({}, rstore.settingDefaults);
+                for (let prop in rstore.settingDefaults) {
+                    this[prop] = this.form[prop];
+                }
             }
         } catch (e) {
             //
         }
     }
 
-    tabEvent(event) {
+    async addProfile() {
-        if (!event || !event.action)
+        try {
+            if (Object.keys(this.profiles).length >= 100) {
+                this.$root.stdDialog.alert('Достигнут предел количества профилей', 'Ошибка');
+                return;
+            }
+            const result = await this.$root.stdDialog.prompt('Введите произвольное название для профиля устройства:', ' ', {
+                inputValidator: (str) => { if (!str) return 'Название не должно быть пустым'; else if (str.length > 50) return 'Слишком длинное название'; else return true; },
+            });
+            if (result && result.value) {
+                if (this.profiles[result.value]) {
+                    this.$root.stdDialog.alert('Такой профиль уже существует', 'Ошибка');
+                } else {
+                    const newProfiles = Object.assign({}, this.profiles, {[result.value]: 1});
+                    this.commit('reader/setAllowProfilesSave', true);
+                    await this.$nextTick();//ждем обработчики watch
+                    this.commit('reader/setProfiles', newProfiles);
+                    await this.$nextTick();//ждем обработчики watch
+                    this.commit('reader/setAllowProfilesSave', false);
+                    this.currentProfile = result.value;
+                }
+            }
+        } catch (e) {
+            //
+        }
+    }
+
+    async delProfile() {
+        if (!this.currentProfile)
             return;
 
-        switch (event.action) {
+        try {
-            case 'set-defaults': this.setDefaults(); break;
+            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Удаление профиля '${this.$root.sanitize(this.currentProfile)}' необратимо.` +
-            case 'night-mode': this.$emit('do-action', {action: 'nightMode'}); break;
+                    `<br>Все настройки профиля будут потеряны, однако список читаемых книг сохранится.` +
+                    `<br><br>Введите 'да' для подтверждения удаления:`, ' ', {
+                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
+            });
+
+            if (result && result.value && result.value.toLowerCase() == 'да') {
+                if (this.profiles[this.currentProfile]) {
+                    const newProfiles = Object.assign({}, this.profiles);
+                    delete newProfiles[this.currentProfile];
+                    this.commit('reader/setAllowProfilesSave', true);
+                    await this.$nextTick();//ждем обработчики watch
+                    this.commit('reader/setProfiles', newProfiles);
+                    await this.$nextTick();//ждем обработчики watch
+                    this.commit('reader/setAllowProfilesSave', false);
+                    this.currentProfile = '';
+                }
+            }
+        } catch (e) {
+            //
+        }
+    }
+
+    async delAllProfiles() {
+        if (!Object.keys(this.profiles).length)
+            return;
+
+        try {
+            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Удаление ВСЕХ профилей с настройками необратимо.` +
+                    `<br><br>Введите 'да' для подтверждения удаления:`, ' ', {
+                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
+            });
+
+            if (result && result.value && result.value.toLowerCase() == 'да') {
+                this.commit('reader/setAllowProfilesSave', true);
+                await this.$nextTick();//ждем обработчики watch
+                this.commit('reader/setProfiles', {});
+                await this.$nextTick();//ждем обработчики watch
+                this.commit('reader/setAllowProfilesSave', false);
+                this.currentProfile = '';
+            }
+        } catch (e) {
+            //
+        }
+    }
+
+    async copyToClip(text, prefix) {
+        const result = await utils.copyTextToClipboard(text);
+        const suf = (prefix.substr(-1) == 'а' ? 'а' : '');
+        const msg = (result ? `${prefix} успешно скопирован${suf} в буфер обмена` : 'Копирование не удалось');
+        if (result)
+            this.$root.notify.success(msg);
+        else
+            this.$root.notify.error(msg);
+    }
+
+    async showServerStorageKey() {
+        this.serverStorageKeyVisible = !this.serverStorageKeyVisible;
+    }
+
+    async enterServerStorageKey(key) {
+        try {
+            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Изменение ключа доступа приведет к замене всех профилей и читаемых книг в читалке.` +
+                    `<br><br>Введите новый ключ доступа:`, ' ', {
+                inputValidator: (str) => {
+                    try {
+                        if (str && utils.fromBase58(str).length == 32) {
+                            return true;
+                        }
+                    } catch (e) {
+                        //
+                    }
+                    return 'Неверный формат ключа'; 
+                },
+                inputValue: (key && _.isString(key) ? key : null),
+            });
+
+            if (result && result.value && utils.fromBase58(result.value).length == 32) {
+                this.commit('reader/setServerStorageKey', result.value);
+            }
+        } catch (e) {
+            //
+        }
+    }
+
+    async generateServerStorageKey() {
+        try {
+            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Генерация нового ключа доступа приведет к удалению всех профилей и читаемых книг в читалке.` +
+                    `<br><br>Введите 'да' для подтверждения генерации нового ключа:`, ' ', {
+                inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Генерация не подтверждена'; },
+            });
+
+            if (result && result.value && result.value.toLowerCase() == 'да') {
+                if (this.$root.generateNewServerStorageKey)
+                    this.$root.generateNewServerStorageKey();
+            }
+        } catch (e) {
+            //
+        }
+
+    }
+
+    loadWallpaperFileClick() {
+        this.$refs.file.click();
+    }
+
+    loadWallpaperFile() {
+        const file = this.$refs.file.files[0];        
+        if (file.size > 10*1024*1024) {
+            this.$root.stdDialog.alert('Файл обоев не должен превышать в размере 10Mb', 'Ошибка');
+            return;
+        }
+
+        if (file.type != 'image/png' && file.type != 'image/jpeg') {
+            this.$root.stdDialog.alert('Файл обоев должен иметь тип PNG или JPEG', 'Ошибка');
+            return;
+        }
+
+        if (this.userWallpapers.length >= 100) {
+            this.$root.stdDialog.alert('Превышено максимальное количество пользовательских обоев.', 'Ошибка');
+            return;
+        }
+
+        this.$refs.file.value = '';
+        if (file) {
+            const reader = new FileReader();
+
+            reader.onload = (e) => {
+                (async() => {
+                    const data = e.target.result;
+                    const key = utils.toHex(cryptoUtils.sha256(data));
+                    const label = `#${key.substring(0, 4)}`;
+                    const cssClass = `user-paper${key}`;
+
+                    const newUserWallpapers = _.cloneDeep(this.userWallpapers);
+                    const index = _.findIndex(newUserWallpapers, (item) => (item.cssClass == cssClass));
+
+                    if (index < 0)
+                        newUserWallpapers.push({label, cssClass});
+                    if (!wallpaperStorage.keyExists(cssClass))
+                        await wallpaperStorage.setData(cssClass, data);
+
+                    this.userWallpapers = newUserWallpapers;
+                    this.wallpaper = cssClass;
+                })();
+            }
+
+            reader.readAsDataURL(file);
+        }
+    }
+
+    async delWallpaper() {
+        if (this.wallpaper.indexOf('user-paper') == 0) {
+            const newUserWallpapers = [];
+            for (const wp of this.userWallpapers) {
+                if (wp.cssClass != this.wallpaper) {
+                    newUserWallpapers.push(wp);
+                }
+            }
+
+            await wallpaperStorage.removeData(this.wallpaper);
+
+            this.userWallpapers = newUserWallpapers;
+            this.wallpaper = '';
         }
     }
 
@@ -198,17 +680,15 @@ export default vueComponent(SettingsPage);
 .tab {
     justify-content: initial;
 }
-</style>
 
-<style>
+.tab-panel {
-.sets-tab-panel {
     overflow-x: hidden;
     overflow-y: auto;
     font-size: 90%;
     padding: 0 10px 15px 10px;
 }
 
-.sets-part-header {
+.part-header {
     border-top: 2px solid #bbbbbb;
     font-weight: bold;
     font-size: 110%;
@@ -216,7 +696,25 @@ export default vueComponent(SettingsPage);
     margin-bottom: 5px;
 }
 
-.sets-label {
+.item {
+    width: 100%;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
+.label-1, .label-7 {
+    width: 75px;
+}
+
+.label-2, .label-3, .label-4, .label-5 {
+    width: 110px;
+}
+
+.label-6 {
+    width: 100px;
+}
+
+.label-1, .label-2, .label-3, .label-4, .label-5, .label-6, .label-7 {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -225,14 +723,33 @@ export default vueComponent(SettingsPage);
     overflow: hidden;
 }
 
-.sets-item {
+.text {
-    width: 100%;
+    font-size: 90%;
-    margin-top: 5px;
+    line-height: 130%;
-    margin-bottom: 5px;
 }
 
-.sets-button {
+.button {
     margin: 3px 15px 3px 0;
     padding: 0 5px 0 5px;
 }
+
+.copy-icon {
+    margin-left: 5px;
+    cursor: pointer;
+    font-size: 120%;
+    color: blue;
+}
+
+.input {
+    max-width: 150px;
+}
+
+.no-mp {
+    margin: 0;
+    padding: 0;
+}
+
+.col-left {
+    width: 150px;
+}
 </style>

client/components/Reader/SettingsPage/ToolBarTab/ToolBarTab.vue

@@ -1,76 +0,0 @@
-<template>
-    <div class="fit sets-tab-panel">
-        <div class="sets-part-header">
-            Отображение
-        </div>
-
-        <div class="item row no-wrap">
-            <div class="sets-label label"></div>
-            <q-checkbox v-model="form.toolBarMultiLine" size="xs" label="Многострочная панель">
-                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                    Размещать кнопки на панели в несколько рядов, если они не помещаются в одну строку
-                </q-tooltip>
-            </q-checkbox>
-        </div>
-
-        <div class="item row no-wrap">
-            <div class="sets-label label"></div>
-            <q-checkbox v-model="form.toolBarHideOnScroll" size="xs" label="Скрывать/показывать панель при прокрутке">
-                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                    Скрывать/показывть панель при прокрутке текста вперед/назад
-                </q-tooltip>
-            </q-checkbox>
-        </div>
-
-        <div class="sets-part-header">
-            Показывать кнопки
-        </div>
-
-        <div v-for="item in rstore.toolButtons" :key="item.name">
-            <div class="sets-item row no-wrap">
-                <div class="sets-label label"></div>
-                <q-checkbox v-model="form.showToolButton[item.name]" size="xs" :label="rstore.readerActions[item.name]" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import vueComponent from '../../../vueComponent.js';
-
-import rstore from '../../../../store/modules/reader';
-
-const componentOptions = {
-    watch: {
-    },
-};
-class ToolBarTab {
-    _options = componentOptions;
-    _props = {
-        form: Object,
-    };
-
-    rstore = rstore;
-
-    created() {
-    }
-
-    mounted() {
-    }
-
-    get mode() {
-        return this.$store.state.config.mode;
-    }
-}
-
-export default vueComponent(ToolBarTab);
-//-----------------------------------------------------------------------------
-</script>
-
-<style scoped>
-.label {
-    width: 75px;
-}
-
-</style>

client/components/Reader/SettingsPage/UpdateTab/UpdateTab.vue

@@ -1,122 +0,0 @@
-<template>
-    <div class="fit sets-tab-panel">
-        <!---------------------------------------------->
-        <div class="sets-part-header">
-            Обновление читалки
-        </div>
-        <div class="sets-item row">
-            <div class="sets-label label"></div>
-            <q-checkbox v-model="form.showNeedUpdateNotify" size="xs">
-                Проверять наличие новой версии
-                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                    Напоминать о необходимости обновления страницы<br>
-                    при появлении новой версии читалки
-                </q-tooltip>
-            </q-checkbox>
-        </div>
-
-        <!---------------------------------------------->
-        <div class="sets-part-header">
-            Обновление книг
-        </div>
-        <div v-show="!configBucEnabled" class="sets-item row">
-            <div class="sets-label label"></div>
-            <div>Сервер обновлений временно не работает</div>
-        </div>
-
-        <div v-show="configBucEnabled" class="sets-item row">
-            <div class="sets-label label"></div>
-            <q-checkbox v-model="form.bucEnabled" size="xs">
-                Проверять обновления книг
-            </q-checkbox>
-        </div>
-
-        <div v-show="configBucEnabled && form.bucEnabled" class="sets-item row">
-            <div class="sets-label label"></div>
-            <div class="col-4 column justify-center items-end q-pr-xs">
-                Разница размеров
-            </div>
-            <div class="col row">
-                <NumInput v-model="form.bucSizeDiff" bg-color="input" style="width: 200px" />
-
-                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                    Уведомлять о наличии обновления книги в списке загруженных<br>
-                    при указанной разнице в размерах старого и нового файлов.<br>
-                    Разница указывается в байтах и может быть отрицательной.
-                </q-tooltip>
-            </div>
-        </div>
-
-        <div v-show="configBucEnabled && form.bucEnabled" class="sets-item row">
-            <div class="sets-label label"></div>
-            <q-checkbox v-model="form.bucSetOnNew" size="xs">
-                Автопроверка для вновь загружаемых
-                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                    Автоматически устанавливать флаг проверки<br>
-                    обновлений для всех вновь загружаемых книг
-                </q-tooltip>
-            </q-checkbox>
-        </div>
-
-        <div v-show="configBucEnabled && form.bucEnabled" class="sets-item row">
-            <div class="sets-label label"></div>
-            <q-checkbox v-model="form.bucCancelEnabled" size="xs">
-                Отменять проверку через {{ form.bucCancelDays }} дней{{ (form.bucCancelEnabled ? ':' : '') }}
-                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                    Снимать флаг проверки с книги, если не было<br>
-                    обновлений в течение {{ form.bucCancelDays }} дней
-                </q-tooltip>
-            </q-checkbox>
-        </div>
-
-        <div v-show="configBucEnabled && form.bucEnabled && form.bucCancelEnabled" class="sets-item row">
-            <div class="sets-label label"></div>
-            <div class="col-4"></div>
-            <div class="col row">
-                <NumInput v-model="form.bucCancelDays" bg-color="input" :min="1" :max="10000" />
-
-                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                    Снимать флаг проверки с книги, если не было<br>
-                    обновлений в течение {{ form.bucCancelDays }} дней
-                </q-tooltip>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import vueComponent from '../../../vueComponent.js';
-import NumInput from '../../../share/NumInput.vue';
-
-const componentOptions = {
-    components: {
-        NumInput
-    },
-};
-class UpdateTab {
-    _options = componentOptions;
-    _props = {
-        form: Object,
-    };
-
-    created() {
-    }
-
-    mounted() {
-    }
-
-    get configBucEnabled() {
-        return this.$store.state.config.bucEnabled;
-    }
-}
-
-export default vueComponent(UpdateTab);
-//-----------------------------------------------------------------------------
-</script>
-
-<style scoped>
-.label {
-    width: 100px;
-}
-</style>

client/components/Reader/SettingsPage/UserHotKeys/UserHotKeys.vue

@@ -2,10 +2,10 @@
     <div class="table col column no-wrap">
         <!-- header -->
         <div class="table-row row">
-            <div class="desc q-pa-sm bg-header-3">
+            <div class="desc q-pa-sm bg-blue-2">
                 Команда
             </div>
-            <div class="hotKeys col q-pa-sm bg-header-3 row no-wrap">
+            <div class="hotKeys col q-pa-sm bg-blue-2 row no-wrap">
                 <div style="width: 80px">
                     Сочетание клавиш
                 </div>
@@ -13,8 +13,8 @@
                     ref="input"
                     v-model="search"
                     class="q-ml-sm col"
-                    outlined dense
+                    outlined dense rounded
-                    bg-color="input"
+                    bg-color="grey-4"
                     placeholder="Найти"                    
                     @click.stop
                 />
@@ -73,9 +73,10 @@
 
 <script>
 //-----------------------------------------------------------------------------
-import vueComponent from '../../../../vueComponent.js';
+import vueComponent from '../../../vueComponent.js';
 
-import rstore from '../../../../../store/modules/reader';
+import rstore from '../../../../store/modules/reader';
+//import * as utils from '../../share/utils';
 
 const componentOptions = {
     watch: {
@@ -115,7 +116,7 @@ class UserHotKeys {
     }
 
     updateTableData() {
-        let result = rstore.hotKeys.map(hk => hk.name);
+        let result = rstore.hotKeys.map(hk => hk.name).filter(name => (this.mode == 'liberama.top' || name != 'libs'));
 
         const search = this.search.toLowerCase();
         const codesIncludeSearch = (action) => {
@@ -234,11 +235,11 @@ export default vueComponent(UserHotKeys);
 }
 
 .table-row:nth-child(even) {
-    background-color: var(--bg-menu-color1);
+    background-color: #f7f7f7;
 }
 
 .table-row:hover {
-    background-color: var(--bg-menu-color2);
+    background-color: #f0f0f0;
 }
 
 .desc {

client/components/Reader/SettingsPage/ViewTab/Color.inc

@@ -0,0 +1,116 @@
+                            <!---------------------------------------------->
+                            <div class="hidden part-header">
+                                Цвет
+                            </div>
+
+                            <div class="item row">
+                                <div class="label-2">
+                                    Текст
+                                </div>
+                                <div class="col row">
+                                    <q-input
+                                        v-model="textColorFiltered"
+                                        class="col-left no-mp"
+                                        outlined dense
+                                        
+                                        :rules="['hexColor']"
+                                        style="max-width: 150px"
+                                    >
+                                        <template #prepend>
+                                            <q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="colorPanStyle('text')">
+                                                <q-popup-proxy anchor="bottom middle" self="top middle">
+                                                    <div>
+                                                        <q-color
+                                                            v-model="textColor"
+                                                            no-header default-view="palette" :palette="predefineTextColors"
+                                                        />
+                                                    </div>
+                                                </q-popup-proxy>
+                                            </q-icon>
+                                        </template>
+                                    </q-input>
+                                </div>
+                            </div>
+
+                            <div class="q-mt-md" />
+                            <div class="item row">
+                                <div class="label-2">
+                                    Фон
+                                </div>
+                                <div class="col row">
+                                    <q-input 
+                                        v-model="bgColorFiltered"
+                                        class="col-left no-mp"
+                                        outlined dense
+                                        
+                                        :rules="['hexColor']"
+                                        style="max-width: 150px"
+                                    >
+                                        <template #prepend>
+                                            <q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="colorPanStyle('bg')">
+                                                <q-popup-proxy anchor="bottom middle" self="top middle">
+                                                    <div>
+                                                        <q-color v-model="backgroundColor" no-header default-view="palette" :palette="predefineBackgroundColors" />
+                                                    </div>
+                                                </q-popup-proxy>
+                                            </q-icon>
+                                        </template>
+                                    </q-input>
+                                </div>
+                            </div>
+
+                            <div class="q-mt-md" />
+                            <div class="item row">
+                                <div class="label-2">
+                                    Обои
+                                </div>
+                                <div class="col row items-center">
+                                    <q-select 
+                                        v-model="wallpaper"
+                                        class="col-left no-mp"
+                                        :options="wallpaperOptions"
+                                        dropdown-icon="la la-angle-down la-sm"
+                                        outlined dense emit-value map-options
+                                    >
+                                        <template #selected-item="scope">
+                                            <div>
+                                                {{ scope.opt.label }}
+                                            </div>
+                                            <div v-show="scope.opt.value" class="q-ml-sm" :class="scope.opt.value" style="width: 40px; height: 28px;"></div>
+                                        </template>
+
+                                        <template #option="scope">
+                                            <q-item
+                                                v-bind="scope.itemProps"
+                                            >
+                                                <q-item-section style="min-width: 50px;">
+                                                    <q-item-label v-html="scope.opt.label" />
+                                                </q-item-section>
+                                                <q-item-section v-show="scope.opt.value" :class="scope.opt.value" style="min-width: 70px; min-height: 50px;" />
+                                            </q-item>
+                                        </template>
+                                    </q-select>
+
+                                    <div class="q-px-xs" />
+                                    <q-btn class="q-ml-sm" round dense color="blue" icon="la la-plus" @click.stop="loadWallpaperFileClick">
+                                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                                            Добавить файл обоев
+                                        </q-tooltip>
+                                    </q-btn>
+                                    <q-btn v-show="wallpaper.indexOf('user-paper') === 0" class="q-ml-sm" round dense color="blue" icon="la la-minus" @click.stop="delWallpaper">
+                                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                                            Удалить выбранные обои
+                                        </q-tooltip>
+                                    </q-btn>
+                                </div>
+                            </div>
+
+                            <div class="q-mt-sm" />
+                            <div class="item row">
+                                <div class="label-2"></div>
+                                <div class="col row items-center">
+                                    <q-checkbox v-model="wallpaperIgnoreStatusBar" size="xs" label="Не включать строку статуса в обои" />
+                                </div>
+                            </div>
+
+                            <input ref="file" type="file" style="display: none;" @change="loadWallpaperFile" />

client/components/Reader/SettingsPage/ViewTab/Color/Color.vue

@@ -1,332 +0,0 @@
-<template>
-    <div>
-        <!---------------------------------------------->
-        <div class="hidden sets-part-header">
-            Цвет
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Текст
-            </div>
-            <div class="col row">
-                <q-input
-                    v-model="textColorFiltered"
-                    class="col-left no-mp"
-                    bg-color="input" 
-                    outlined dense
-                    
-                    :rules="['hexColor']"
-                    style="max-width: 150px"
-                >
-                    <template #prepend>
-                        <q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="helper.colorPanStyle(form.textColor)">
-                            <q-popup-proxy anchor="bottom middle" self="top middle">
-                                <div>
-                                    <q-color
-                                        v-model="form.textColor"
-                                        no-header default-view="palette" :palette="defPalette.predefineTextColors"
-                                    />
-                                </div>
-                            </q-popup-proxy>
-                        </q-icon>
-                    </template>
-                </q-input>
-            </div>
-        </div>
-
-        <div class="q-mt-md" />
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Фон
-            </div>
-            <div class="col row">
-                <q-input 
-                    v-model="bgColorFiltered"
-                    class="col-left no-mp"
-                    bg-color="input" 
-                    outlined dense
-                    
-                    :rules="['hexColor']"
-                    style="max-width: 150px"
-                >
-                    <template #prepend>
-                        <q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="helper.colorPanStyle(form.backgroundColor)">
-                            <q-popup-proxy anchor="bottom middle" self="top middle">
-                                <div>
-                                    <q-color v-model="form.backgroundColor" no-header default-view="palette" :palette="defPalette.predefineBackgroundColors" />
-                                </div>
-                            </q-popup-proxy>
-                        </q-icon>
-                    </template>
-                </q-input>
-            </div>
-        </div>
-
-        <div class="q-mt-md" />
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Обои
-            </div>
-            <div class="col row items-center">
-                <q-select 
-                    v-model="form.wallpaper"
-                    class="col-left no-mp"
-                    :options="wallpaperOptions"
-                    bg-color="input" 
-                    dropdown-icon="la la-angle-down la-sm"
-                    outlined dense emit-value map-options
-                >
-                    <template #selected-item="scope">
-                        <div>
-                            {{ scope.opt.label }}
-                        </div>
-                        <div v-show="scope.opt.value" class="q-ml-sm" :class="scope.opt.value" style="width: 40px; height: 28px;"></div>
-                    </template>
-
-                    <template #option="scope">
-                        <q-item
-                            v-bind="scope.itemProps"
-                        >
-                            <q-item-section style="min-width: 50px;">
-                                <q-item-label>
-                                    {{ scope.opt.label }}
-                                </q-item-label>
-                            </q-item-section>
-                            <q-item-section v-show="scope.opt.value" :class="scope.opt.value" style="min-width: 70px; min-height: 50px;" />
-                        </q-item>
-                    </template>
-                </q-select>
-
-                <div class="q-px-xs" />
-                <q-btn class="q-ml-sm" round dense color="blue" icon="la la-plus" @click.stop="loadWallpaperFileClick">
-                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
-                        Добавить файл обоев
-                    </q-tooltip>
-                </q-btn>
-                <q-btn v-show="form.wallpaper.indexOf('user-paper') === 0" class="q-ml-sm" round dense color="blue" icon="la la-minus" @click.stop="delWallpaper">
-                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
-                        Удалить выбранные обои
-                    </q-tooltip>
-                </q-btn>
-                <q-btn v-show="form.wallpaper.indexOf('user-paper') === 0" class="q-ml-sm" round dense color="blue" icon="la la-file-download" @click.stop="downloadWallpaper">
-                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
-                        Скачать выбранные обои
-                    </q-tooltip>
-                </q-btn>
-            </div>
-        </div>
-
-        <div class="q-mt-sm" />
-        <div class="sets-item row">
-            <div class="sets-label label"></div>
-            <div class="col row items-center">
-                <q-checkbox v-model="form.wallpaperIgnoreStatusBar" size="xs" label="Не включать строку статуса в обои" />
-            </div>
-        </div>
-
-        <input ref="file" type="file" style="display: none;" @change="loadWallpaperFile" />
-        <a ref="download" style="display: none;" target="_blank"></a>
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import vueComponent from '../../../../vueComponent.js';
-
-import _ from 'lodash';
-
-import * as helper from '../helper';
-import defPalette from '../defPalette';
-
-import * as utils from '../../../../../share/utils';
-import * as cryptoUtils from '../../../../../share/cryptoUtils';
-import wallpaperStorage from '../../../share/wallpaperStorage';
-import readerApi from '../../../../../api/reader';
-
-const componentOptions = {
-    components: {
-    },
-    watch: {
-        form: {
-            handler() {
-                this.formChanged();//no await
-            },
-            deep: true,
-        },
-        textColorFiltered(newValue) {
-            if (!this.isFormChanged && this.helper.isHexColor(newValue))
-                this.form.textColor = newValue;
-        },
-        bgColorFiltered(newValue) {
-            if (!this.isFormChanged && this.helper.isHexColor(newValue))
-                this.form.backgroundColor = newValue;
-        },
-    },
-};
-class Color {
-    _options = componentOptions;
-    _props = {
-        form: Object,
-    };
-
-    helper = helper;
-    defPalette = defPalette;
-
-    isFormChanged = false;
-    textColorFiltered = '';
-    bgColorFiltered = '';
-
-    created() {
-        this.formChanged();//no await
-    }
-
-    mounted() {
-    }
-
-    async formChanged() {
-        this.isFormChanged = true;
-        try {
-            this.textColorFiltered = this.form.textColor;
-            this.bgColorFiltered = this.form.backgroundColor;
-
-            if (this.form.wallpaper != '' && this.form.pageChangeAnimation == 'flip')
-                this.form.pageChangeAnimation = '';
-        } finally {
-            await this.$nextTick();
-            this.isFormChanged = false;
-        }
-    }
-
-    get wallpaperOptions() {
-        let result = [{label: 'Нет', value: ''}];
-
-        const userWallpapers = _.cloneDeep(this.form.userWallpapers);
-        userWallpapers.sort((a, b) => a.label.localeCompare(b.label));
-
-        for (const wp of userWallpapers) {
-            if (wallpaperStorage.keyExists(wp.cssClass))
-                result.push({label: wp.label, value: wp.cssClass});
-        }
-
-        for (let i = 1; i <= 17; i++) {
-            result.push({label: i, value: `paper${i}`});
-        }
-
-        return result;
-    }
-
-    loadWallpaperFileClick() {
-        this.$refs.file.click();
-    }
-
-    loadWallpaperFile() {
-        const file = this.$refs.file.files[0];        
-        if (file.size > 10*1024*1024) {
-            this.$root.stdDialog.alert('Файл обоев не должен превышать в размере 10Mb', 'Ошибка');
-            return;
-        }
-
-        if (file.type != 'image/png' && file.type != 'image/jpeg') {
-            this.$root.stdDialog.alert('Файл обоев должен иметь тип PNG или JPEG', 'Ошибка');
-            return;
-        }
-
-        if (this.form.userWallpapers.length >= 100) {
-            this.$root.stdDialog.alert('Превышено максимальное количество пользовательских обоев.', 'Ошибка');
-            return;
-        }
-
-        this.$refs.file.value = '';
-        if (file) {
-            const reader = new FileReader();
-
-            reader.onload = (e) => {
-                (async() => {
-                    const data = e.target.result;
-                    const key = utils.toHex(cryptoUtils.sha256(data));
-                    const label = `#${key.substring(0, 4)}`;
-                    const cssClass = `user-paper${key}`;
-
-                    const newUserWallpapers = _.cloneDeep(this.form.userWallpapers);
-                    const index = _.findIndex(newUserWallpapers, (item) => (item.cssClass == cssClass));
-
-                    if (index < 0)
-                        newUserWallpapers.push({label, cssClass});
-                    if (!wallpaperStorage.keyExists(cssClass)) {
-                        await wallpaperStorage.setData(cssClass, data);
-                        //отправим data на сервер в файл `/upload/${key}`
-                        try {
-                            //const res = 
-                            await readerApi.uploadFileBuf(data);
-                            //console.log(res);
-                        } catch (e) {
-                            console.error(e);
-                        }
-                    }
-
-                    this.form.userWallpapers = newUserWallpapers;
-                    this.form.wallpaper = cssClass;
-                })();
-            }
-
-            reader.readAsDataURL(file);
-        }
-    }
-
-    async delWallpaper() {
-        if (this.form.wallpaper.indexOf('user-paper') == 0) {
-            const newUserWallpapers = [];
-            for (const wp of this.form.userWallpapers) {
-                if (wp.cssClass != this.form.wallpaper) {
-                    newUserWallpapers.push(wp);
-                }
-            }
-
-            await wallpaperStorage.removeData(this.form.wallpaper);
-
-            this.form.userWallpapers = newUserWallpapers;
-            this.form.wallpaper = '';
-        }
-    }
-
-    async downloadWallpaper() {
-        if (this.form.wallpaper.indexOf('user-paper') != 0)
-            return;
-
-        try {
-            const d = this.$refs.download;
-
-            const dataUrl = await wallpaperStorage.getData(this.form.wallpaper);
-
-            if (!dataUrl)
-                throw new Error('Файл обоев не найден');
-
-            d.href = dataUrl;
-            d.download = `wallpaper-#${this.form.wallpaper.replace('user-paper', '').substring(0, 4)}`;
-
-            d.click();
-        } catch (e) {
-            this.$root.stdDialog.alert(e.message, 'Ошибка', {color: 'negative'});
-        }
-    }
-}
-
-export default vueComponent(Color);
-//-----------------------------------------------------------------------------
-</script>
-
-<style scoped>
-.label {
-    width: 110px;
-}
-
-.col-left {
-    width: 145px;
-}
-
-.no-mp {
-    margin: 0;
-    padding: 0;
-}
-</style>

client/components/Reader/SettingsPage/ViewTab/Font.inc

@@ -0,0 +1,56 @@
+<!---------------------------------------------->
+<div class="hidden part-header">Шрифт</div>
+
+<div class="item row">
+    <div class="label-2">Локальный/веб</div>
+    <div class="col row">
+        <q-select class="col-left" v-model="fontName" :options="fontsOptions" :disable="webFontName != ''"
+            dropdown-icon="la la-angle-down la-sm"
+            outlined dense emit-value map-options
+        />
+
+        <div class="q-px-sm"/>
+        <q-select class="col" v-model="webFontName" :options="webFontsOptions"
+            dropdown-icon="la la-angle-down la-sm"
+            outlined dense emit-value map-options
+        >
+            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                Веб шрифты дают большое разнообразие,<br>
+                однако есть шанс, что шрифт будет загружаться<br>
+                очень медленно или вовсе не загрузится
+            </q-tooltip>
+        </q-select>
+    </div>
+</div>
+
+<div class="item row">
+    <div class="label-2">Размер</div>
+    <div class="col row">
+        <NumInput class="col-left" v-model="fontSize" :min="5" :max="200"/>
+
+        <div class="col q-pt-xs text-right">
+            <a href="https://fonts.google.com/?subset=cyrillic" target="_blank">Примеры</a>
+        </div>
+    </div>
+</div>
+
+<div class="item row">
+    <div class="label-2">Сдвиг</div>
+    <div class="col row">
+        <NumInput class="col-left" v-model="vertShift" :min="-100" :max="100">
+            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                Сдвиг шрифта по вертикали в процентах от размера.<br>
+                Отрицательное значение сдвигает вверх, положительное -<br>
+                вниз. Значение зависит от метрики шрифта.
+            </q-tooltip>
+        </NumInput>
+    </div>
+</div>
+
+<div class="item row">
+    <div class="label-2">Стиль</div>
+    <div class="col row">
+        <q-checkbox v-model="fontBold" size="xs" label="Жирный" />
+        <q-checkbox class="q-ml-sm" v-model="fontItalic" size="xs" label="Курсив" />
+    </div>
+</div>

client/components/Reader/SettingsPage/ViewTab/Font/Font.vue

@@ -1,176 +0,0 @@
-<template>
-    <div>
-        <!---------------------------------------------->
-        <div class="hidden sets-part-header">
-            Шрифт
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Локальный/веб
-            </div>
-            <div class="col row">
-                <q-select
-                    v-model="form.fontName" class="col-left" bg-color="input" :options="fontsOptions" :disable="form.webFontName != ''"
-                    dropdown-icon="la la-angle-down la-sm"
-                    outlined dense emit-value map-options
-                />
-
-                <div class="q-px-sm" />
-                <q-select
-                    v-model="form.webFontName" class="col" bg-color="input" :options="webFontsOptions"
-                    dropdown-icon="la la-angle-down la-sm"
-                    outlined dense emit-value map-options
-                >
-                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                        Веб шрифты дают большое разнообразие,<br>
-                        однако есть шанс, что шрифт будет загружаться<br>
-                        очень медленно или вовсе не загрузится
-                    </q-tooltip>
-                </q-select>
-            </div>
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Размер
-            </div>
-            <div class="col row">
-                <NumInput v-model="form.fontSize" bg-color="input" class="col-left" :min="5" :max="200" />
-
-                <div class="col q-pt-xs text-right">
-                    <a href="https://fonts.google.com/?subset=cyrillic" target="_blank">Примеры</a>
-                </div>
-            </div>
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Сдвиг
-            </div>
-            <div class="col row">
-                <NumInput v-model="vertShift" bg-color="input" class="col-left" :min="-100" :max="100">
-                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                        Сдвиг шрифта по вертикали в процентах от размера.<br>
-                        Отрицательное значение сдвигает вверх, положительное -<br>
-                        вниз. Значение зависит от метрики шрифта.
-                    </q-tooltip>
-                </NumInput>
-            </div>
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Стиль
-            </div>
-            <div class="col row">
-                <q-checkbox v-model="fontBold" size="xs" label="Жирный" />
-                <q-checkbox v-model="fontItalic" class="q-ml-sm" size="xs" label="Курсив" />
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import vueComponent from '../../../../vueComponent.js';
-
-import NumInput from '../../../../share/NumInput.vue';
-import rstore from '../../../../../store/modules/reader';
-
-const componentOptions = {
-    components: {
-        NumInput,
-    },
-    watch: {
-        form: {
-            handler() {
-                this.formChanged();//no await
-            },
-            deep: true,
-        },
-        fontBold: function(newValue) {
-            if (!this.isFormChanged)
-                this.form.fontWeight = (newValue ? 'bold' : '');
-        },
-        fontItalic: function(newValue) {
-            if (!this.isFormChanged)
-                this.form.fontStyle = (newValue ? 'italic' : '');
-        },
-        vertShift: function(newValue) {
-            if (!this.isFormChanged) {
-                const font = (this.form.webFontName ? this.form.webFontName : this.form.fontName);
-                if (this.form.fontShifts[font] != newValue || this.form.fontVertShift != newValue) {
-                    this.form.fontShifts = Object.assign({}, this.form.fontShifts, {[font]: newValue});
-                    this.form.fontVertShift = newValue;
-                }
-            }
-        },
-    },
-};
-class Font {
-    _options = componentOptions;
-    _props = {
-        form: Object,
-    };
-
-    fontBold = false;
-    fontItalic = false;
-    vertShift = 0;
-    webFonts = [];
-    fonts = [];    
-
-    created() {
-        this.formChanged();//no await
-    }
-
-    mounted() {
-    }
-
-    async formChanged() {
-        this.isFormChanged = true;
-        try {
-            this.fontBold = (this.form.fontWeight == 'bold');
-            this.fontItalic = (this.form.fontStyle == 'italic');
-
-            this.fonts = rstore.fonts;
-            this.webFonts = rstore.webFonts;
-            const font = (this.form.webFontName ? this.form.webFontName : this.form.fontName);
-            this.vertShift = this.form.fontShifts[font] || 0;
-        } finally {
-            await this.$nextTick();
-            this.isFormChanged = false;
-        }
-    }
-
-    get fontsOptions() {
-        let result = [];
-        this.fonts.forEach(font => {
-            result.push({label: (font.label ? font.label : font.name), value: font.name});
-        });
-        return result;
-    }
-
-    get webFontsOptions() {
-        let result = [{label: 'Нет', value: ''}];
-        this.webFonts.forEach(font => {
-            result.push({label: font.name, value: font.name});
-        });
-        return result;
-    }
-
-}
-
-export default vueComponent(Font);
-//-----------------------------------------------------------------------------
-</script>
-
-<style scoped>
-.label {
-    width: 110px;
-}
-
-.col-left {
-    width: 145px;
-}
-</style>

client/components/Reader/SettingsPage/ViewTab/Mode.inc

@@ -0,0 +1,124 @@
+<!---------------------------------------------->
+<div class="hidden part-header">Режим</div>
+
+<div class="item row">
+    <div class="label-2"></div>
+    <div class="col row">
+        <q-checkbox v-model="dualPageMode" size="xs" label="Двухстраничный режим" />
+    </div>
+</div>
+
+<div class="part-header">Страницы</div>
+<div class="item row">
+    <div class="label-2">Отступ границ</div>
+    <div class="col row">
+        <NumInput class="col-left" v-model="indentLR" :min="0" :max="2000">
+            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                Слева/справа от края экрана
+            </q-tooltip>
+        </NumInput>
+        <div class="q-px-sm"/>
+        <NumInput class="col" v-model="indentTB" :min="0" :max="2000">
+            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                Сверху/снизу от края экрана
+            </q-tooltip>
+        </NumInput>
+    </div>
+</div>
+
+<div v-show="dualPageMode" class="item row">
+    <div class="label-2">Отступ внутри</div>
+    <div class="col row">
+        <NumInput class="col-left" v-model="dualIndentLR" :min="0" :max="2000">
+            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                Слева/справа внутри страницы
+            </q-tooltip>
+        </NumInput>
+    </div>
+</div>
+
+<div v-show="dualPageMode">
+    <div class="part-header">Разделитель</div>
+
+    <div class="item row no-wrap">
+        <div class="label-2">Цвет</div>
+        <div class="col-left row">
+            <q-input class="col-left no-mp"
+                outlined dense
+                v-model="dualDivColorFiltered"
+                :rules="['hexColor']"
+                style="max-width: 150px"
+                :disable="dualDivColorAsText"
+            >
+                <template v-slot:prepend>
+                    <q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="colorPanStyle('div')">
+                        <q-popup-proxy anchor="bottom middle" self="top middle">
+                            <div>
+                                <q-color v-model="dualDivColor"
+                                    no-header default-view="palette" :palette="predefineTextColors"
+                                />
+                            </div>
+                        </q-popup-proxy>
+                    </q-icon>
+                </template>
+            </q-input>
+        </div>
+        
+        <div class="q-px-xs"/>
+        <q-checkbox v-model="dualDivColorAsText" size="xs" label="Как у текста" />
+    </div>
+
+    <div class="item row">
+        <div class="label-2">Прозрачность</div>
+        <div class="col row">
+            <NumInput class="col-left" v-model="dualDivColorAlpha" :min="0" :max="1" :digits="2" :step="0.1"/>
+        </div>
+    </div>
+
+    <div class="item row">
+        <div class="label-2">Ширина (px)</div>
+        <div class="col row">
+            <NumInput class="col-left" v-model="dualDivWidth" :min="0" :max="100">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Ширина разделителя
+                </q-tooltip>
+            </NumInput>
+        </div>
+    </div>
+
+    <div class="item row">
+        <div class="label-2">Высота (%)</div>
+        <div class="col row">
+            <NumInput class="col-left" v-model="dualDivHeight" :min="0" :max="100">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Высота разделителя
+                </q-tooltip>
+            </NumInput>
+        </div>
+    </div>
+
+    <div class="item row">
+        <div class="label-2">Пунктир</div>
+        <div class="col row">
+            <NumInput class="col-left" v-model="dualDivStrokeFill" :min="0" :max="2000">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Заполнение пунктира
+                </q-tooltip>
+            </NumInput>
+            <div class="q-px-sm"/>
+            <NumInput class="col" v-model="dualDivStrokeGap" :min="0" :max="2000">
+                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                    Промежуток пунктира
+                </q-tooltip>
+            </NumInput>
+        </div>
+    </div>
+
+    <div class="item row">
+        <div class="label-2">Ширина тени</div>
+        <div class="col row">
+            <NumInput class="col-left" v-model="dualDivShadowWidth" :min="0" :max="100"/>
+        </div>
+    </div>    
+
+</div>

client/components/Reader/SettingsPage/ViewTab/Mode/Mode.vue

@@ -1,244 +0,0 @@
-<template>
-    <div>
-        <!---------------------------------------------->
-        <div class="hidden sets-part-header">
-            Режим
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label"></div>
-            <div class="col row">
-                <q-checkbox v-model="nightMode" size="xs" label="Ночной режим" @update:modelValue="nightModeToggle" />
-            </div>
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label"></div>
-            <div class="col row">
-                <q-checkbox v-model="form.dualPageMode" size="xs" label="Двухстраничный режим" />
-            </div>
-        </div>
-
-        <div class="sets-part-header">
-            Страницы
-        </div>
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Отступ границ
-            </div>
-            <div class="col row">
-                <NumInput v-model="form.indentLR" bg-color="input" class="col-left" :min="0" :max="2000">
-                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                        Слева/справа от края экрана
-                    </q-tooltip>
-                </NumInput>
-                <div class="q-px-sm" />
-                <NumInput v-model="form.indentTB" bg-color="input" class="col" :min="0" :max="2000">
-                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                        Сверху/снизу от края экрана
-                    </q-tooltip>
-                </NumInput>
-            </div>
-        </div>
-
-        <div v-show="form.dualPageMode" class="sets-item row">
-            <div class="sets-label label">
-                Отступ внутри
-            </div>
-            <div class="col row">
-                <NumInput v-model="form.dualIndentLR" bg-color="input" class="col-left" :min="0" :max="2000">
-                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                        Слева/справа внутри страницы
-                    </q-tooltip>
-                </NumInput>
-            </div>
-        </div>
-
-        <div v-show="form.dualPageMode">
-            <div class="sets-part-header">
-                Разделитель
-            </div>
-
-            <div class="sets-item row no-wrap">
-                <div class="sets-label label">
-                    Цвет
-                </div>
-                <div class="col-left row">
-                    <q-input 
-                        v-model="dualDivColorFiltered"
-                        class="col-left no-mp"
-                        bg-color="input" 
-                        outlined dense
-                        :rules="['hexColor']"
-                        style="max-width: 150px"
-                        :disable="form.dualDivColorAsText"
-                    >
-                        <template #prepend>
-                            <q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="helper.colorPanStyle(form.dualDivColor)">
-                                <q-popup-proxy anchor="bottom middle" self="top middle">
-                                    <div>
-                                        <q-color
-                                            v-model="form.dualDivColor"
-                                            no-header default-view="palette" :palette="defPalette.predefineTextColors"
-                                        />
-                                    </div>
-                                </q-popup-proxy>
-                            </q-icon>
-                        </template>
-                    </q-input>
-                </div>
-                
-                <div class="q-px-xs" />
-                <q-checkbox v-model="form.dualDivColorAsText" size="xs" label="Как у текста" />
-            </div>
-
-            <div class="sets-item row">
-                <div class="sets-label label">
-                    Прозрачность
-                </div>
-                <div class="col row">
-                    <NumInput v-model="form.dualDivColorAlpha" bg-color="input" class="col-left" :min="0" :max="1" :digits="2" :step="0.1" />
-                </div>
-            </div>
-
-            <div class="sets-item row">
-                <div class="sets-label label">
-                    Ширина (px)
-                </div>
-                <div class="col row">
-                    <NumInput v-model="form.dualDivWidth" bg-color="input" class="col-left" :min="0" :max="100">
-                        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                            Ширина разделителя
-                        </q-tooltip>
-                    </NumInput>
-                </div>
-            </div>
-
-            <div class="sets-item row">
-                <div class="sets-label label">
-                    Высота (%)
-                </div>
-                <div class="col row">
-                    <NumInput v-model="form.dualDivHeight" bg-color="input" class="col-left" :min="0" :max="100">
-                        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                            Высота разделителя
-                        </q-tooltip>
-                    </NumInput>
-                </div>
-            </div>
-
-            <div class="sets-item row">
-                <div class="sets-label label">
-                    Пунктир
-                </div>
-                <div class="col row">
-                    <NumInput v-model="form.dualDivStrokeFill" bg-color="input" class="col-left" :min="0" :max="2000">
-                        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                            Заполнение пунктира
-                        </q-tooltip>
-                    </NumInput>
-                    <div class="q-px-sm" />
-                    <NumInput v-model="form.dualDivStrokeGap" bg-color="input" class="col" :min="0" :max="2000">
-                        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                            Промежуток пунктира
-                        </q-tooltip>
-                    </NumInput>
-                </div>
-            </div>
-
-            <div class="sets-item row">
-                <div class="sets-label label">
-                    Ширина тени
-                </div>
-                <div class="col row">
-                    <NumInput v-model="form.dualDivShadowWidth" bg-color="input" class="col-left" :min="0" :max="100" />
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import vueComponent from '../../../../vueComponent.js';
-import NumInput from '../../../../share/NumInput.vue';
-import * as helper from '../helper';
-import defPalette from '../defPalette';
-
-const componentOptions = {
-    components: {
-        NumInput
-    },
-    watch: {
-        form: {
-            handler() {
-                this.formChanged();//no await
-            },
-            deep: true,
-        },
-        dualDivColorFiltered(newValue) {
-            if (!this.isFormChanged && this.helper.isHexColor(newValue))
-                this.form.dualDivColor = newValue;
-        },
-    }
-};
-class Mode {
-    _options = componentOptions;
-    _props = {
-        form: Object,
-    };
-
-    helper = helper;
-    defPalette = defPalette;
-
-    isFormChanged = false;
-    dualDivColorFiltered = '';
-    nightMode = false;
-
-    created() {
-        this.formChanged();//no await
-    }
-
-    mounted() {
-    }
-
-    async formChanged() {
-        this.isFormChanged = true;
-        try {
-            this.dualDivColorFiltered = this.form.dualDivColor;
-
-            if (this.form.dualPageMode 
-                && (this.form.pageChangeAnimation == 'flip' || this.form.pageChangeAnimation == 'rightShift')
-                )
-                this.form.pageChangeAnimation = '';
-
-            this.nightMode = this.form.nightMode;
-        } finally {
-            await this.$nextTick();
-            this.isFormChanged = false;
-        }
-    }
-
-    nightModeToggle() {
-        this.$emit('tab-event', {action: 'night-mode'});
-    }
-}
-
-export default vueComponent(Mode);
-//-----------------------------------------------------------------------------
-</script>
-
-<style scoped>
-.label {
-    width: 110px;
-}
-
-.col-left {
-    width: 145px;
-}
-
-.no-mp {
-    margin: 0;
-    padding: 0;
-}
-</style>

client/components/Reader/SettingsPage/ViewTab/Status.inc

@@ -0,0 +1,64 @@
+<!---------------------------------------------->
+<div class="hidden part-header">Строка статуса</div>
+
+<div class="item row">
+    <div class="label-2">Статус</div>
+    <div class="col row">
+        <q-checkbox v-model="showStatusBar" size="xs" label="Показывать" />
+        <q-checkbox v-show="showStatusBar" class="q-ml-sm" v-model="statusBarTop" size="xs" label="Вверху/внизу" />
+    </div>
+</div>
+
+<div v-show="showStatusBar" class="item row no-wrap">
+    <div class="label-2">Цвет</div>
+    <div class="col-left row">
+        <q-input class="col-left no-mp"
+            outlined dense
+            v-model="statusBarColorFiltered"
+            :rules="['hexColor']"
+            style="max-width: 150px"
+            :disable="statusBarColorAsText"
+        >
+            <template v-slot:prepend>
+                <q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="colorPanStyle('statusbar')">
+                    <q-popup-proxy anchor="bottom middle" self="top middle">
+                        <div>
+                            <q-color v-model="statusBarColor"
+                                no-header default-view="palette" :palette="predefineTextColors"
+                            />
+                        </div>
+                    </q-popup-proxy>
+                </q-icon>
+            </template>
+        </q-input>
+    </div>
+    
+    <div class="q-px-xs"/>
+    <q-checkbox v-model="statusBarColorAsText" size="xs" label="Как у текста"/>
+</div>
+
+<div v-show="showStatusBar" class="item row">
+    <div class="label-2">Прозрачность</div>
+    <div class="col row">
+        <NumInput class="col-left" v-model="statusBarColorAlpha" :min="0" :max="1" :digits="2" :step="0.1"/>
+    </div>
+</div>
+
+<div v-show="showStatusBar" class="item row">
+    <div class="label-2">Высота</div>
+    <div class="col row">
+        <NumInput class="col-left" v-model="statusBarHeight" :min="5" :max="100"/>
+    </div>
+</div>
+
+<div v-show="showStatusBar" class="item row">
+    <div class="label-2"></div>
+    <div class="col row">
+        <q-checkbox v-model="statusBarClickOpen" size="xs" label="Открывать оригинал по клику">
+            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                По клику на автора-название в строке статуса<br>
+                открывать оригинал произведения в новой вкладке
+            </q-tooltip>
+        </q-checkbox>
+    </div>
+</div>

client/components/Reader/SettingsPage/ViewTab/Status/Status.vue

@@ -1,154 +0,0 @@
-<template>
-    <div>
-        <!---------------------------------------------->
-        <div class="hidden sets-part-header">
-            Строка статуса
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Статус
-            </div>
-            <div class="col row">
-                <q-checkbox v-model="form.showStatusBar" size="xs" label="Показывать" />
-                <q-checkbox v-show="form.showStatusBar" v-model="form.statusBarTop" class="q-ml-sm" size="xs" label="Вверху/внизу" />
-            </div>
-        </div>
-
-        <div v-show="form.showStatusBar" class="sets-item row no-wrap">
-            <div class="sets-label label">
-                Цвет
-            </div>
-            <div class="col-left row">
-                <q-input
-                    v-model="statusBarColorFiltered"
-                    class="col-left no-mp"
-                    bg-color="input" 
-                    outlined dense
-                    :rules="['hexColor']"
-                    style="max-width: 150px"
-                    :disable="form.statusBarColorAsText"
-                >
-                    <template #prepend>
-                        <q-icon name="la la-angle-down la-xs" class="cursor-pointer text-white" :style="helper.colorPanStyle(form.statusBarColor)">
-                            <q-popup-proxy anchor="bottom middle" self="top middle">
-                                <div>
-                                    <q-color
-                                        v-model="form.statusBarColor"
-                                        no-header default-view="palette" :palette="defPalette.predefineTextColors"
-                                    />
-                                </div>
-                            </q-popup-proxy>
-                        </q-icon>
-                    </template>
-                </q-input>
-            </div>
-            
-            <div class="q-px-xs" />
-            <q-checkbox v-model="form.statusBarColorAsText" size="xs" label="Как у текста" />
-        </div>
-
-        <div v-show="form.showStatusBar" class="sets-item row">
-            <div class="sets-label label">
-                Прозрачность
-            </div>
-            <div class="col row">
-                <NumInput v-model="form.statusBarColorAlpha" bg-color="input" class="col-left" :min="0" :max="1" :digits="2" :step="0.1" />
-            </div>
-        </div>
-
-        <div v-show="form.showStatusBar" class="sets-item row">
-            <div class="sets-label label">
-                Высота
-            </div>
-            <div class="col row">
-                <NumInput v-model="form.statusBarHeight" bg-color="input" class="col-left" :min="5" :max="100" />
-            </div>
-        </div>
-
-        <div v-show="form.showStatusBar" class="sets-item row">
-            <div class="sets-label label"></div>
-            <div class="col row">
-                <q-checkbox v-model="form.statusBarClickOpen" size="xs" label="Открывать оригинал по клику">
-                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                        По клику на автора-название в строке статуса<br>
-                        открывать оригинал произведения в новой вкладке
-                    </q-tooltip>
-                </q-checkbox>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import vueComponent from '../../../../vueComponent.js';
-import NumInput from '../../../../share/NumInput.vue';
-import * as helper from '../helper';
-import defPalette from '../defPalette';
-
-const componentOptions = {
-    components: {
-        NumInput,
-    },
-    watch: {
-        form: {
-            handler() {
-                this.formChanged();//no await
-            },
-            deep: true,
-        },
-        statusBarColorFiltered(newValue) {
-            if (!this.isFormChanged && this.helper.isHexColor(newValue))
-                this.form.statusBarColor = newValue;
-        },
-    },
-};
-class Text {
-    _options = componentOptions;
-    _props = {
-        form: Object,
-    };
-
-    helper = helper;
-    defPalette = defPalette;
-
-    statusBarColorFiltered = '';
-
-    created() {
-        this.formChanged();//no await
-    }
-
-    mounted() {
-    }
-
-    async formChanged() {
-        this.isFormChanged = true;
-        try {
-            this.statusBarColorFiltered = this.form.statusBarColor;
-        } finally {
-            await this.$nextTick();
-            this.isFormChanged = false;
-        }
-    }
-
-}
-
-export default vueComponent(Text);
-//-----------------------------------------------------------------------------
-</script>
-
-<style scoped>
-.label {
-    width: 110px;
-}
-
-.col-left {
-    width: 145px;
-}
-
-.no-mp {
-    margin: 0;
-    padding: 0;
-}
-</style>

client/components/Reader/SettingsPage/ViewTab/Text.inc

@@ -0,0 +1,127 @@
+<!---------------------------------------------->
+<div class="hidden part-header">Текст</div>
+
+<div class="item row">
+    <div class="label-2">Интервал</div>
+    <div class="col row">
+        <NumInput class="col-left" v-model="lineInterval" :min="0" :max="200"/>
+    </div>
+</div>
+
+<div class="item row">
+    <div class="label-2">Параграф</div>
+    <div class="col row">
+        <NumInput class="col-left" v-model="p" :min="0" :max="2000"/>
+    </div>
+</div>
+
+<div class="item row">
+    <div class="label-2">Сдвиг</div>
+    <div class="col row">
+        <NumInput class="col-left" v-model="textVertShift" :min="-100" :max="100">
+            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                Сдвиг текста по вертикали в процентах от размера шрифта.<br>
+                Отрицательное значение сдвигает вверх, положительное -<br>
+                вниз.
+            </q-tooltip>
+        </NumInput>
+    </div>
+</div>
+
+<div class="item row">
+    <div class="label-2">Скроллинг</div>
+    <div class="col row">
+        <NumInput class="col-left" v-model="scrollingDelay" :min="1" :max="10000">
+            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                Замедление скроллинга в миллисекундах.<br>
+                Определяет время, за которое текст<br>
+                прокручивается на одну строку.
+            </q-tooltip>
+        </NumInput>
+
+        <div class="q-px-sm"/>
+        <q-select class="col" v-model="scrollingType" :options="['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out']"
+            dropdown-icon="la la-angle-down la-sm"
+            outlined dense emit-value map-options
+        >
+            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                Вид скроллинга: линейный,<br>
+                ускорение-замедление и пр.
+            </q-tooltip>
+        </q-select>
+    </div>
+</div>
+
+<div class="item row">
+    <div class="label-2">Выравнивание</div>
+    <div class="col row">
+        <q-checkbox v-model="textAlignJustify" size="xs" label="По ширине" />
+        <q-checkbox class="q-ml-sm" v-model="wordWrap" size="xs" label="Перенос по слогам" />
+    </div>
+</div>
+
+<div class="item row">
+    <div class="label-2"></div>
+    <div class="col-left column justify-center text-right">
+        Компактность
+    </div>
+    <div class="q-px-sm"/>
+    <NumInput class="col" v-model="compactTextPerc" :min="0" :max="100">
+        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+            Степень компактности текста в процентах.<br>
+            Чем больше компактность, тем хуже выравнивание<br>
+            по правому краю.
+        </q-tooltip>
+    </NumInput>
+</div>
+
+<div class="item row">
+    <div class="label-2">Обработка</div>
+    <div class="col row">
+        <q-checkbox v-model="cutEmptyParagraphs" size="xs" label="Убирать пустые строки" />
+    </div>
+</div>
+
+<div class="item row">
+    <div class="label-2"></div>
+    <div class="col-left column justify-center text-right">
+        Добавлять пустые
+    </div>
+    <div class="q-px-sm"/>
+    <NumInput class="col" v-model="addEmptyParagraphs" :min="0" :max="2"/>
+</div>
+
+<div class="item row">
+    <div class="label-2">Изображения</div>
+    <div class="col row">
+        <q-checkbox v-model="showImages" size="xs" label="Показывать" />
+        <q-checkbox class="q-ml-sm" v-model="showInlineImagesInCenter" @input="needReload" :disable="!showImages" size="xs" label="Инлайн в центр">
+            <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                Выносить все изображения в центр экрана
+            </q-tooltip>
+        </q-checkbox>
+    </div>
+</div>
+
+<div class="item row">
+    <div class="label-2"></div>
+    <div class="col row">
+        <q-checkbox v-model="imageFitWidth" size="xs" label="Ширина не более размера страницы" :disable="!showImages || dualPageMode"/>
+    </div>
+</div>
+
+<div class="item row">
+    <div class="label-2"></div>
+    <div class="col-left column justify-center text-right">
+        Высота не более
+    </div>
+    <div class="q-px-sm"/>
+    <NumInput class="col" v-model="imageHeightLines" :min="1" :max="100" :disable="!showImages">
+        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+            Определяет высоту изображения количеством строк.<br>
+            В случае превышения высоты, изображение будет<br>
+            уменьшено с сохранением пропорций так, чтобы<br>
+            помещаться в указанное количество строк.
+        </q-tooltip>
+    </NumInput>
+</div>

client/components/Reader/SettingsPage/ViewTab/Text/Text.vue

@@ -1,210 +0,0 @@
-<template>
-    <div>
-        <!---------------------------------------------->
-        <div class="hidden sets-part-header">
-            Текст
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Интервал
-            </div>
-            <div class="col row">
-                <NumInput v-model="form.lineInterval" bg-color="input" class="col-left" :min="0" :max="200" />
-            </div>
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Параграф
-            </div>
-            <div class="col row">
-                <NumInput v-model="form.p" bg-color="input" class="col-left" :min="0" :max="2000" />
-            </div>
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Сдвиг
-            </div>
-            <div class="col row">
-                <NumInput v-model="form.textVertShift" bg-color="input" class="col-left" :min="-100" :max="100">
-                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                        Сдвиг текста по вертикали в процентах от размера шрифта.<br>
-                        Отрицательное значение сдвигает вверх, положительное -<br>
-                        вниз.
-                    </q-tooltip>
-                </NumInput>
-            </div>
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Скроллинг
-            </div>
-            <div class="col row">
-                <NumInput v-model="form.scrollingDelay" bg-color="input" class="col-left" :min="1" :max="10000">
-                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                        Замедление скроллинга в миллисекундах.<br>
-                        Определяет время, за которое текст<br>
-                        прокручивается на одну строку.
-                    </q-tooltip>
-                </NumInput>
-
-                <div class="q-px-sm" />
-                <q-select
-                    v-model="form.scrollingType" bg-color="input" class="col" :options="['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out']"
-                    dropdown-icon="la la-angle-down la-sm"
-                    outlined dense emit-value map-options
-                >
-                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                        Вид скроллинга: линейный,<br>
-                        ускорение-замедление и пр.
-                    </q-tooltip>
-                </q-select>
-            </div>
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Выравнивание
-            </div>
-            <div class="col row">
-                <q-checkbox v-model="form.textAlignJustify" size="xs" label="По ширине" />
-                <q-checkbox v-model="form.wordWrap" class="q-ml-sm" size="xs" label="Перенос по слогам" />
-            </div>
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label"></div>
-            <div class="col-left column justify-center text-right">
-                Компактность
-            </div>
-            <div class="q-px-sm" />
-            <NumInput v-model="form.compactTextPerc" bg-color="input" class="col" :min="0" :max="100">
-                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                    Степень компактности текста в процентах.<br>
-                    Чем больше компактность, тем хуже выравнивание<br>
-                    по правому краю.
-                </q-tooltip>
-            </NumInput>
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Обработка
-            </div>
-            <div class="col row">
-                <q-checkbox v-model="form.cutEmptyParagraphs" size="xs" label="Убирать пустые строки" />
-            </div>
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label"></div>
-            <div class="col-left column justify-center text-right">
-                Добавлять пустые
-            </div>
-            <div class="q-px-sm" />
-            <NumInput v-model="form.addEmptyParagraphs" bg-color="input" class="col" :min="0" :max="2" />
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label">
-                Изображения
-            </div>
-            <div class="col row">
-                <q-checkbox v-model="form.showImages" size="xs" label="Показывать" />
-                <q-checkbox v-model="form.showInlineImagesInCenter" class="q-ml-sm" :disable="!form.showImages" size="xs" label="Инлайн в центр" @update:modelValue="needReload">
-                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                        Выносить все изображения в центр экрана
-                    </q-tooltip>
-                </q-checkbox>
-            </div>
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label"></div>
-            <div class="col row">
-                <q-checkbox v-model="form.imageFitWidth" size="xs" label="Ширина не более размера страницы" :disable="!form.showImages || form.dualPageMode" />
-            </div>
-        </div>
-
-        <div class="sets-item row">
-            <div class="sets-label label"></div>
-            <div class="col-left column justify-center text-right">
-                Высота не более
-            </div>
-            <div class="q-px-sm" />
-            <NumInput v-model="form.imageHeightLines" bg-color="input" class="col" :min="1" :max="100" :disable="!form.showImages">
-                <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
-                    Определяет высоту изображения количеством строк.<br>
-                    В случае превышения высоты, изображение будет<br>
-                    уменьшено с сохранением пропорций так, чтобы<br>
-                    помещаться в указанное количество строк.
-                </q-tooltip>
-            </NumInput>
-        </div>
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import vueComponent from '../../../../vueComponent.js';
-import NumInput from '../../../../share/NumInput.vue';
-
-const componentOptions = {
-    components: {
-        NumInput,
-    },
-    watch: {
-        form: {
-            handler() {
-                this.formChanged();//no await
-            },
-            deep: true,
-        },
-    },
-};
-class Text {
-    _options = componentOptions;
-    _props = {
-        form: Object,
-    };
-
-    statusBarColorFiltered = '';
-
-    created() {
-        this.formChanged();//no await
-    }
-
-    mounted() {
-    }
-
-    async formChanged() {
-        this.isFormChanged = true;
-        try {
-            //
-        } finally {
-            await this.$nextTick();
-            this.isFormChanged = false;
-        }
-    }
-
-    needReload() {
-        this.$root.notify.warning('Необходимо обновить страницу (F5), чтобы изменения возымели эффект');
-    }
-}
-
-export default vueComponent(Text);
-//-----------------------------------------------------------------------------
-</script>
-
-<style scoped>
-.label {
-    width: 110px;
-}
-
-.col-left {
-    width: 145px;
-}
-</style>

client/components/Reader/SettingsPage/ViewTab/ViewTab.vue

@@ -1,83 +0,0 @@
-<template>
-    <div class="fit column">
-        <q-tabs
-            v-model="selectedTab"
-            active-color="app"
-            active-bg-color="app"
-            indicator-color="bg-app"
-            dense
-            no-caps
-            class="no-mp bg-menu-2 text-menu"
-        >
-            <q-tab name="mode" label="Режим" />
-            <q-tab name="color" label="Цвет" />
-            <q-tab name="font" label="Шрифт" />
-            <q-tab name="text" label="Текст" />
-            <q-tab name="status" label="Строка статуса" />
-        </q-tabs>
-
-        <div class="q-mb-sm" />
-
-        <div class="col sets-tab-panel">
-            <Mode v-if="selectedTab == 'mode'" :form="form" @tab-event="tabEvent" />
-            <Color v-if="selectedTab == 'color'" :form="form" />
-            <Font v-if="selectedTab == 'font'" :form="form" />
-            <Text v-if="selectedTab == 'text'" :form="form" />
-            <Status v-if="selectedTab == 'status'" :form="form" />
-        </div>
-    </div>
-</template>
-
-<script>
-//-----------------------------------------------------------------------------
-import vueComponent from '../../../vueComponent.js';
-
-import Mode from './Mode/Mode.vue';
-import Color from './Color/Color.vue';
-import Font from './Font/Font.vue';
-import Text from './Text/Text.vue';
-import Status from './Status/Status.vue';
-
-const componentOptions = {
-    components: {
-        Mode,
-        Color,
-        Font,
-        Text,
-        Status,
-    },
-};
-class ViewTab {
-    _options = componentOptions;
-    _props = {
-        form: Object,
-    };
-
-    selectedTab = 'mode';
-
-    created() {
-    }
-
-    mounted() {
-    }
-
-    tabEvent(event) {
-        if (!event || !event.action)
-            return;
-
-        switch (event.action) {
-            case 'night-mode': this.$emit('tab-event', {action: 'night-mode'}); break;
-        }
-    }
-}
-
-export default vueComponent(ViewTab);
-//-----------------------------------------------------------------------------
-</script>
-
-<style scoped>
-.label {
-    width: 75px;
-}
-
-</style>

client/components/Reader/SettingsPage/ViewTab/helper.js

@@ -1,9 +0,0 @@
-const hex = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/;
-
-export function colorPanStyle(bgColor) {
-    return `width: 30px; height: 30px; border: 1px solid black; border-radius: 4px; background-color: ${bgColor}`;
-}
-
-export function isHexColor(value) {
-    return hex.test(value);
-}

client/components/Reader/SettingsPage/defPalette.js

@@ -14,32 +14,4 @@ const defPalette = [
     'rgb(255,255,255)', 'rgb(205,205,205)', 'rgb(178,178,178)', 'rgb(153,153,153)', 'rgb(127,127,127)', 'rgb(102,102,102)', 'rgb(76,76,76)', 'rgb(51,51,51)', 'rgb(25,25,25)', 'rgb(0,0,0)'
 ];
 
-export default {
+export default defPalette;
-    predefinePalette: defPalette,
-
-    predefineTextColors: defPalette.concat([
-        '#ffffff',
-        '#000000',
-        '#202020',
-        '#323232',
-        '#aaaaaa',
-        '#00c0c0',
-        '#ebe2c9',
-        '#cfdc99',
-        '#478355',
-        '#909080',
-    ]),
-
-    predefineBackgroundColors: defPalette.concat([
-        '#ffffff',
-        '#000000',
-        '#202020',
-        '#ebe2c9',
-        '#cfdc99',
-        '#478355',
-        '#a6caf0',
-        '#909080',
-        '#808080',
-        '#c8c8c8',
-    ]),
-};

client/components/Reader/TextPage/DrawHelper.js

@@ -14,11 +14,6 @@ export default class DrawHelper {
         return this.context.measureText(text).width;
     }
 
-    measureTextMetrics(text, style) {// eslint-disable-line no-unused-vars
-        this.context.font = this.fontByStyle(style);
-        return this.context.measureText(text);
-    }
-
     measureTextFont(text, font) {// eslint-disable-line no-unused-vars
         this.context.font = font;
         return this.context.measureText(text).width;
@@ -51,22 +46,7 @@ export default class DrawHelper {
             tOpen += (part.style.italic ? '<i>' : '');
             tOpen += (part.style.sup ? '<span style="vertical-align: baseline; position: relative; line-height: 0; top: -0.3em">' : '');
             tOpen += (part.style.sub ? '<span style="vertical-align: baseline; position: relative; line-height: 0; top: 0.3em">' : '');
-            if (part.style.note) {
-                const t = part.text;
-                const m = this.measureTextMetrics(t, part.style);
-                const d = this.fontSize - 1.1*m.fontBoundingBoxAscent;
-                const w = m.width;
-                const size = (this.fontSize > 18 ?  this.fontSize : 18);
-                const pad = size/2;
-                const btnW = (w >= size ? w : size) + pad*2;
-
-                tOpen += `<span style="position: relative;">` +
-                    `<span style="position: absolute; background-color: ${this.textColor}; opacity: 0.1; cursor: pointer; pointer-events: auto; ` +
-                    `height: ${this.fontSize + pad*2}px; padding: ${pad}px; left: -${(btnW - w)/2 - pad*0.05}px; top: -${pad + d}px; width: ${btnW}px; border-radius: ${size}px;" ` +
-                    `onclick="onNoteClickLiberama('${part.style.note.id}', ${part.style.note.orig ? 1 : 0})"><span style="visibility: hidden;" class="dborder">${t}</span></span>`;
-            }
             let tClose = '';
-            tClose += (part.style.note ? '</span>' : '');
             tClose += (part.style.sub ? '</span>' : '');
             tClose += (part.style.sup ? '</span>' : '');
             tClose += (part.style.italic ? '</i>' : '');

client/components/Reader/TextPage/TextPage.vue

@@ -4,30 +4,31 @@
             <div class="absolute" v-html="background"></div>
             <div class="absolute" v-html="pageDivider"></div>
         </div>
-        <div ref="scrollBox1" class="scroll-box layout over-hidden" @wheel.prevent.stop="onMouseWheel">
+        <div ref="scrollBox1" class="layout over-hidden" @wheel.prevent.stop="onMouseWheel">
             <div ref="scrollingPage1" class="layout over-hidden" @transitionend="onPage1TransitionEnd" @animationend="onPage1AnimationEnd">
-                <div @copy.prevent="copyText" v-html="page1"></div>
+                <div v-html="page1"></div>
             </div>
         </div>
-        <div ref="scrollBox2" class="scroll-box layout over-hidden" @wheel.prevent.stop="onMouseWheel">
+        <div ref="scrollBox2" class="layout over-hidden" @wheel.prevent.stop="onMouseWheel">
             <div ref="scrollingPage2" class="layout over-hidden" @transitionend="onPage2TransitionEnd" @animationend="onPage2AnimationEnd">
-                <div @copy.prevent="copyText" v-html="page2"></div>
+                <div v-html="page2"></div>
             </div>
         </div>
-        <div v-show="showStatusBar" ref="statusBar" class="layout" :class="{'no-events': clickControl}">
+        <div v-show="showStatusBar" ref="statusBar" class="layout">
             <div v-html="statusBar"></div>
         </div>
-        <div
+        <div v-show="clickControl" ref="layoutEvents" class="layout events" 
-            v-show="clickControl" ref="layoutEvents" class="layout events" 
             oncontextmenu="return false;"
             @mousedown.prevent.stop="onMouseDown" @mouseup.prevent.stop="onMouseUp"
-            @mouseover.prevent.stop="onMouseEvent" @mouseout.prevent.stop="onMouseEvent" @mousemove.prevent.stop="onMouseEvent"
             @wheel.prevent.stop="onMouseWheel"
             @touchstart.stop="onTouchStart" @touchend.stop="onTouchEnd" @touchmove.stop="onTouchMove" @touchcancel.prevent.stop="onTouchCancel"            
         >
+            <div v-show="showStatusBar && statusBarClickOpen" @mousedown.prevent.stop @touchstart.stop
+                @click.prevent.stop="onStatusBarClick"
+                v-html="statusBarClickable"
+            ></div>
         </div>
-        <div
+        <div v-show="!clickControl && showStatusBar && statusBarClickOpen" class="layout" 
-            v-show="showStatusBar && statusBarClickOpen" class="layout" 
             @mousedown.prevent.stop @touchstart.stop
             @click.prevent.stop="onStatusBarClick"
             v-html="statusBarClickable"
@@ -36,29 +37,6 @@
         <!-- невидимым делать нельзя (display: none), вовремя не подгружаютя шрифты -->
         <canvas ref="offscreenCanvas" class="layout" style="visibility: hidden"></canvas>
         <div ref="measureWidth" style="position: absolute; visibility: hidden"></div>
-
-        <!-- Примечание -->
-        <Dialog ref="dialog1" v-model="noteDialogVisible">
-            <template #header>
-                {{ noteTitle }}
-            </template>
-
-            <div class="column col" style="line-height: 20px; max-width: 400px; max-height: 200px; overflow-x: hidden; overflow-y: auto">
-                <div v-html="noteHtml"></div>
-            </div>
-
-            <template #footer>
-                <div class="row col">
-                    <q-btn class="q-px-md q-mr-md" color="btn2" text-color="app" dense no-caps @click="goToNotes">
-                        В примечания
-                    </q-btn>
-                </div>
-
-                <q-btn class="q-px-md" color="btn2" text-color="app" dense no-caps @click="noteDialogVisible = false">
-                    OK
-                </q-btn>
-            </template>
-        </Dialog>
     </div>
 </template>
 
@@ -68,9 +46,7 @@ import vueComponent from '../../vueComponent.js';
 
 import {loadCSS} from 'fg-loadcss';
 import _ from 'lodash';
-import he from 'he';
 
-import Dialog from '../../share/Dialog.vue';
 import './TextPage.css';
 
 import * as utils from '../../../share/utils';
@@ -82,30 +58,11 @@ import {clickMap} from '../share/clickMap';
 
 const minLayoutWidth = 100;
 
-//обработчик кликов по примечаниям, см. DrawHelper
-//коряво, но иначе придется сильно усложнять рендеринг страниц (через Vue)
-window.onNoteClickLiberama = (noteId, orig) => {
-    const textPage = window.textPageLiberama;
-    if (textPage) {
-        textPage.showNote(noteId, orig);
-    }
-}
-
 const componentOptions = {
-    components: {
-        Dialog
-    },
     watch: {
         bookPos: function() {
             this.$emit('book-pos-changed', {bookPos: this.bookPos, bookPosSeen: this.bookPosSeen});
-
             this.draw();
-
-            if (this.userBookPosChange) {
-                this.$emit('hide-tool-bar', {show: (this.bookPos == 0 || this.bookPos < this.prevBookPos)});
-                this.prevBookPos = this.bookPos;
-                this.userBookPosChange = false;
-            }
         },
         bookPosSeen: function() {
             this.$emit('book-pos-changed', {bookPos: this.bookPos, bookPosSeen: this.bookPosSeen});
@@ -113,6 +70,9 @@ const componentOptions = {
         settings: function() {
             this.debouncedLoadSettings();
         },
+        toggleLayout: function() {
+            this.updateLayout();
+        },
         inAnimation: function() {
             this.updateLayout();
         },
@@ -121,8 +81,8 @@ const componentOptions = {
 class TextPage {
     _options = componentOptions;
 
+    toggleLayout = false;
     showStatusBar = false;
-    statusBarClickOpen = false;
     clickControl = true;
 
     background = null;
@@ -135,8 +95,6 @@ class TextPage {
     lastBook = null;
     bookPos = 0;
     bookPosSeen = null;
-    prevBookPos = 0;
-    userBookPosChange = false;
 
     fontStyle = null;
     fontSize = null;
@@ -147,11 +105,6 @@ class TextPage {
 
     meta = null;
 
-    noteDialogVisible = false;
-    noteId = '';
-    noteTitle = '';
-    noteHtml = '';
-
     created() {
         this.drawHelper = new DrawHelper();
 
@@ -164,6 +117,10 @@ class TextPage {
             this.startClickRepeat(x, y);
         }, 800);
 
+        this.debouncedPrepareNextPage = _.debounce(() => {
+            this.prepareNextPage();
+        }, 100);
+
         this.debouncedDrawStatusBar = _.throttle(() => {
             this.drawStatusBar();
         }, 60);
@@ -177,22 +134,26 @@ class TextPage {
         }, 50);
 
         this.debouncedUpdatePage = _.debounce(async(lines) => {
-            if (this.pageChangeAnimation) {
+            if (!this.pageChangeAnimation)
+                this.toggleLayout = !this.toggleLayout;
+            else {
                 this.page2 = this.page1;
+                this.toggleLayout = true;
             }
 
-            this.page1 = this.drawHelper.drawPage(lines);
+            if (this.toggleLayout)
+                this.page1 = this.drawHelper.drawPage(lines);
+            else
+                this.page2 = this.drawHelper.drawPage(lines);
 
             await this.doPageAnimation();
         }, 10);
 
         this.$root.addEventHook('resize', async() => {
             this.$nextTick(this.onResize);
-            await utils.sleep(200);
+            await utils.sleep(500);
             this.$nextTick(this.onResize);
         });
-
-        window.textPageLiberama = this;
     }
 
     mounted() {
@@ -200,12 +161,7 @@ class TextPage {
     }
 
     hex2rgba(hex, alpha = 1) {
-        let [r, g, b] = [0, 0, 0];
+        const [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16));
-        if (hex.length <= 4) {
-            [r, g, b] = hex.match(/\w/g).map(x => parseInt(x + x, 16));
-        } else {
-            [r, g, b] = hex.match(/\w\w/g).map(x => parseInt(x, 16));
-        }
         return `rgba(${r},${g},${b},${alpha})`;
     }
 
@@ -337,8 +293,6 @@ class TextPage {
             top += this.statusBarHeight*(this.statusBarTop ? 1 : 0);
         let page1 = this.$refs.scrollBox1.style;
         let page2 = this.$refs.scrollBox2.style;
-
-        page1.pointerEvents = page2.pointerEvents = (this.clickControl ? 'none' : 'auto'); 
         
         page1.perspective = page2.perspective = '3072px';
 
@@ -458,6 +412,7 @@ class TextPage {
     showBook() {
         this.$refs.main.focus();
 
+        this.toggleLayout = false;
         this.updateLayout();
         this.book = null;
         this.meta = null;
@@ -475,6 +430,10 @@ class TextPage {
         if (this.lastBook) {
             (async() => {
                 try {
+                    //подождем ленивый парсинг
+                    this.stopLazyParse = true;
+                    while (this.doingLazyParse) await utils.sleep(10);
+
                     const isParsed = await bookManager.hasBookParsed(this.lastBook);
                     if (!isParsed) {
                         return;
@@ -498,6 +457,8 @@ class TextPage {
                     await this.calcPropsAndLoadFonts();
 
                     this.refreshTime();
+                    if (this.lazyParseEnabled)
+                        this.lazyParsePara();
                 } catch (e) {
                     this.$root.stdDialog.alert(e.message, 'Ошибка', {color: 'negative'});
                 }
@@ -509,9 +470,12 @@ class TextPage {
         if (this.inAnimation) {
             this.$refs.scrollBox1.style.visibility = 'visible';
             this.$refs.scrollBox2.style.visibility = 'visible';
-        } else {
+        } else if (this.toggleLayout) {
             this.$refs.scrollBox1.style.visibility = 'visible';
             this.$refs.scrollBox2.style.visibility = 'hidden';
+        } else {
+            this.$refs.scrollBox1.style.visibility = 'hidden';
+            this.$refs.scrollBox2.style.visibility = 'visible';
         }
     }
 
@@ -531,25 +495,12 @@ class TextPage {
     }
 
     async onResize() {
-        if (this.resizing)
-            return;
-        
-        this.resizing = true;
         try {
-            const scrolled = this.doingScrolling;
-            if (scrolled)
-                await this.stopTextScrolling();
-
             this.calcDrawProps();
             this.setBackground();
             this.draw();
-
-            if (scrolled)
-                this.startTextScrolling();
         } catch (e) {
             //
-        } finally {
-            this.resizing = false;
         }
     }
 
@@ -612,25 +563,28 @@ class TextPage {
 
         const transitionFinish = this.generateWaitingFunc('resolveTransition1Finish', 'stopScrolling');
 
+        if (!this.toggleLayout)
+            this.page1 = this.page2;
+        this.toggleLayout = true;
+        await this.$nextTick();
+        await utils.sleep(50);
+
         this.cachedPos = -1;
         this.draw();
 
         const page = this.$refs.scrollingPage1;
         let i = 0;
         while (!this.stopScrolling) {
+                page.style.transition = `${this.scrollingDelay}ms ${this.scrollingType}`;
+                page.style.transform = `translateY(-${this.lineHeight}px)`;
+
                 if (i > 0) {
                     this.doDown();
-                    await utils.sleep(1);
-                    await this.$nextTick();
                     if (this.linesDown.length <= this.pageLineCount + 1) {
                         this.stopScrolling = true;
                     }
                 }
-
-                page.style.transition = `${this.scrollingDelay}ms ${this.scrollingType}`;
-                page.style.transform = `translateY(-${this.lineHeight}px)`;
                 await transitionFinish(this.scrollingDelay);
-
                 page.style.transition = '';
                 page.style.transform = 'none';
                 page.offsetHeight;
@@ -694,20 +648,30 @@ class TextPage {
         }
 
         if (this.book && this.bookPos > 0 && this.bookPos >= this.parsed.textLength) {
-            this.doEnd(true, false);
+            this.doEnd(true);
             return;
         }
 
-        const lines = this.getLines(this.bookPos);
+        //fast draw prepared
-        this.linesDown = lines.linesDown;
+        if (!this.pageChangeAnimation && this.pageChangeDirectionDown && this.pagePrepared && this.bookPos == this.bookPosPrepared) {
-        this.linesUp = lines.linesUp;
+            this.toggleLayout = !this.toggleLayout;
-        this.debouncedUpdatePage(lines.linesDown);
+            this.linesDown = this.linesDownNext;
+            this.linesUp = this.linesUpNext;
+        } else {//normal debounced draw
+            const lines = this.getLines(this.bookPos);
+            this.linesDown = lines.linesDown;
+            this.linesUp = lines.linesUp;
+            this.debouncedUpdatePage(lines.linesDown);
+        }
 
+        this.pagePrepared = false;
+        if (!this.pageChangeAnimation)
+            this.debouncedPrepareNextPage();
         this.debouncedDrawStatusBar();
         this.debouncedDrawPageDividerAndOrnament();
 
         if (this.book && this.linesDown && this.linesDown.length < this.pageLineCount) {
-            this.doEnd(true, false);
+            this.doEnd(true);
             return;
         }
     }
@@ -874,6 +838,36 @@ class TextPage {
         this.drawStatusBar();
     }
 
+    async lazyParsePara() {
+        if (!this.parsed || this.doingLazyParse)
+            return;
+        this.doingLazyParse = true;
+        let j = 0;
+        let k = 0;
+        let prevPerc = 0;
+        this.stopLazyParse = false;
+        for (let i = 0; i < this.parsed.para.length; i++) {
+            j++;
+            if (j > 1) {
+                await utils.sleep(1);
+                j = 0;
+            }
+            if (this.stopLazyParse)
+                break;
+            this.parsed.parsePara(i);
+            k++;
+            if (k > 100) {
+                let perc = Math.round(i/this.parsed.para.length*100);
+                if (perc != prevPerc)
+                    this.drawStatusBar(`Обработка текста ${perc}%`);
+                prevPerc = perc;
+                k = 0;
+            }
+        }
+        this.drawStatusBar();
+        this.doingLazyParse = false;
+    }
+
     async refreshTime() {
         if (!this.timeRefreshing) {
             this.timeRefreshing = true;
@@ -887,16 +881,38 @@ class TextPage {
         }
     }
 
+    prepareNextPage() {
+        // подготовка следующей страницы заранее        
+        if (!this.book || !this.parsed.textLength || !this.linesDown || this.pageLineCount < 1)
+            return;
+        
+        let i = this.pageLineCount;
+        if (this.keepLastToFirst)
+            i--;
+        if (i >= 0 && this.linesDown.length > i) {
+            this.bookPosPrepared = this.linesDown[i].begin;
+            
+            const lines = this.getLines(this.bookPosPrepared);
+            this.linesDownNext = lines.linesDown;
+            this.linesUpNext =  lines.linesUp;
+
+            if (this.toggleLayout)
+                this.page2 = this.drawHelper.drawPage(lines.linesDown);//наоборот
+            else
+                this.page1 = this.drawHelper.drawPage(lines.linesDown);
+
+            this.pagePrepared = true;
+        }
+    }
+
     doDown() {
         if (this.linesDown && this.linesDown.length > this.pageLineCount && this.pageLineCount > 0) {
-            this.userBookPosChange = true;
             this.bookPos = this.linesDown[1].begin;
         }
     }
 
     doUp() {
         if (this.linesUp && this.linesUp.length > 1 && this.pageLineCount > 0) {
-            this.userBookPosChange = true;
             this.bookPos = this.linesUp[1].begin;
         }
     }
@@ -909,7 +925,6 @@ class TextPage {
             if (i >= 0 && this.linesDown.length >= 2*i + (this.keepLastToFirst ? 1 : 0)) {
                 this.currentAnimation = this.pageChangeAnimation;
                 this.pageChangeDirectionDown = true;
-                this.userBookPosChange = true;
                 this.bookPos = this.linesDown[i].begin;
             } else 
                 this.doEnd();
@@ -925,7 +940,6 @@ class TextPage {
             if (i >= 0 && this.linesUp.length > i) {
                 this.currentAnimation = this.pageChangeAnimation;
                 this.pageChangeDirectionDown = false;
-                this.userBookPosChange = true;
                 this.bookPos = this.linesUp[i].begin;
             }
         }
@@ -934,11 +948,10 @@ class TextPage {
     doHome() {
         this.currentAnimation = this.pageChangeAnimation;
         this.pageChangeDirectionDown = false;
-        this.userBookPosChange = true;
         this.bookPos = 0;
     }
 
-    doEnd(noAni, isUser = true) {
+    doEnd(noAni) {
         if (this.parsed.para.length && this.pageLineCount > 0) {
             let i = this.parsed.para.length - 1;
             let lastPos = this.parsed.para[i].offset + this.parsed.para[i].length - 1;
@@ -949,28 +962,11 @@ class TextPage {
                 if (!noAni)
                     this.currentAnimation = this.pageChangeAnimation;
                 this.pageChangeDirectionDown = true;
-                this.userBookPosChange = isUser;
                 this.bookPos = lines[i].begin;
             }
         }
     }
 
-    doPara(paraIndex) {
-        const para = this.parsed.para[paraIndex];
-
-        if (para && this.pageLineCount > 0) {
-            const lines = this.parsed.getLines(para.offset, this.pageLineCount);
-
-            if (lines.length >= this.pageLineCount) {
-                this.currentAnimation = this.pageChangeAnimation;
-                this.pageChangeDirectionDown = true;
-                this.userBookPosChange = true;
-                this.bookPos = lines[0].begin;
-            } else 
-                this.doEnd();
-        }
-    }
-
     doToolBarToggle(event) {
         this.$emit('do-action', {action: 'switchToolbar', event});
     }
@@ -1074,7 +1070,6 @@ class TextPage {
         if (this.startTouch) {
             event.preventDefault();
         }
-        this.endClickRepeat();
     }
 
     onTouchEnd(event) {
@@ -1090,7 +1085,6 @@ class TextPage {
             if (this.startTouch) {
                 const dy = this.startTouch.y - y;
                 const dx = this.startTouch.x - x;
-                this.startTouch = null;
                 const moveDelta = 30;
                 const touchDelta = 15;
                 if (dy > 0 && Math.abs(dy) >= moveDelta && Math.abs(dy) > Math.abs(dx)) {
@@ -1106,23 +1100,10 @@ class TextPage {
                     //движение вправо
                     this.doScrollingSpeedUp();
                 } else if (Math.abs(dy) < touchDelta && Math.abs(dx) < touchDelta) {
-                    if (this.touchMode) {
+                    this.doToolBarToggle(event);
-                        this.touchMode = 2;
-                        return;
-                    }
-
-                    (async() => {
-                        this.touchMode = 1;
-                        let i = 20;
-                        while (i-- > 0 && this.touchMode === 1)
-                            await utils.sleep(10);
-                        if (this.touchMode === 1)
-                            this.doToolBarToggle();
-                        else
-                            this.doFullScreenToggle();
-                        this.touchMode = 0;
-                    })();
                 }
+
+                this.startTouch = null;
             }
         }
     }
@@ -1159,9 +1140,6 @@ class TextPage {
     onMouseWheel(event) {
         if (this.$root.isMobileDevice)
             return;
-
-        this.endClickRepeat();
-        
         if (event.deltaY > 0) {
             this.doDown();
         } else if (event.deltaY < 0) {
@@ -1169,12 +1147,6 @@ class TextPage {
         }
     }
 
-    onMouseEvent() {
-        if (this.$root.isMobileDevice)
-            return;
-        this.endClickRepeat();
-    }
-
     onStatusBarClick() {
         const url = this.meta.url;
         if (url && url.indexOf('disk://') != 0) {
@@ -1229,91 +1201,8 @@ class TextPage {
         }
 
         return action;
-    }
+   }
 
-    copyText(event) {
-        //все это для того, чтобы правильно расставить переносы \n при копировании текста
-        //прямо с текущей страницы
-
-        //подготовка, вытаскиваем весь текст страницы
-        const lines = this.getLines(this.bookPos);
-        const decodedLines = [];
-        for (const line of lines.linesDown) {
-            let lineText = '';
-            for (const part of line.parts) {
-                lineText += part.text;
-            }
-            decodedLines.push({text: he.decode(lineText), first: line.first});
-        }
-
-        let i = 0;
-        const findDecoded = (line) => {
-            for (let j = i; j < decodedLines.length; j++) {
-                const decoded = decodedLines[j];
-                if (decoded.text.indexOf(line) >= 0) {
-                    i = j;
-                    return decoded;
-                }
-            }
-            return;
-        }
-
-        const selection = document.getSelection();
-        const splitted = selection.toString().split(/[\n\r]/);
-        
-        let filtered = '';
-        //формируем filtered, учитывая переносы из decodedLines
-        for (const line of splitted) {
-            const found = findDecoded(line);
-            if (found && found.first) {
-                filtered += (filtered ? '\n' : '') + line;
-            } else {
-                filtered += (filtered ? '\r ' : '') + line;
-            }
-        }
-
-        //маленькие хитрости, убираем переносы по слогам
-        filtered = filtered.replace(/-\r /g, '').replace(/\r /g, ' ');
-
-        event.clipboardData.setData('text/plain', filtered);
-    }
-
-    showNote(noteId, orig) {
-        const note = this.parsed.notes[noteId];
-        if (note) {
-            if (orig) {//show dialog
-                this.noteId = noteId;
-                this.noteTitle = `[${note.title?.trim()}]`;
-                this.noteHtml = note.xml
-                    .replace(/<p>/g, '<p class="note-para">')
-                    .replace(/<stanza>/g, '<br>').replace(/<\/stanza>/g, '')
-                    .replace(/<v>/g, '<p style="margin: 0">').replace(/<\/v>/g, '</p>')
-                    .replace(/<emphasis>/g, '<em>').replace(/<\/emphasis>/g, '</em>')
-                    .replace(/<text-author>/g, '<br>').replace(/<\/text-author>/g, '')
-                ;
-
-                this.noteDialogVisible = true;
-            } else {//go to orig
-                this.goToOrigNote(noteId);
-            }
-        }
-    }
-
-    goToNotes() {
-        const note = this.parsed.notes[this.noteId];
-        if (note && note.noteParaIndex >= 0) {
-            this.doPara(note.noteParaIndex);
-            this.noteDialogVisible = false;
-        }
-    }
-
-    goToOrigNote(noteId) {
-        const note = this.parsed.notes[noteId];
-        if (note && note.linkParaIndex >= 0) {
-            this.doPara(note.linkParaIndex);
-            this.noteDialogVisible = false;
-        }
-    }
 }
 
 export default vueComponent(TextPage);
@@ -1349,18 +1238,8 @@ export default vueComponent(TextPage);
 }
 
 .events {
-    z-index: 9;
+    z-index: 20;
     background-color: rgba(0,0,0,0);
 }
 
-.no-events {
-    pointer-events: none;
-}
 </style>
-<style>
-.note-para {
-    margin: 0;
-    padding: 0;
-    margin-bottom: 10px;
-}
-</style>

client/components/Reader/share/BookParser.js

@@ -3,8 +3,6 @@ import sax from '../../../../server/core/sax';
 import * as utils from '../../../share/utils';
 
 const maxImageLineCount = 100;
-const maxParaLength = 10000;
-const maxParaTextLength = 10000;
 
 // defaults
 const defaultSettings = {
@@ -85,25 +83,17 @@ export default class BookParser {
         let binaryId = '';
         let binaryType = '';
         let dimPromises = [];
-        this.coverPageId = '';
-        this.images = [];
-        let imageNum = 0;
-
-        //примечания
-        this.notes = {};
-        let inNote = false;
-        let noteId = '';
-        let inNotesBody = false;
-        const noteTags = new Set(['p', 'poem', 'stanza', 'v', 'text-author', 'emphasis']);
 
         //оглавление
         this.contents = [];
+        this.images = [];
         let curTitle = {paraIndex: -1, title: '', subtitles: []};
         let curSubtitle = {paraIndex: -1, title: ''};
         let inTitle = false;
         let inSubtitle = false;
         let sectionLevel = 0;
         let bodyIndex = 0;
+        let imageNum = 0;
 
         let paraIndex = -1;
         let paraOffset = 0;
@@ -236,26 +226,13 @@ export default class BookParser {
             paraOffset += len;
         };
 
-        const growParagraph = (text, len, textRaw) => {
+        const growParagraph = (text, len) => {
-            //начальный параграф
             if (paraIndex < 0) {
                 newParagraph();
                 growParagraph(text, len);
                 return;
             }
 
-            //ограничение на размер куска текста в параграфе
-            if (textRaw && textRaw.length > maxParaTextLength) {
-                while (textRaw.length > 0) {
-                    const textPart = textRaw.substring(0, maxParaTextLength);
-                    textRaw = textRaw.substring(maxParaTextLength);
-
-                    newParagraph();
-                    growParagraph(textPart, textPart.length);
-                }
-                return;
-            }
-
             if (inSubtitle) {
                 curSubtitle.title += text;
             } else if (inTitle) {
@@ -263,14 +240,6 @@ export default class BookParser {
             }
 
             const p = para[paraIndex];
-
-            //ограничение на размер параграфа
-            if (p.length > maxParaLength) {
-                newParagraph();
-                growParagraph(text, len);
-                return;
-            }
-
             p.length += len;
             p.text += text;
             paraOffset += len;
@@ -296,8 +265,8 @@ export default class BookParser {
                 if (attrs.href && attrs.href.value) {
                     const href = attrs.href.value;
                     const alt = (attrs.alt && attrs.alt.value ? attrs.alt.value : '');
-                    const {id, local} = this.hrefToId(href);
+                    const {id, local} = this.imageHrefToId(href);
-                    if (local) {//local
+                    if (href[0] == '#') {//local
                         imageNum++;
 
                         if (inPara && !this.sets.showInlineImagesInCenter && !center)
@@ -309,11 +278,6 @@ export default class BookParser {
 
                         if (inPara && this.sets.showInlineImagesInCenter)
                             newParagraph();
-
-                        //coverpage
-                        if (path == '/fictionbook/description/title-info/coverpage/image') {
-                            this.coverPageId = id;
-                        }
                     } else {//external
                         imageNum++;
 
@@ -329,23 +293,6 @@ export default class BookParser {
                 }
             }
 
-            if (tag == 'a') {
-                let attrs = sax.getAttrsSync(tail);
-                if (attrs.href && attrs.href.value && attrs.type && attrs.type.value === 'note') {//note
-                    const href = attrs.href.value;
-                    const {id, local} = this.hrefToId(href);
-
-                    if (local) {
-                        inNote = true;
-                        growParagraph(`<note href="${id}" orig="1">`, 0);
-
-                        if (!this.notes[id]) {
-                            this.notes[id] = {id, linkParaIndex: paraIndex};
-                        }
-                    }
-                }
-            }
-
             if (path == '/fictionbook/description/title-info/author') {
                 if (!fb2.author)
                     fb2.author = [];
@@ -374,11 +321,6 @@ export default class BookParser {
 
             if (path.indexOf('/fictionbook/body') == 0) {
                 if (tag == 'body') {
-                    let attrs = sax.getAttrsSync(tail);
-                    if (attrs.name && attrs.name.value === 'notes') {//notes
-                        inNotesBody = true;
-                    }
-
                     if (isFirstBody && fb2.annotation) {
                         const ann = fb2.annotation.split('<p>').filter(v => v).map(v => utils.removeHtmlTags(v));
                         ann.forEach(a => {
@@ -402,31 +344,6 @@ export default class BookParser {
                     bodyIndex++;
                 }
 
-                if (tag == 'section') {
-                    if (!isFirstSection)
-                        newParagraph();
-                    isFirstSection = false;
-                    sectionLevel++;
-
-                    if (inNotesBody) {
-                        let attrs = sax.getAttrsSync(tail);
-                        if (attrs.id && attrs.id.value) {//notes
-                            const id = attrs.id.value;
-                            let note = this.notes[id];
-                            if (!note) {
-                                note = {id};
-                                this.notes[id] = note;
-                            }
-
-                            note.noteParaIndex = paraIndex;
-                            note.xml = '';
-                            note.title = '';
-                            noteId = id;
-                        }
-
-                    }
-                }
-
                 if (tag == 'title') {
                     newParagraph();
                     isFirstTitlePara = true;
@@ -438,6 +355,13 @@ export default class BookParser {
                     this.contents.push(curTitle);
                 }
 
+                if (tag == 'section') {
+                    if (!isFirstSection)
+                        newParagraph();
+                    isFirstSection = false;
+                    sectionLevel++;
+                }
+
                 if (tag == 'emphasis' || tag == 'strong' || tag == 'sup' || tag == 'sub') {
                     growParagraph(`<${tag}>`, 0);
                 }
@@ -448,10 +372,6 @@ export default class BookParser {
                     if (tag == 'p') {
                         inPara = true;
                         isFirstTitlePara = false;
-
-                        if (inTitle && inNotesBody && noteId) {
-                            growParagraph(`<note href="${noteId}">`, 0);
-                        }
                     }
                 }
 
@@ -485,88 +405,65 @@ export default class BookParser {
                     bold = true;
                     space += 1;
                 }
-
-                if (!inTitle && inNotesBody && noteId && noteTags.has(tag)) {
-                    this.notes[noteId].xml += `<${tag}>`;
-                }
             }
         };
 
         const onEndNode = (elemName) => {// eslint-disable-line no-unused-vars
-            tag = elemName;
+            if (tag == elemName) {
-
+                if (tag == 'binary') {
-            if (tag == 'a' && inNote) {
+                    binaryId = '';
-                growParagraph('</note>', 0);
-                inNote = false;
-            }
-
-            if (tag == 'binary') {
-                binaryId = '';
-            }
-        
-            if (path.indexOf('/fictionbook/body') == 0) {
-                if (tag == 'body') {
-                    inNotesBody = false;
                 }
+            
+                if (path.indexOf('/fictionbook/body') == 0) {
+                    if (tag == 'title') {
+                        isFirstTitlePara = false;
+                        bold = false;
+                        center = false;
+                        inTitle = false;
+                    }
 
-                if (tag == 'title') {
+                    if (tag == 'section') {
-                    isFirstTitlePara = false;
+                        sectionLevel--;
-                    bold = false;
+                    }
-                    center = false;
-                    inTitle = false;
-                }
 
-                if (tag == 'section') {
+                    if (tag == 'emphasis' || tag == 'strong' || tag == 'sup' || tag == 'sub') {
-                    sectionLevel--;
+                        growParagraph(`</${tag}>`, 0);
-                }
+                    }
 
-                if (tag == 'emphasis' || tag == 'strong' || tag == 'sup' || tag == 'sub') {
+                    if (tag == 'p') {
-                    growParagraph(`</${tag}>`, 0);
+                        inPara = false;
-                }
+                    }
 
-                if (tag == 'p') {
+                    if (tag == 'subtitle') {
-                    inPara = false;
+                        isFirstTitlePara = false;
+                        bold = false;
+                        center = false;
+                        inSubtitle = false;
+                    }
 
-                    if (inTitle && inNotesBody && noteId) {
+                    if (tag == 'epigraph' || tag == 'annotation') {
-                        growParagraph('</note>', 0);
+                        italic = false;
+                        space -= 1;
+                        newParagraph();
+                    }
+
+                    if (tag == 'stanza') {
+                        newParagraph();
+                    }
+
+                    if (tag == 'text-author') {
+                        bold = false;
+                        space -= 1;
                     }
                 }
 
-                if (tag == 'subtitle') {
+                path = path.substr(0, path.length - tag.length - 1);
-                    isFirstTitlePara = false;
+                let i = path.lastIndexOf('/');
-                    bold = false;
+                if (i >= 0) {
-                    center = false;
+                    tag = path.substr(i + 1);
-                    inSubtitle = false;
+                } else {
-                }
-
-                if (tag == 'epigraph' || tag == 'annotation') {
-                    italic = false;
-                    space -= 1;
-                    newParagraph();
-                }
-
-                if (tag == 'stanza') {
-                    newParagraph();
-                }
-
-                if (tag == 'text-author') {
-                    bold = false;
-                    space -= 1;
-                }
-
-                if (!inTitle && inNotesBody && noteId && noteTags.has(tag)) {
-                    this.notes[noteId].xml += `</${tag}>`;
-                }
-            }
-
-            let i = path.lastIndexOf(tag);
-            if (i >= 0) {
-                path = path.substring(0, i - 1);
-                i = path.lastIndexOf('/');
-                if (i >= 0)
-                    tag = path.substring(i + 1);
-                else
                     tag = path;
+                }
             }
         };
 
@@ -639,17 +536,9 @@ export default class BookParser {
                 tClose += (center ? '</center>' : '');
 
                 if (text != ' ')
-                    growParagraph(`${tOpen}${text}${tClose}`, text.length, text);
+                    growParagraph(`${tOpen}${text}${tClose}`, text.length);
                 else
                     growParagraph(' ', 1);
-
-                if (inNotesBody && noteId) {
-                    if (inTitle) {
-                        this.notes[noteId].title += text;
-                    } else {
-                        this.notes[noteId].xml += text;
-                    }
-                }
             }
         };
 
@@ -682,7 +571,7 @@ export default class BookParser {
         return {fb2};
     }
 
-    hrefToId(id) {
+    imageHrefToId(id) {
         let local = false;
         if (id[0] == '#') {
             id = id.substr(1);
@@ -715,7 +604,7 @@ export default class BookParser {
 
     splitToStyle(s) {
         let result = [];/*array of {
-            style: {bold: Boolean, italic: Boolean, sup: Boolean, sub: Boolean, center: Boolean, space: Number, note: Object},
+            style: {bold: Boolean, italic: Boolean, sup: Boolean, sub: Boolean, center: Boolean, space: Number},
             image: {local: Boolean, inline: Boolean, id: String},
             text: String,
         }*/
@@ -766,7 +655,7 @@ export default class BookParser {
                 case 'image': {
                     let attrs = sax.getAttrsSync(tail);
                     if (attrs.href && attrs.href.value) {
-                        image = this.hrefToId(attrs.href.value);
+                        image = this.imageHrefToId(attrs.href.value);
                         image.inline = false;
                         image.num = (attrs.num && attrs.num.value ? attrs.num.value : 0);
                     }
@@ -775,7 +664,7 @@ export default class BookParser {
                 case 'image-inline': {
                     let attrs = sax.getAttrsSync(tail);
                     if (attrs.href && attrs.href.value) {
-                        const img = this.hrefToId(attrs.href.value);
+                        const img = this.imageHrefToId(attrs.href.value);
                         img.inline = true;
                         img.num = (attrs.num && attrs.num.value ? attrs.num.value : 0);
                         result.push({
@@ -786,13 +675,6 @@ export default class BookParser {
                     }
                     break;
                 }
-                case 'note': {
-                    let attrs = sax.getAttrsSync(tail);
-                    if (attrs.href && attrs.href.value) {
-                        style.note = {id: attrs.href.value, orig: attrs.orig?.value};
-                    }
-                    break;
-                }
             }
         };
 
@@ -821,9 +703,6 @@ export default class BookParser {
                     break;
                 case 'image-inline':
                     break;
-                case 'note':
-                    style.note = false;
-                    break;
             }
         };
 

client/components/Reader/share/bookManager.js

@@ -1,14 +1,10 @@
 import localForage from 'localforage';
-import path from 'path-browserify';
 import _ from 'lodash';
 
-import BookParser from './BookParser';
-import readerApi from '../../../api/reader';
-import coversStorage from './coversStorage';
 import * as utils from '../../../share/utils';
+import BookParser from './BookParser';
 
 const maxDataSize = 500*1024*1024;//compressed bytes
-const maxRecentLength = 5000;
 
 //локальный кэш метаданных книг, ограничение maxDataSize
 const bmMetaStore = localForage.createInstance({
@@ -21,6 +17,9 @@ const bmDataStore = localForage.createInstance({
 });
 
 //список недавно открытых книг
+const bmRecentStoreOld = localForage.createInstance({
+    name: 'bmRecentStore'
+});
 const bmRecentStoreNew = localForage.createInstance({
     name: 'bmRecentStoreNew'
 });
@@ -40,7 +39,7 @@ class BookManager {
 
         this.saveRecentItem = _.debounce(() => {
             bmRecentStoreNew.setItem('recent-item', this.recentItem);
-            this.recentRev = (this.recentRev < maxRecentLength ? this.recentRev + 1 : 1);
+            this.recentRev = (this.recentRev < 1000 ? this.recentRev + 1 : 1);
             bmRecentStoreNew.setItem('rev', this.recentRev);
         }, 200, {maxWait: 300});
 
@@ -55,9 +54,6 @@ class BookManager {
             if (this.recentItem)
                 this.recent[this.recentItem.key] = this.recentItem;
 
-            //конвертируем в новые ключи
-            await this.convertRecent();
-
             this.recentLastKey = await bmRecentStoreNew.getItem('recent-last-key');
             if (this.recentLastKey) {
                 const meta = await bmMetaStore.getItem(`bmMeta-${this.recentLastKey}`);
@@ -74,40 +70,6 @@ class BookManager {
         this.loadStored();//no await
     }
 
-    //TODO: убрать в 2025г
-    async convertRecent() {
-        const converted = await bmRecentStoreNew.getItem('recent-converted');
-
-        if (converted)
-            return;
-
-        const newRecent = {};
-        for (const book of Object.values(this.recent)) {
-
-            if (!book.path) {
-                continue;
-            }
-
-            const newKey = this.keyFromPath(book.path);
-
-            newRecent[newKey] = _.cloneDeep(book);
-            newRecent[newKey].key = newKey;
-            if (!newRecent[newKey].loadTime)
-                newRecent[newKey].loadTime = newRecent[newKey].addTime;
-        }
-
-        this.recent = newRecent;
-
-        //console.log(converted);
-        (async() => {
-            await utils.sleep(3000);
-            this.saveRecent();
-            this.emit('recent-changed');
-            this.emit('set-recent');
-            await bmRecentStoreNew.setItem('recent-converted', true);
-        })();
-    }
-
     //Ленивая асинхронная загрузка bmMetaStore
     async loadStored() {
         //даем время для загрузки последней читаемой книги, чтобы не блокировать приложение
@@ -234,12 +196,8 @@ class BookManager {
 
     async addBook(newBook, callback) {        
         let meta = {url: newBook.url, path: newBook.path};
-
+        meta.key = this.keyFromUrl(meta.url);
-        if (newBook.downloadSize !== undefined && newBook.downloadSize >= 0)
+        meta.addTime = Date.now();
-            meta.downloadSize = newBook.downloadSize;
-
-        meta.key = this.keyFromPath(meta.path);
-        meta.addTime = Date.now();//время добавления в кеш
 
         const cb = (perc) => {
             const p = Math.round(30*perc/100);
@@ -274,10 +232,10 @@ class BookManager {
     async hasBookParsed(meta) {
         if (!this.books) 
             return false;
-        if (!meta.path)
+        if (!meta.url)
             return false;
         if (!meta.key)
-            meta.key = this.keyFromPath(meta.path);
+            meta.key = this.keyFromUrl(meta.url);
 
         let book = this.books[meta.key];
 
@@ -292,12 +250,8 @@ class BookManager {
 
     async getBook(meta, callback) {
         let result = undefined;
-
-        if (!meta.path)
-            return;
-
         if (!meta.key)
-            meta.key = this.keyFromPath(meta.path);
+            meta.key = this.keyFromUrl(meta.url);
 
         result = this.books[meta.key];
 
@@ -307,6 +261,11 @@ class BookManager {
                 this.books[meta.key] = result;
         }
 
+        //Если файл на сервере изменился, считаем, что в кеше его нету
+        if (meta.path && result && meta.path != result.path) {
+            return;
+        }
+
         if (result && !result.parsed) {
             let data = await bmDataStore.getItem(`bmData-${meta.key}`);
             callback(5);
@@ -351,38 +310,9 @@ class BookManager {
         const parsed = new BookParser(this.settings);
 
         const parsedMeta = await parsed.parse(data, callback);
-
-        //cover page
-        let coverPageUrl = '';
-        if (parsed.coverPageId && parsed.binary[parsed.coverPageId]) {
-            const bin = parsed.binary[parsed.coverPageId];
-            let dataUrl = `data:${bin.type};base64,${bin.data}`;
-            try {
-                dataUrl = await utils.resizeImage(dataUrl, 160, 160, 0.94);
-            } catch (e) {
-                console.error(e);
-            }
-
-            coverPageUrl = readerApi.makeUrlFromBuf(dataUrl);
-
-            //далее асинхронно 
-            (async() => {
-                //отправим dataUrl на сервер в /upload
-                try {
-                    await readerApi.uploadFileBuf(dataUrl, coverPageUrl);
-                } catch (e) {
-                    console.error(e);
-                }
-
-                //сохраним в storage
-                await coversStorage.setData(coverPageUrl, dataUrl);
-            })();
-        }
-
         const result = Object.assign({}, meta, parsedMeta, {
             length: data.length,
             textLength: parsed.textLength,
-            coverPageUrl,
             parsed
         });
 
@@ -395,20 +325,10 @@ class BookManager {
         return result;
     }
 
-    /*keyFromUrl(url) {
+    keyFromUrl(url) {
         return utils.stringToHex(url);
-    }*/
-
-    keyFromPath(bookPath) {
-        return path.basename(bookPath);
     }
 
-    keysEqual(bookPath1, bookPath2) {
-        if (bookPath1 === undefined || bookPath2 === undefined)
-            return false;
-        
-        return (this.keyFromPath(bookPath1) === this.keyFromPath(bookPath2));
-    }
     //-- recent --------------------------------------------------------------
     async recentSetItem(item = null, skipCheck = false) {
         const rev = await bmRecentStoreNew.getItem('rev');
@@ -449,10 +369,7 @@ class BookManager {
 
     async setRecentBook(value) {
         let result = this.metaOnly(value);
-        result.touchTime = Date.now();//время последнего чтения
+        result.touchTime = Date.now();
-        if (!result.loadTime)
-            result.loadTime = Date.now();//время загрузки файла
-
         result.deleted = 0;
 
         if (this.recent[result.key]) {
@@ -467,10 +384,10 @@ class BookManager {
     async getRecentBook(value) {
         return this.recent[value.key];
     }
-/*
+
-    async delRecentBook(value, delFlag = 1) {
+    async delRecentBook(value) {
         const item = this.recent[value.key];
-        item.deleted = delFlag;
+        item.deleted = 1;
 
         if (this.recentLastKey == value.key) {
             await this.recentSetLastKey(null);
@@ -479,68 +396,12 @@ class BookManager {
         await this.recentSetItem(item);
         this.emit('recent-deleted', value.key);
     }
-*/
-    async delRecentBooks(values, delFlag = 1) {
-        for (const value of values) {
-            const item = this.recent[value.key];
-            item.deleted = delFlag;
-
-            if (this.recentLastKey == value.key) {
-                await this.recentSetLastKey(null);
-            }
-
-            await this.recentSetItem(item);
-        }
-        
-        this.emit('recent-deleted');
-    }
-/*
-    async restoreRecentBook(value) {
-        const item = this.recent[value.key];
-        item.deleted = 0;
-
-        await this.recentSetItem(item);
-    }
-*/
-    async restoreRecentBooks(values) {
-        for (const value of values) {
-            const item = this.recent[value.key];
-            item.deleted = 0;
-
-            await this.recentSetItem(item);
-        }
-    }
-
-    async setCheckBuc(value, checkBuc) {
-        const item = this.recent[value.key];
-
-        const updateItems = [];
-        if (item) {
-            if (item.sameBookKey !== undefined) {
-                const sorted = this.getSortedRecent();
-                for (const book of sorted) {
-                    if (!book.deleted && book.sameBookKey === item.sameBookKey)
-                        updateItems.push(book);
-                }
-            } else {
-                updateItems.push(item);
-            }
-        }
-
-        const now = Date.now();
-        for (const book of updateItems) {
-            book.checkBuc = checkBuc;
-            if (checkBuc)
-                book.checkBucTime = now;
-            await this.recentSetItem(book);
-        }
-    }
 
     async cleanRecentBooks() {
         const sorted = this.getSortedRecent();
 
         let isDel = false;
-        for (let i = maxRecentLength; i < sorted.length; i++) {
+        for (let i = 1000; i < sorted.length; i++) {
             delete this.recent[sorted[i].key];
             isDel = true;
         }
@@ -560,7 +421,7 @@ class BookManager {
 
         let max = 0;
         let result = null;
-        for (const key in this.recent) {
+        for (let key in this.recent) {
             const book = this.recent[key];
             if (!book.deleted && book.touchTime > max) {
                 max = book.touchTime;
@@ -591,43 +452,6 @@ class BookManager {
         return result;
     }
 
-    findRecentByUrlAndPath(url, bookPath) {
-        if (bookPath) {
-            const key = this.keyFromPath(bookPath);
-            const book = this.recent[key];
-            if (book && !book.deleted)
-                return book;
-        }
-
-        let max = 0;
-        let result = null;
-
-        for (const key in this.recent) {
-            const book = this.recent[key];
-            if (!book.deleted && book.url == url && book.loadTime > max) {
-                max = book.loadTime;
-                result = book;
-            }
-        }
-
-        return result;
-    }
-
-    findRecentBySameBookKey(sameKey) {
-        let max = 0;
-        let result = null;
-
-        for (const key in this.recent) {
-            const book = this.recent[key];
-            if (!book.deleted && book.sameBookKey == sameKey && book.loadTime > max) {
-                max = book.loadTime;
-                result = book;
-            }
-        }
-
-        return result;
-    }
-
     async setRecent(value) {
         const mergedRecent = _.cloneDeep(this.recent);
 

client/components/Reader/share/coversStorage.js

@@ -1,61 +0,0 @@
-import localForage from 'localforage';
-//import _ from 'lodash';
-import * as utils from '../../../share/utils';
-
-const maxDataSize = 100*1024*1024;
-
-const coversStore = localForage.createInstance({
-    name: 'coversStorage'
-});
-
-class CoversStorage {
-    constructor() {
-    }
-
-    async init() {
-        this.cleanCovers(); //no await
-    }
-
-    async setData(key, data) {
-        await coversStore.setItem(key, {addTime: Date.now(), data});
-    }
-
-    async getData(key) {
-        const item = await coversStore.getItem(key);
-        return (item ? item.data : undefined);
-    }
-
-    async removeData(key) {
-        await coversStore.removeItem(key);
-    }
-
-    async cleanCovers() {
-        await utils.sleep(10000);
-
-        while (1) {// eslint-disable-line no-constant-condition
-            let size = 0;
-            let min = Date.now();
-            let toDel = null;
-            for (const key of (await coversStore.keys())) {
-                const item = await coversStore.getItem(key);
-
-                size += item.data.length;
-
-                if (item.addTime < min) {
-                    toDel = key;
-                    min = item.addTime;
-                }
-            }
-
-
-            if (size > maxDataSize && toDel) {
-                await this.removeData(toDel);
-            } else {
-                break;
-            }
-        }
-    }
-
-}
-
-export default new CoversStorage();

client/components/Reader/share/wallpaperStorage.js

@@ -32,10 +32,6 @@ class WallpaperStorage {
         this.cachedKeys = await wpStore.keys();
     }
 
-    async getKeys() {
-        return await wpStore.keys();
-    }
-
     keyExists(key) {//не асинхронная
         return this.cachedKeys.includes(key);
     }

client/components/Reader/versionHistory.js

@@ -1,254 +1,8 @@
 export const versionHistory = [
 {
-    version: '1.2.8',
+    version: '0.11.4',
-    releaseDate: '2025-06-04',
+    releaseDate: '2022-04-14',
-    showUntil: '2025-06-03',
+    showUntil: '2022-04-13',
-    content:
-`
-<ul>
-    <li>исправление багов</li>
-</ul>
-
-`
-},
-
-{
-    version: '1.2.7',
-    releaseDate: '2025-02-22',
-    showUntil: '2025-02-21',
-    content:
-`
-<ul>
-    <li>отключена форма для сбора донатов</li>
-    <li>мелкие оптимизации</li>
-</ul>
-
-`
-},
-
-{
-    version: '1.2.6',
-    releaseDate: '2024-10-03',
-    showUntil: '2024-10-02',
-    content:
-`
-<ul>
-    <li>исправления из-за нарушения авторских прав</li>
-</ul>
-
-`
-},
-
-{
-    version: '1.2.4',
-    releaseDate: '2024-08-27',
-    showUntil: '2024-08-26',
-    content:
-`
-<ul>
-    <li>исправление багов</li>
-</ul>
-
-`
-},
-
-{
-    version: '1.2.3',
-    releaseDate: '2024-08-02',
-    showUntil: '2024-08-01',
-    content:
-`
-<ul>
-    <li>исправление багов</li>
-</ul>
-
-`
-},
-
-{
-    version: '1.2.2',
-    releaseDate: '2024-07-28',
-    showUntil: '2024-07-27',
-    content:
-`
-<ul>
-    <li>добавлено отображение примечаний на месте, по клику на сноске (#50)</li>
-    <li>исправление багов</li>
-</ul>
-
-`
-},
-
-{
-    version: '1.2.0',
-    releaseDate: '2024-03-25',
-    showUntil: '2024-03-24',
-    content:
-`
-<ul>
-    <li>в списке загруженных, книга в архив (из архива) переносится теперь со всей группой своих версий</li>
-    <li>добавлена возможность задавать в конфиге любую ссылку для кнопки "Сетевая библиотека", параметр networkLibraryLink (#47)</li>
-</ul>
-
-`
-},
-
-{
-    version: '1.1.3',
-    releaseDate: '2023-02-06',
-    showUntil: '2023-02-05',
-    content:
-`
-<ul>
-    <li>исправление багов</li>
-</ul>
-
-`
-},
-
-{
-    version: '1.1.2',
-    releaseDate: '2023-01-22',
-    showUntil: '2023-01-21',
-    content:
-`
-<ul>
-    <li>исправление багов</li>
-</ul>
-
-`
-},
-
-{
-    version: '1.1.1',
-    releaseDate: '2023-01-11',
-    showUntil: '2023-01-15',
-    content:
-`
-<ul>
-    <li>добавлена опция "Ночной режим" и кнопка на панель</li>
-    <li>исправление багов</li>
-</ul>
-
-`
-},
-
-{
-    version: '1.0.0',
-    releaseDate: '2022-12-18',
-    showUntil: '2022-12-25',
-    content:
-`
-<ul>
-    <li>на мобильных устройствах переход в полноэкранный режим теперь возможен через двойной тап по центру</li>
-    <li>добавлено окно "Сетевая библиотека" для omnireader.ru</li>
-    <li>улучшена работа синхронизации с сервером при плохом качестве связи</li>
-    <li>добавлена сборка релизов читалки: <a href="https://github.com/bookpauk/liberama/releases" target="_blank">https://github.com/bookpauk/liberama/releases</a></li>
-</ul>
-
-`
-},
-
-{
-    version: '0.12.2',
-    releaseDate: '2022-09-04',
-    showUntil: '2022-09-11',
-    content:
-`
-<ul>
-    <li>исправлен баг с формой для доната, показывалась каждый день, а не каждый месяц</li>
-    <li>автор приносит извинения за доставленные неудобства</li>
-</ul>
-
-`
-},
-
-{
-    version: '0.12.1',
-    releaseDate: '2022-09-01',
-    showUntil: '2022-08-30',
-    content:
-`
-<ul>
-    <li>добавлена форма для доната</li>
-    <li>исправления багов</li>
-</ul>
-
-`
-},
-
-{
-    version: '0.12.0',
-    releaseDate: '2022-07-27',
-    showUntil: '2022-08-03',
-    content:
-`
-<ul>
-    <li>запущен сервер проверки обновлений книг:</li>
-        <ul>
-            <li>проверка обновления той или иной книги настраивается в списке загруженных (чекбокс)</li>
-            <li>для того, чтобы чекбокс появился у ранее загруженной, необходимо принудительно обновить книгу</li>
-            <li>в настройках можно указать разницу размеров, при которой требуется делать уведомление</li>
-        </ul>
-</ul>
-
-`
-},
-
-{
-    version: '0.11.8',
-    releaseDate: '2022-07-14',
-    showUntil: '2022-07-13',
-    content:
-`
-<ul>
-    <li>добавлено отображение и синхронизация обложек в окне загруженных книг</li>
-    <li>добавлена синхронизация обоев</li>
-</ul>
-
-`
-},
-
-{
-    version: '0.11.7',
-    releaseDate: '2022-07-12',
-    showUntil: '2022-07-19',
-    content:
-`
-<ul>
-    <li>добавлено автосокрытие панели управления при листании, отключается в настройках</li>
-    <li>изменения в окне загруженных книг:</li>
-        <ul>
-            <li>добавлена группировка по версиям файла одной и той же книги</li>
-            <li>группировка происходит по имени загружаемого файла, либо по URL книги</li>
-            <li>добавлены различные методы сортировки списка загруженных книг</li>
-            <li>нумерация всегда осуществляется по времени загрузки</li>
-        </ul>
-    <li>незначительные общие изменения интерфейса, приведение к единому стилю</li>
-    <li>исправления багов</li>
-</ul>
-
-`
-},
-
-{
-    version: '0.11.6',
-    releaseDate: '2022-07-02',
-    showUntil: '2022-07-01',
-    content:
-`
-<ul>
-    <li>улучшено копирование текста прямо со страницы, для переводчиков</li>
-    <li>актуализация используемых пакетов</li>
-</ul>
-
-`
-},
-
-{
-    version: '0.11.5',
-    releaseDate: '2022-04-15',
-    showUntil: '2022-04-14',
     content:
 `
 <ul>
@@ -259,6 +13,32 @@ export const versionHistory = [
 `
 },
 
+{
+    version: '0.11.3',
+    releaseDate: '2022-03-29',
+    showUntil: '2022-03-28',
+    content:
+`
+<ul>
+    <li>исправления багов</li>
+</ul>
+
+`
+},
+
+{
+    version: '0.11.2',
+    releaseDate: '2022-01-11',
+    showUntil: '2022-01-10',
+    content:
+`
+<ul>
+    <li>исправления багов</li>
+</ul>
+
+`
+},
+
 {
     version: '0.11.1',
     releaseDate: '2021-12-03',

client/components/Settings/Settings.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        Раздел Settings в разработке
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../vueComponent.js';
+
+class Settings {
+    created() {
+    }
+
+}
+
+export default vueComponent(Settings);
+//-----------------------------------------------------------------------------
+</script>

client/components/Sources/Sources.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        Раздел Sources в разработке
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import vueComponent from '../vueComponent.js';
+
+class Sources {
+    created() {
+    }
+
+}
+
+export default vueComponent(Sources);
+//-----------------------------------------------------------------------------
+</script>

client/components/share/Dialog.vue

@@ -1,6 +1,6 @@
 <template>
     <q-dialog v-model="active" no-route-dismiss @show="onShow" @hide="onHide">
-        <div class="column bg-dialog no-wrap">
+        <div class="column bg-white no-wrap">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
                     <slot name="header"></slot>

client/components/share/Notify.vue

@@ -29,7 +29,7 @@ class Notify {
             html: true,
 
             message: 
-                `<div style="max-width: 350px">
+                `<div style="max-width: 350px;">
                     ${caption}
                     <div style="color: ${messageColor}; overflow-wrap: break-word; word-wrap: break-word;">${message}</div>
                 </div>`

client/components/share/NumInput.vue

@@ -4,28 +4,17 @@
         outlined dense
         input-style="text-align: center"
         class="no-mp"
+        :class="(error ? 'error' : '')"
         :disable="disable"
-        :mask="mask"
-        :error="error"
     >
         <slot></slot>
         <template #prepend>
-            <q-icon
-                v-show="mmButtons"
-                v-ripple="modelValue != min" 
-                style="font-size: 100%"
-                :class="(modelValue != min ? '' : 'disable')" 
-                name="la la-angle-double-left" 
-                class="button" 
-                @click="toMin"
-            />
-
             <q-icon
                 v-ripple="validate(modelValue - step)" 
                 :class="(validate(modelValue - step) ? '' : 'disable')" 
-                :name="minusIcon" 
+                name="la la-minus-circle" 
                 class="button" 
-                @click="onClick('minus')"
+                @click="minus"
                 @mousedown.prevent.stop="onMouseDown($event, 'minus')"
                 @mouseup.prevent.stop="onMouseUp"
                 @mouseout.prevent.stop="onMouseUp"
@@ -38,9 +27,9 @@
             <q-icon
                 v-ripple="validate(modelValue + step)"
                 :class="(validate(modelValue + step) ? '' : 'disable')"
-                :name="plusIcon"
+                name="la la-plus-circle"
                 class="button"
-                @click="onClick('plus')"
+                @click="plus"
                 @mousedown.prevent.stop="onMouseDown($event, 'plus')"
                 @mouseup.prevent.stop="onMouseUp"
                 @mouseout.prevent.stop="onMouseUp"
@@ -48,16 +37,6 @@
                 @touchend.stop="onTouchEnd"
                 @touchcancel.prevent.stop="onTouchEnd"
             />
-
-            <q-icon
-                v-show="mmButtons"
-                v-ripple="modelValue != max" 
-                style="font-size: 100%"
-                :class="(modelValue != max ? '' : 'disable')" 
-                name="la la-angle-double-right" 
-                class="button" 
-                @click="toMax"
-            />
         </template>
     </q-input>
 </template>
@@ -70,18 +49,17 @@ import * as utils from '../../share/utils';
 
 const componentOptions = {
     watch: {
-        filteredValue() {
+        filteredValue: function(newValue) {
-            this.checkErrorAndEmit(true);
+            if (this.validate(newValue)) {
+                this.error = false;
+                this.$emit('update:modelValue', this.string2number(newValue));
+            } else {
+                this.error = true;
+            }
         },
-        modelValue(newValue) {
+        modelValue: function(newValue) {
             this.filteredValue = newValue;
         },
-        min() {
-            this.checkErrorAndEmit();
-        },
-        max() {
-            this.checkErrorAndEmit();
-        }
     }
 };
 class NumInput {
@@ -92,11 +70,7 @@ class NumInput {
         max: { type: Number, default: Number.MAX_VALUE },
         step: { type: Number, default: 1 },
         digits: { type: Number, default: 0 },
-        disable: Boolean,
+        disable: Boolean
-        minusIcon: {type: String, default: 'la la-minus-circle'},
-        plusIcon: {type: String, default: 'la la-plus-circle'},
-        mmButtons: Boolean,
-        mask: String,
     };
 
     filteredValue = 0;
@@ -121,16 +95,6 @@ class NumInput {
         return true;
     }
 
-    checkErrorAndEmit(emit = false) {
-        if (this.validate(this.filteredValue)) {
-            this.error = false;
-            if (emit)
-                this.$emit('update:modelValue', this.string2number(this.filteredValue));
-        } else {
-            this.error = true;
-        }
-    }
-
     plus() {
         const newValue = this.modelValue + this.step;
         if (this.validate(newValue))
@@ -143,42 +107,23 @@ class NumInput {
             this.filteredValue = newValue;
     }
 
-    onClick(way) {
-        if (this.clickRepeat)
-            return;
-
-        if (way == 'plus') {
-            this.plus();
-        } else {
-            this.minus();
-        }
-    }
-
     onMouseDown(event, way) {
         this.startClickRepeat = true;
         this.clickRepeat = false;
 
         if (event.button == 0) {
             (async() => {
-                if (this.inRepeatFunc)
+                await utils.sleep(300);
-                    return;
+                if (this.startClickRepeat) {
-
+                    this.clickRepeat = true;
-                this.inRepeatFunc = true;
+                    while (this.clickRepeat) {
-                try {
+                        if (way == 'plus') {
-                    await utils.sleep(300);
+                            this.plus();
-                    if (this.startClickRepeat) {
+                        } else {
-                        this.clickRepeat = true;
+                            this.minus();
-                        while (this.clickRepeat) {
-                            if (way == 'plus') {
-                                this.plus();
-                            } else {
-                                this.minus();
-                            }
-                            await utils.sleep(100);
                         }
+                        await utils.sleep(50);
                     }
-                } finally {
-                    this.inRepeatFunc = false;
                 }
             })();
         }
@@ -188,12 +133,7 @@ class NumInput {
         if (this.inTouch)
             return;
         this.startClickRepeat = false;
-        if (this.clickRepeat) {
+        this.clickRepeat = false;
-            (async() => {
-                await utils.sleep(50);
-                this.clickRepeat = false;
-            })();
-        }
     }
 
     onTouchStart(event, way) {
@@ -211,14 +151,6 @@ class NumInput {
         this.inTouch = false;
         this.onMouseUp();
     }
-
-    toMin() {
-        this.filteredValue = this.min;
-    }
-
-    toMax() {
-        this.filteredValue = this.max;
-    }
 }
 
 export default vueComponent(NumInput);
@@ -233,19 +165,24 @@ export default vueComponent(NumInput);
 
 .button {
     font-size: 130%;
-    border-radius: 15px;
+    border-radius: 20px;
-    width: 30px;
+    color: #bbb;
-    height: 30px;
-    color: var(--text-ubtn-color);
     cursor: pointer;
 }
 
 .button:hover {
-    filter: invert(100%);
+    color: #616161;
+    background-color: #efebe9;
+}
+
+.error {
+    background-color: #ffabab;
+    border-radius: 3px;
 }
 
 .disable, .disable:hover {
     cursor: not-allowed;
-    filter: invert(0%);
+    color: #bbb;
+    background-color: white;
 }
 </style>

client/components/share/StdDialog.vue

@@ -3,7 +3,7 @@
         <slot></slot>
 
         <!--------------------------------------------------->
-        <div v-show="type == 'alert'" class="bg-dialog no-wrap">
+        <div v-show="type == 'alert'" class="bg-white no-wrap">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
                     <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" :name="iconName" size="28px"></q-icon>
@@ -28,7 +28,7 @@
         </div>
 
         <!--------------------------------------------------->
-        <div v-show="type == 'confirm'" class="bg-dialog no-wrap">
+        <div v-show="type == 'confirm'" class="bg-white no-wrap">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
                     <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" :name="iconName" size="28px"></q-icon>
@@ -56,35 +56,7 @@
         </div>
 
         <!--------------------------------------------------->
-        <div v-show="type == 'askYesNo'" class="bg-dialog no-wrap">
+        <div v-show="type == 'prompt'" class="bg-white no-wrap">
-            <div class="header row">
-                <div class="caption col row items-center q-ml-md">
-                    <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" :name="iconName" size="28px"></q-icon>
-                    <div v-html="caption"></div>
-                </div>
-                <div class="close-icon column justify-center items-center">
-                    <q-btn v-close-popup flat round dense>
-                        <q-icon name="la la-times" size="18px"></q-icon>
-                    </q-btn>
-                </div>
-            </div>
-
-            <div class="q-mx-md">
-                <div v-html="message"></div>
-            </div>
-
-            <div class="buttons row justify-end q-pa-md">
-                <q-btn v-close-popup class="q-px-md q-ml-sm" dense no-caps>
-                    Нет
-                </q-btn>
-                <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick">
-                    Да
-                </q-btn>
-            </div>
-        </div>
-
-        <!--------------------------------------------------->
-        <div v-show="type == 'prompt'" class="bg-dialog no-wrap">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
                     <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" :name="iconName" size="28px"></q-icon>
@@ -116,7 +88,7 @@
         </div>
 
         <!--------------------------------------------------->
-        <div v-show="type == 'hotKey'" class="bg-dialog no-wrap">
+        <div v-show="type == 'hotKey'" class="bg-white no-wrap">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
                     <q-icon v-show="caption" class="q-mr-sm" :class="iconColor" :name="iconName" size="28px"></q-icon>
@@ -290,23 +262,6 @@ class StdDialog {
         });
     }
 
-    askYesNo(message, caption, opts) {
-        return new Promise((resolve) => {
-            this.init(message, caption, opts);
-
-            this.hideTrigger = () => {
-                if (this.ok) {
-                    resolve(true);
-                } else {
-                    resolve(false);
-                }
-            };
-
-            this.type = 'askYesNo';
-            this.active = true;
-        });
-    }
-
     prompt(message, caption, opts) {
         return new Promise((resolve) => {
             this.enableValidator = false;

client/components/share/Window.vue

@@ -10,9 +10,7 @@
                     @touchend.stop="onTouchEnd"
                     @touchmove.stop="onTouchMove"
                 >
-                    <div class="header-text col" style="width: 0">
+                    <span class="header-text col"><slot name="header"></slot></span>
-                        <slot name="header"></slot>
-                    </div>
                     <slot name="buttons"></slot>
                     <span class="close-button row justify-center items-center" @mousedown.stop @click="close"><q-icon name="la la-times" size="16px" /></span>
                 </div>
@@ -148,14 +146,14 @@ export default vueComponent(Window);
 
 .window {
     margin: 10px;
-    background-color: var(--bg-app-color);
+    background-color: #ffffff;
-    border: 3px double var(--text-app-color);
+    border: 3px double black;
     border-radius: 4px;
     box-shadow: 3px 3px 5px black;
 }
 
 .header {
-    background: linear-gradient(to bottom right, var(--bg-header-color1), var(--bg-header-color2));
+    background: linear-gradient(to bottom right, green, #59B04F);
     align-items: center;
     height: 30px;
 }
@@ -163,8 +161,8 @@ export default vueComponent(Window);
 .header-text {
     margin-left: 10px;
     margin-right: 10px;
-    color: #FFFFA0;
+    color: yellow;
-    text-shadow: 2px 2px 5px #005000, 2px 1px 5px #005000;
+    text-shadow: 2px 1px 5px black, 2px 2px 5px black;
     overflow: hidden;
     white-space: nowrap;
 }
@@ -176,8 +174,7 @@ export default vueComponent(Window);
 }
 
 .close-button:hover {
-    color: white;
+    background-color: #69C05F;
-    background-color: #FF3030;
 }
 
-</style>
+</style>

client/components/vueComponent.js

@@ -17,7 +17,7 @@ export default function(componentClass) {
                     }
                 }
             } else if (prop === '_props') {
-                comp.props = obj[prop];
+                comp['props'] = obj[prop];
             }
         } else {//usual prop
             data[prop] = obj[prop];
@@ -26,32 +26,23 @@ export default function(componentClass) {
     comp.data = () => _.cloneDeep(data);
     
     //methods
+    const classProto = Object.getPrototypeOf(obj);
+    const classMethods = Object.getOwnPropertyNames(classProto);
     const methods = {};
     const computed = {};
-
+    for (const method of classMethods) {
-    let classProto = Object.getPrototypeOf(obj);
+        const desc = Object.getOwnPropertyDescriptor(classProto, method);
-    while (classProto) {
+        if (desc.get) {//has getter, computed
-        const classMethods = Object.getOwnPropertyNames(classProto);
+            computed[method] = {get: desc.get};
-        for (const method of classMethods) {
+            if (desc.set)
-            const desc = Object.getOwnPropertyDescriptor(classProto, method);
+                computed[method].set = desc.set;
-            if (desc.get) {//has getter, computed
+        } else if ( ['beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'activated',//life cycle hooks
-                if (!computed[method]) {
+                    'deactivated', 'beforeUnmount', 'unmounted', 'errorCaptured', 'renderTracked', 'renderTriggered',//life cycle hooks
-                    computed[method] = {get: desc.get};
+                    'setup'].includes(method) ) {
-                    if (desc.set)
+            comp[method] = obj[method];
-                        computed[method].set = desc.set;
+        } else if (method !== 'constructor') {//usual
-                }
+            methods[method] = obj[method];
-            } else if ( ['beforeCreate', 'created', 'beforeMount', 'mounted', 'beforeUpdate', 'updated', 'activated',
-                        'deactivated', 'beforeUnmount', 'unmounted', 'errorCaptured', 'renderTracked', 'renderTriggered',
-                        'setup'].includes(method) ) {//life cycle hooks
-                if (!comp[method])
-                    comp[method] = obj[method];
-            } else if (method !== 'constructor') {//usual
-                if (!methods[method])
-                    methods[method] = obj[method];
-            }
         }
-
-        classProto = Object.getPrototypeOf(classProto);
     }
     comp.methods = methods;
     comp.computed = computed;

client/quasar.js

@@ -32,8 +32,6 @@ import {QPopupProxy} from 'quasar/src/components/popup-proxy';
 import {QDialog} from 'quasar/src/components/dialog';
 import {QChip} from 'quasar/src/components/chip';
 import {QTree} from 'quasar/src/components/tree';
-import {QVirtualScroll} from 'quasar/src/components/virtual-scroll';
-
 //import {QExpansionItem} from 'quasar/src/components/expansion-item';
 
 const components = {
@@ -64,7 +62,6 @@ const components = {
     QChip,
     QTree,
     //QExpansionItem,
-    QVirtualScroll,
 };
 
 //directives 

client/router.js

@@ -1,16 +1,41 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 import _ from 'lodash';
 
+const CardIndex = () => import('./components/CardIndex/CardIndex.vue');
+const Search = () => import('./components/CardIndex/Search/Search.vue');
+const Card = () => import('./components/CardIndex/Card/Card.vue');
+const Book = () => import('./components/CardIndex/Book/Book.vue');
+const History = () => import('./components/CardIndex/History/History.vue');
+
 //немедленная загрузка
 //import Reader from './components/Reader/Reader.vue';
 const Reader = () => import('./components/Reader/Reader.vue');
 const ExternalLibs = () => import('./components/ExternalLibs/ExternalLibs.vue');
 
+const Income = () => import('./components/Income/Income.vue');
+const Sources = () => import('./components/Sources/Sources.vue');
+const Settings = () => import('./components/Settings/Settings.vue');
+const Help = () => import('./components/Help/Help.vue');
+const NotFound404 = () => import('./components/NotFound404/NotFound404.vue');
+
 const myRoutes = [
-    ['/', null, null, '/reader'],
+    ['/', null, null, '/cardindex'],
+    ['/cardindex', CardIndex],
+    ['/cardindex~search', Search],
+    ['/cardindex~card', Card],
+    ['/cardindex~card/:authorId', Card],
+    ['/cardindex~book', Book],
+    ['/cardindex~book/:bookId', Book],
+    ['/cardindex~history', History],
+
     ['/reader', Reader],
     ['/external-libs', ExternalLibs],
-    ['/:pathMatch(.*)*', null, null, '/reader'],
+    ['/income', Income],
+    ['/sources', Sources],
+    ['/settings', Settings],
+    ['/help', Help],
+    ['/404', NotFound404],
+    ['/:pathMatch(.*)*', null, null, '/cardindex'],
 ];
 
 let routes = {};

client/share/LockQueue.js

@@ -1,53 +0,0 @@
-class LockQueue {
-    constructor(queueSize) {
-        this.queueSize = queueSize;
-        this.freed = true;
-        this.waitingQueue = [];
-    }
-
-    //async
-    get(take = true) {
-        return new Promise((resolve, reject) => {
-            if (this.freed) {
-                if (take)
-                    this.freed = false;
-                resolve();
-                return;
-            }
-
-            if (this.waitingQueue.length < this.queueSize) {
-                this.waitingQueue.push({resolve, reject});
-            } else {
-                reject(new Error('Lock queue is too long'));
-            }
-        });
-    }
-
-    ret() {
-        if (this.waitingQueue.length) {
-            this.waitingQueue.shift().resolve();
-        } else {
-            this.freed = true;
-        }
-    }
-
-    //async
-    wait() {
-        return this.get(false);
-    }
-
-    retAll() {
-        while (this.waitingQueue.length) {
-            this.waitingQueue.shift().resolve();
-        }
-    }
-
-    errAll(error = 'rejected') {
-        while (this.waitingQueue.length) {
-            this.waitingQueue.shift().reject(new Error(error));
-        }
-    }
-
-}
-
-export default LockQueue;

client/share/utils.js

@@ -1,5 +1,4 @@
 import _ from 'lodash';
-import dayjs from 'dayjs';
 import baseX from 'base-x';
 import PAKO from 'pako';
 import {Buffer} from 'safe-buffer';
@@ -36,6 +35,22 @@ export function randomHexString(len) {
     return Buffer.from(randomArray(len)).toString('hex');
 }
 
+export function formatDate(d, format) {
+    if (!format)
+        format = 'normal';
+
+    switch (format) {
+        case 'normal':
+            return `${d.getDate().toString().padStart(2, '0')}.${(d.getMonth() + 1).toString().padStart(2, '0')}.${d.getFullYear()} ` + 
+                `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`;
+        case 'coDate':
+            return `${d.getFullYear()}-${(d.getMonth() + 1).toString().padStart(2, '0')}-${d.getDate().toString().padStart(2, '0')}`;
+        case 'noDate':
+            return `${d.getDate().toString().padStart(2, '0')}.${(d.getMonth() + 1).toString().padStart(2, '0')}.${d.getFullYear()}`;
+    }
+    
+}
+
 export function fallbackCopyTextToClipboard(text) {
     let textArea = document.createElement('textarea');
     textArea.value = text;
@@ -75,7 +90,7 @@ export function toBase58(data) {
 }
 
 export function fromBase58(data) {
-    return Buffer.from(bs58.decode(data));
+    return bs58.decode(data);
 }
 
 //base-x слишком тормозит, используем sjcl
@@ -92,10 +107,6 @@ export function fromBase64(data) {
     ));
 }
 
-export function hasProp(obj, prop) {
-    return Object.prototype.hasOwnProperty.call(obj, prop);
-}
-
 export function getObjDiff(oldObj, newObj, opts = {}) {
     const {
         exclude = [],
@@ -115,7 +126,7 @@ export function getObjDiff(oldObj, newObj, opts = {}) {
         for (const key of Object.keys(oldObj)) {
             const kp = `${keyPath}${key}`;
 
-            if (Object.prototype.hasOwnProperty.call(newObj, key)) {
+            if (newObj.hasOwnProperty(key)) {
                 if (ex.has(kp))
                     continue;
 
@@ -138,7 +149,7 @@ export function getObjDiff(oldObj, newObj, opts = {}) {
             if (exAdd.has(kp))
                 continue;
 
-            if (!Object.prototype.hasOwnProperty.call(oldObj, key)) {
+            if (!oldObj.hasOwnProperty(key)) {
                 result.add[key] = _.cloneDeep(newObj[key]);
             }
         }
@@ -202,7 +213,7 @@ export function applyObjDiff(obj, diff, opts = {}) {
 
     const change = diff.change;
     for (const key of Object.keys(change)) {
-        if (Object.prototype.hasOwnProperty.call(result, key)) {
+        if (result.hasOwnProperty(key)) {
             if (_.isObject(change[key])) {
                 result[key] = applyObjDiff(result[key], change[key], opts);
             } else {
@@ -348,58 +359,4 @@ export function getBookTitle(fb2) {
     ]).join(' - ');
 
     return result;
-}
+}
-
-export function resizeImage(dataUrl, toWidth, toHeight, quality = 0.9) {
-    return new Promise ((resolve, reject) => { (async() => {
-        const img = new Image();
-
-        let resolved = false;
-        img.onload = () => {
-            try {
-                let width = img.width;
-                let height = img.height;
-
-                if (width > height) {
-                    if (width > toWidth) {
-                        height = height * (toWidth / width);
-                        width = toWidth;
-                    }
-                } else {
-                    if (height > toHeight) {
-                        width = width * (toHeight / height);
-                        height = toHeight;
-                    }
-                }
-
-                const canvas = document.createElement('canvas');
-                canvas.width = width;
-                canvas.height = height;
-                const ctx = canvas.getContext('2d');
-                ctx.drawImage(img, 0, 0, width, height);
-                const result = canvas.toDataURL('image/jpeg', quality);
-                resolved = true;
-                resolve(result);
-            } catch (e) {
-                reject(e);
-                return;
-            }
-        };
-
-        img.onerror = reject;
-
-        img.src = dataUrl;
-
-        await sleep(1000);
-        if (!resolved)
-            reject('Не удалось изменить размер');
-    })().catch(reject); });
-}
-
-export function makeDonation() {
-    window.open('https://donatty.com/liberama', '_blank');
-}
-
-export function dateFormat(date, format = 'DD.MM.YYYY') {
-    return dayjs(date).format(format);
-}

client/store/index.js

@@ -1,20 +1,19 @@
 import { createStore } from 'vuex';
-//import createPersistedState from 'vuex-persistedstate';
+import createPersistedState from 'vuex-persistedstate';
-import VuexPersistence from 'vuex-persist';
 
 import root from './root.js';
+import uistate from './modules/uistate';
 import config from './modules/config';
 import reader from './modules/reader';
 
 const debug = process.env.NODE_ENV !== 'production';
 
-const vuexLocal = new VuexPersistence();
-
 export default createStore(Object.assign({}, root, {
     modules: {
+        uistate,
         config,
         reader,
     },
     strict: debug,
-    plugins: [vuexLocal.plugin]
+    plugins: [createPersistedState()]
 }));

client/store/modules/config.js

@@ -1,3 +1,4 @@
+import miscApi from '../../api/misc';
 // initial state
 const state = {
     name: null,

client/store/modules/reader.js

@@ -1,11 +1,6 @@
-import _ from 'lodash';
 import * as utils from '../../share/utils';
 import googleFonts from './fonts/fonts.json';
 
-const minuteMs = 60*1000;//количество ms в минуте
-const hourMs = 60*minuteMs;//количество ms в часе
-const dayMs = 24*hourMs;//количество ms в сутках
-
 const readerActions = {
     'loader': 'На страницу загрузки',
     'loadFile': 'Загрузить файл с диска',
@@ -22,12 +17,11 @@ const readerActions = {
     'copyText': 'Скопировать текст со страницы',
     'convOptions': 'Настроить конвертирование',
     'refresh': 'Принудительно обновить книгу',
-    'nightMode': 'Ночной режим',
     'clickControl': 'Управление кликом',
     'offlineMode': 'Автономный режим (без интернета)',
     'contents': 'Оглавление/закладки',
     'libs': 'Сетевая библиотека',
-    'recentBooks': 'Показать загруженные',
+    'recentBooks': 'Открыть недавние',
     'switchToolbar': 'Показать/скрыть панель управления',
     'donate': '',
     'bookBegin': 'В начало книги',
@@ -50,18 +44,17 @@ const toolButtons = [
     {name: 'undoAction',  show: true},
     {name: 'redoAction',  show: true},
     {name: 'fullScreen',  show: true},
-    {name: 'scrolling',   show: true},
+    {name: 'scrolling',   show: false},
     {name: 'setPosition', show: true},
     {name: 'search',      show: true},
-    {name: 'copyText',    show: true},
+    {name: 'copyText',    show: false},
     {name: 'convOptions', show: true},
     {name: 'refresh',     show: true},
     {name: 'contents',    show: true},
     {name: 'libs',        show: true},
     {name: 'recentBooks', show: true},
-    {name: 'nightMode',   show: true},
+    {name: 'clickControl', show: false},
-    {name: 'clickControl', show: true},
+    {name: 'offlineMode', show: false},
-    {name: 'offlineMode', show: true},
 ];
 
 //readerActions[name]
@@ -77,13 +70,12 @@ const hotKeys = [
     {name: 'scrolling', codes: ['Z']},
     {name: 'setPosition', codes: ['P']},
     {name: 'search', codes: ['Ctrl+F']},
-    {name: 'copyText', codes: ['Ctrl+Space']},    
+    {name: 'copyText', codes: ['Ctrl+C']},    
     {name: 'convOptions', codes: ['Ctrl+M']},
     {name: 'refresh', codes: ['R']},
     {name: 'contents', codes: ['C']},
     {name: 'libs', codes: ['L']},
     {name: 'recentBooks', codes: ['X']},
-    {name: 'nightMode',   codes: ['Equal']},
     {name: 'clickControl', codes: ['Ctrl+B']},
     {name: 'offlineMode', codes: ['O']},
 
@@ -161,10 +153,6 @@ const settingDefaults = {
     statusBarColorAlpha: 0.4,
     statusBarClickOpen: true,
 
-    nightMode: false, //ночной режим
-    dayColorSets: {},
-    nightColorSets: {},
-
     scrollingDelay: 3000,// замедление, ms
     scrollingType: 'ease-in-out', //linear, ease, ease-in, ease-out, ease-in-out
 
@@ -172,6 +160,7 @@ const settingDefaults = {
     pageChangeAnimationSpeed: 80, //0-100%
 
     allowUrlParamBookPos: false,
+    lazyParseEnabled: false,
     copyFullText: false,
     showClickMapPage: true,
     clickControl: true,
@@ -191,25 +180,13 @@ const settingDefaults = {
 
     showServerStorageMessages: true,
     showWhatsNewDialog: true,
-    showDonationDialog: true,
+    showDonationDialog2020: true,
     showNeedUpdateNotify: true,
 
     fontShifts: {},
     showToolButton: {},
-    toolBarHideOnScroll: false,
-    toolBarMultiLine: true,
     userHotKeys: {},
     userWallpapers: [],
-
-    recentShowSameBook: false,
-    recentSortMethod: '',
-
-    //Book Update Checker
-    bucEnabled: true, // общее включение/выключение проверки обновлений
-    bucSizeDiff: 1, // разница в размерах файла, при которой показывать наличие обновления
-    bucSetOnNew: true, // автоматически включать проверку обновлений для вновь загружаемых файлов
-    bucCancelEnabled: true, // вкл/выкл отмену проверки книг через bucCancelDays
-    bucCancelDays: 90, // количество дней, через которое отменяется проверка книги, при условии отсутствия обновлений за это время
 };
 
 for (const font of fonts)
@@ -225,8 +202,6 @@ const diffExclude = [];
 for (const hotKey of hotKeys)
     diffExclude.push(`userHotKeys/${hotKey.name}`);
 diffExclude.push('userWallpapers');
-diffExclude.push('dayColorSets');
-diffExclude.push('nightColorSets');
 
 function addDefaultsToSettings(settings) {
     const diff = utils.getObjDiff(settings, settingDefaults, {exclude: diffExclude});
@@ -237,95 +212,48 @@ function addDefaultsToSettings(settings) {
     return false;
 }
 
-const colorSetsList = [
+const libsDefaults = {
-    'textColor',
+    startLink: 'http://flibusta.is',
-    'backgroundColor',
+    comment: 'Флибуста | Книжное братство',
-    'wallpaper',
+    closeAfterSubmit: false,
-    'statusBarColorAsText',
+    openInFrameOnEnter: false,
-    'statusBarColor',
+    openInFrameOnAdd: false,
-    'statusBarColorAlpha',
+    groups: [
-    'dualDivColorAsText',
+        {r: 'http://flibusta.is', s: 'http://flibusta.is', list: [
-    'dualDivColor',
+            {l: 'http://flibusta.is', c: 'Флибуста | Книжное братство'},
-    'dualDivColorAlpha',
+        ]},
-];
+        {r: 'https://flibs.in', s: 'https://flibs.in', list: [
-
+            {l: 'https://flibs.in', c: 'Flibs'},
-function saveColorSets(nightMode, settings) {
+        ]},
-    const target = (nightMode ? settings.nightColorSets : settings.dayColorSets);
+        {r: 'http://fantasy-worlds.org', s: 'http://fantasy-worlds.org', list: [
-    for (const prop of colorSetsList) {
+            {l: 'http://fantasy-worlds.org', c: 'Миры Фэнтези'},
-        target[prop] = settings[prop];
+        ]},
-    }
+        {r: 'http://samlib.ru', s: 'http://samlib.ru', list: [
-}
+            {l: 'http://samlib.ru', c: 'Журнал "Самиздат"'},
-
+        ]},
-function restoreColorSets(nightMode, settings) {
+        {r: 'http://lib.ru', s: 'http://lib.ru', list: [
-    const source = (nightMode ? settings.nightColorSets : settings.dayColorSets);
+            {l: 'http://lib.ru', c: 'Библиотека Максима Мошкова'},
-    for (const prop of colorSetsList) {
+        ]},
-        if (utils.hasProp(source, prop))
+        {r: 'https://aldebaran.ru', s: 'https://aldebaran.ru', list: [
-            settings[prop] = source[prop];
+            {l: 'https://aldebaran.ru', c: 'АЛЬДЕБАРАН | Электронная библиотека книг'},
-    }
+        ]},
-}
+    ]
-
+};
-function getLibsDefaults(mode = 'reader') {
-    const result = {
-        startLink: '',
-        comment: '',
-        closeAfterSubmit: false,
-        openInFrameOnEnter: false,
-        openInFrameOnAdd: false,
-        helpShowed: false,
-        mode,
-        groups: [
-            {r: 'http://samlib.ru', s: 'http://samlib.ru', list: [
-                {l: 'http://samlib.ru', c: 'Журнал "Самиздат"'},
-            ]},
-            {r: 'http://lib.ru', s: 'http://lib.ru', list: [
-                {l: 'http://lib.ru', c: 'Библиотека Максима Мошкова'},
-            ]},
-            {r: 'https://aldebaran.ru', s: 'https://aldebaran.ru', list: [
-                {l: 'https://aldebaran.ru', c: 'АЛЬДЕБАРАН | Электронная библиотека книг'},
-            ]},
-        ],
-    };
-
-    if (mode === 'liberama') {
-        result.groups.unshift(
-            {r: 'http://fantasy-worlds.org', s: 'http://fantasy-worlds.org', list: [
-                {l: 'http://fantasy-worlds.org', c: 'Миры Фэнтези'},
-            ]}
-        );
-        result.groups.unshift(
-            {r: 'http://flibusta.is', s: 'http://flibusta.is', list: [
-                {l: 'http://flibusta.is', c: 'Флибуста | Книжное братство'},
-            ]}
-        );
-    } else if (mode === 'omnireader') {
-        result.groups.unshift(
-            {r: 'https://lib.omnireader.ru', s: 'https://lib.omnireader.ru', list: [
-                {l: 'https://lib.omnireader.ru', c: 'Общественное достояние'},
-            ]}
-        );
-    }
-
-    result.startLink = result.groups[0].r;
-    result.comment = result.groups[0].c;
-
-    return result;
-}
 
 // initial state
 const state = {
     toolBarActive: true,
-    offlineModeActive: false,
     serverSyncEnabled: false,
     serverStorageKey: '',
     profiles: {},
     profilesRev: 0,
     allowProfilesSave: false,//подстраховка для разработки
     whatsNewContentHash: '',
-    donationNextPopup: Date.now() + dayMs*30,
+    donationRemindDate: '',
     currentProfile: '',
-    settings: _.cloneDeep(settingDefaults),
+    settings: Object.assign({}, settingDefaults),
     settingsRev: {},
-    libs: {},
+    libs: Object.assign({}, libsDefaults),
     libsRev: 0,
 };
 
@@ -340,9 +268,6 @@ const mutations = {
     setToolBarActive(state, value) {
         state.toolBarActive = value;
     },
-    setOfflineModeActive(state, value) {
-        state.offlineModeActive = value;
-    },
     setServerSyncEnabled(state, value) {
         state.serverSyncEnabled = value;
     },
@@ -361,38 +286,20 @@ const mutations = {
     setWhatsNewContentHash(state, value) {
         state.whatsNewContentHash = value;
     },
-    setDonationNextPopup(state, value) {
+    setDonationRemindDate(state, value) {
-        state.donationNextPopup = value;
+        state.donationRemindDate = value;
     },
     setCurrentProfile(state, value) {
         state.currentProfile = value;
     },
     setSettings(state, value) {
-        let newSettings = Object.assign({}, state.settings, value);
+        const newSettings = Object.assign({}, state.settings, value);
-
-        //при смене профиля подгружаются старые настройки, могут отсутствовать атрибуты
-        //поэтому:
         const added = addDefaultsToSettings(newSettings);
-        if (added)
+        if (added) {
-            newSettings = added;
+            state.settings = added;
-
+        } else {
-        state.settings = newSettings;
+            state.settings = newSettings;
-    },
-    nightModeToggle(state) {
-        //переключение режима день-ночь
-        const newSettings = Object.assign({}, state.settings);
-
-        saveColorSets(newSettings.nightMode, newSettings);
-        newSettings.nightMode = !newSettings.nightMode;
-
-        if (newSettings.nightMode && !utils.hasProp(newSettings.nightColorSets, 'textColor')) {
-            // Ночной режим активирован впервые. Цвета заданы по умолчанию.
-            newSettings.nightColorSets = {textColor: '#778a9e', backgroundColor: '#363131'};
         }
-
-        restoreColorSets(newSettings.nightMode, newSettings);
-
-        state.settings = newSettings;
     },
     setSettingsRev(state, value) {
         state.settingsRev = Object.assign({}, state.settingsRev, value);
@@ -406,10 +313,6 @@ const mutations = {
 };
 
 export default {
-    minuteMs,
-    hourMs,
-    dayMs,
-
     readerActions,
     toolButtons,
     hotKeys,
@@ -417,7 +320,7 @@ export default {
     webFonts,
     settingDefaults,
     addDefaultsToSettings,
-    getLibsDefaults,
+    libsDefaults,
 
     namespaced: true,
     state,

client/store/modules/uistate.js

@@ -0,0 +1,25 @@
+// initial state
+const state = {
+    asideBarCollapse: false,
+};
+
+// getters
+const getters = {};
+
+// actions
+const actions = {};
+
+// mutations
+const mutations = {
+    setAsideBarCollapse(state, value) {
+        state.asideBarCollapse = value;
+    },
+};
+
+export default {
+    namespaced: true,
+    state,
+    getters,
+    actions,
+    mutations
+};

docs/beta/beta.liberama

@@ -6,7 +6,6 @@ server {
   ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
 
   server_name beta.liberama.top;
-  set $liberama http://127.0.0.1:34082;
 
   client_max_body_size 50m;
   proxy_read_timeout 1h;
@@ -16,20 +15,15 @@ server {
   gzip_proxied expired no-cache no-store private auth;
   gzip_types *;
 
-  location @liberama {
-    proxy_pass $liberama;
-  }
-
   location /api {
-    proxy_pass $liberama;
+    proxy_pass http://127.0.0.1:34082;
   }
 
   location /ws {
-    proxy_pass $liberama;
+    proxy_pass http://127.0.0.1:34082;
     proxy_http_version 1.1;
     proxy_set_header Upgrade $http_upgrade;
     proxy_set_header Connection "upgrade";
-    proxy_read_timeout 600s;
   }
 
   location / {
@@ -38,11 +32,6 @@ server {
     location /tmp {
       types { } default_type "application/xml; charset=utf-8";
       add_header Content-Encoding gzip;
-      try_files $uri @liberama;
-    }
-
-    location /upload {
-      try_files $uri @liberama;
     }
 
     location ~* \.(?:manifest|appcache|html)$ {
@@ -61,7 +50,6 @@ server {
 server {
   listen 80;
   server_name b.beta.liberama.top;
-  set $liberama http://127.0.0.1:34082;
 
   client_max_body_size 50m;
   proxy_read_timeout 1h;
@@ -71,38 +59,24 @@ server {
   gzip_proxied expired no-cache no-store private auth;
   gzip_types *;
 
-  location @liberama {
-    proxy_pass $liberama;
-  }
-
   location /api {
-    proxy_pass $liberama;
+    proxy_pass http://127.0.0.1:34082;
   }
 
   location /ws {
-    proxy_pass $liberama;
+    proxy_pass http://127.0.0.1:34082;
     proxy_http_version 1.1;
     proxy_set_header Upgrade $http_upgrade;
     proxy_set_header Connection "upgrade";
-    proxy_read_timeout 600s;
-  }
-
-  location /tmp {
-    root /home/beta.liberama/.liberama/public-files;
-
-    types { } default_type "application/xml; charset=utf-8";
-    add_header Content-Encoding gzip;
-    try_files $uri @liberama;
-  }
-
-  location /upload {
-    root /home/beta.liberama/.liberama/public-files;
-
-    try_files $uri @liberama;
   }
 
   location / {
-    root /home/beta.liberama/.liberama/public;
+    root /home/beta.liberama/public;
+
+    location /tmp {
+      types { } default_type "application/xml; charset=utf-8";
+      add_header Content-Encoding gzip;
+    }
 
     location ~* \.(?:manifest|appcache|html)$ {
       expires -1;