Merge branch 'release/0.9.10-4'

0.9.10-3

README.md

@@ -8,7 +8,7 @@
 ![](docs/assets/reader.jpg)
 
 ## VPS
-Для разворачивания читалки на чистом VPS с нуля смотрите [docs/omnireader](docs/omnireader/README.md)
+Для разворачивания читалки на чистом VPS с нуля смотрите [docs/omnireader.ru](docs/omnireader.ru/README.md)
 
 ## Сборка проекта
 Необходима версия node.js не ниже 10.

build/webpack.prod.config.js

@@ -9,7 +9,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
-const AppCachePlugin = require('appcache-webpack-plugin');
+const {GenerateSW} = require('workbox-webpack-plugin');
 
 const publicDir = path.resolve(__dirname, '../dist/tmp/public');
 const clientDir = path.resolve(__dirname, '../client');
@@ -55,6 +55,12 @@ module.exports = merge(baseWpConfig, {
             filename: `${publicDir}/index.html`
         }),
         new CopyWebpackPlugin([{from: `${clientDir}/assets/*`, to: `${publicDir}/`, flatten: true}]),
-        new AppCachePlugin({exclude: ['../index.html']})
+        new GenerateSW({
+            cacheId: 'liberama',
+            swDest: `${publicDir}/service-worker.js`,
+            navigateFallback: '/index.html',
+            navigateFallbackDenylist: [new RegExp('^/api'), new RegExp('^/ws'), new RegExp('^/tmp'),],
+            skipWaiting: true,
+        }),        
     ]
 });

client/api/reader.js

@@ -181,9 +181,8 @@ class Reader {
             maxUploadFileSize = 10*1024*1024;
         if (file.size > maxUploadFileSize)
             throw new Error(`Размер файла превышает ${maxUploadFileSize} байт`);
-
         let formData = new FormData();
-        formData.append('file', file);
+        formData.append('file', file, file.name);
 
         const options = {
             headers: {

client/api/webSocketConnection.js

@@ -1,3 +1,5 @@
+import * as utils from '../share/utils';
+
 const cleanPeriod = 60*1000;//1 минута
 
 class WebSocketConnection {
@@ -9,6 +11,8 @@ class WebSocketConnection {
         this.messageQueue = [];
         this.messageLifeTime = messageLifeTime;
         this.requestId = 0;
+
+        this.connecting = false;
     }
 
     addListener(listener) {
@@ -53,14 +57,22 @@ class WebSocketConnection {
     }
 
     open(url) {
-        return new Promise((resolve, reject) => {
+        return new Promise((resolve, reject) => { (async() => {
+            //Ожидаем окончания процесса подключения, если open уже был вызван
+            let i = 0;
+            while (this.connecting && i < 200) {//10 сек
+                await utils.sleep(50);
+                i++;
+            }
+            if (i >= 200)
+                this.connecting = false;
+
+            //проверим подключение, и если нет, то подключимся заново
             if (this.ws && this.ws.readyState == WebSocket.OPEN) {
                 resolve(this.ws);
             } else {
-                let protocol = 'ws:';
-                if (window.location.protocol == 'https:') {
-                    protocol = 'wss:'
-                }
+                this.connecting = true;
+                const protocol = (window.location.protocol == 'https:' ? 'wss:' : 'ws:');
 
                 url = url || `${protocol}//${window.location.host}/ws`;
                 
@@ -71,9 +83,8 @@ class WebSocketConnection {
                 }
                 this.timer = setTimeout(() => { this.periodicClean(); }, cleanPeriod);
 
-                let resolved = false;
                 this.ws.onopen = (e) => {
-                    resolved = true;
+                    this.connecting = false;
                     resolve(e);
                 };
 
@@ -97,11 +108,13 @@ class WebSocketConnection {
 
                 this.ws.onerror = (e) => {
                     this.emit(e.message, true);
-                    if (!resolved)
+                    if (this.connecting) {
+                        this.connecting = false;
                         reject(e);
+                    }
                 };
             }
-        });
+        })() });
     }
 
     //timeout в минутах (cleanPeriod)

client/assets/sw-register.js

@@ -0,0 +1,5 @@
+(function() {
+    if('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/service-worker.js');
+    }
+})();

client/components/App.vue

@@ -1,56 +1,4 @@
 <template>
-    <!--q-layout view="lhr lpr lfr">
-        <q-drawer v-model="showAsideBar" :width="asideWidth">
-            <div class="app-name"><span v-html="appName"></span></div>
-            <q-btn class="el-button-collapse" @click="toggleCollapse"></q-btn>
-
-            <q-list>
-                <q-item clickable v-ripple>
-                    <q-item-section avatar>
-                        <q-icon name="inbox" />
-                    </q-item-section>
-
-                    <q-item-section>Inbox</q-item-section>
-                </q-item>
-            </q-list-->
-            <!--el-menu class="el-menu-vertical" :default-active="rootRoute" :collapse="isCollapse" router>
-              <el-menu-item index="/cardindex">
-                <i class="el-icon-search"></i>
-                <span :class="itemTitleClass('/cardindex')" slot="title">{{ this.itemRuText['/cardindex'] }}</span>
-              </el-menu-item>
-              <el-menu-item index="/reader">
-                <i class="el-icon-tickets"></i>
-                <span :class="itemTitleClass('/reader')" slot="title">{{ this.itemRuText['/reader'] }}</span>
-              </el-menu-item>
-              <el-menu-item index="/forum" disabled>
-                <i class="el-icon-message"></i>
-                <span :class="itemTitleClass('/forum')" slot="title">{{ this.itemRuText['/forum'] }}</span>
-              </el-menu-item>
-              <el-menu-item index="/income">
-                <i class="el-icon-upload"></i>
-                <span :class="itemTitleClass('/income')" slot="title">{{ this.itemRuText['/income'] }}</span>
-              </el-menu-item>
-              <el-menu-item index="/sources">
-                <i class="el-icon-menu"></i>
-                <span :class="itemTitleClass('/sources')" slot="title">{{ this.itemRuText['/sources'] }}</span>
-              </el-menu-item>
-              <el-menu-item index="/settings">
-                <i class="el-icon-setting"></i>
-                <span :class="itemTitleClass('/settings')" slot="title">{{ this.itemRuText['/settings'] }}</span>
-              </el-menu-item>
-              <el-menu-item index="/help">
-                <i class="el-icon-question"></i>
-                <span :class="itemTitleClass('/help')" slot="title">{{ this.itemRuText['/help'] }}</span>
-              </el-menu-item>
-            </el-menu-->
-        <!--/q-drawer>
-
-        <q-page-container>
-            <keep-alive>
-                <router-view></router-view>
-            </keep-alive>
-        </q-page-container>
-    </q-layout-->
     <div class="fit row">
         <Notify ref="notify"/>
         <StdDialog ref="stdDialog"/>
@@ -90,7 +38,8 @@ class App extends Vue {
         '/sources': 'Источники',
         '/settings': 'Параметры',
         '/help': 'Справка',
-    }
+    };
+
     created() {
         this.commit = this.$store.commit;
         this.dispatch = this.$store.dispatch;
@@ -106,10 +55,20 @@ class App extends Vue {
                 cachedPath = this.$route.path;
                 const m = cachedPath.match(/^(\/[^/]*).*$/i);
                 cachedRoute = (m ? m[1] : this.$route.path);
+
             }
             return cachedRoute;
         }
 
+        this.$router.beforeEach((to, from, next) => {
+            //распознавание хоста, если присутствует домен 3-уровня "b.", то разрешена только определенная страница
+            if (window.location.host.indexOf('b.') == 0 && to.path != '/external-libs' && to.path != '/404') {
+                next('/404');
+            } else {
+                next();
+            }
+        });
+
         // set-app-title
         this.$root.$on('set-app-title', this.setAppTitle);
 
@@ -133,15 +92,26 @@ class App extends Vue {
 
         document.addEventListener('keyup', (event) => {
             this.keyHook(event);
-        });        
+        });
+        document.addEventListener('keypress', (event) => {
+            this.keyHook(event);
+        });
         document.addEventListener('keydown', (event) => {
             this.keyHook(event);
-        });        
+        });
         window.addEventListener('resize', () => {
             this.$root.$emit('resize');
         });
     }
 
+    routerReady() {
+        return new Promise ((resolve) => {
+            this.$router.onReady(() => {
+                resolve();
+            });
+        });
+    }
+
     mounted() {
         this.$root.notify = this.$refs.notify;
         this.$root.stdDialog = this.$refs.stdDialog;
@@ -157,7 +127,14 @@ class App extends Vue {
         });
 
         this.setAppTitle();
-        this.redirectIfNeeded();
+        (async() => {
+            //запросим persistent storage
+            if (navigator.storage && navigator.storage.persist) {
+                navigator.storage.persist();
+            }
+            await this.routerReady();
+            this.redirectIfNeeded();
+        })();
     }
 
     toggleCollapse() {
@@ -202,7 +179,9 @@ class App extends Vue {
 
     setAppTitle(title) {
         if (!title) {
-            if (this.mode == 'omnireader') {
+            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 = `${this.config.name} - ${this.itemRuText[this.$root.rootRoute]}`;
@@ -221,29 +200,32 @@ class App extends Vue {
     }
 
     get showAsideBar() {
-        return (this.mode !== null && this.mode != 'reader' && this.mode != 'omnireader');
+        return (this.mode !== null && this.mode != 'reader' && this.mode != 'omnireader' && this.mode != 'liberama.top');
     }
 
     set showAsideBar(value) {
     }
 
     get isReaderActive() {
-        return this.rootRoute == '/reader';
+        return (this.rootRoute == '/reader' || this.rootRoute == '/external-libs');
     }
 
     redirectIfNeeded() {
-        if ((this.mode == 'reader' || this.mode == 'omnireader') && (!this.isReaderActive)) {
-            //старый url
+        if ((this.mode == 'reader' || this.mode == 'omnireader' || this.mode == 'liberama.top')) {
             const search = window.location.search.substr(1);
-            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 });
+            //распознавание параметра 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 });
+            }
         }
     }
 }
@@ -270,7 +252,7 @@ body, html, #app {
 }
 
 .dborder {
-    border: 2px solid yellow !important;
+    border: 2px solid magenta !important;
 }
 
 .icon-rotate {

client/components/ExternalLibs/BookmarkSettings/BookmarkSettings.vue

@@ -0,0 +1,349 @@
+<template>
+    <Window ref="window" width="600px" height="95%" @close="close">
+        <template slot="header">
+            Настроить закладки
+        </template>
+
+        <div class="col column fit">
+            <div class="row items-center top-panel bg-grey-3">
+                <q-btn class="q-mr-md" round dense color="blue" icon="la la-check" @click.stop="openSelected" size="16px" :disabled="!selected">
+                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Открыть выбранную закладку</q-tooltip>
+                </q-btn>
+                <q-input class="col" ref="search" rounded outlined dense bg-color="white" placeholder="Найти" v-model="search">
+                    <template v-slot:append>
+                        <q-icon v-if="search !== ''" name="la la-times" class="cursor-pointer" @click="resetSearch"/>
+                    </template>
+                </q-input>
+            </div>
+
+            <div class="col row">
+                <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" @click.stop="addBookmark" size="14px">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Добавить закладку</q-tooltip>
+                    </q-btn>
+                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-minus" @click.stop="delBookmark" size="14px" :disabled="!ticked.length">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Удалить отмеченные закладки</q-tooltip>
+                    </q-btn>
+                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-edit" @click.stop="editBookmark" size="14px" :disabled="!selected || selected.indexOf('r-') == 0">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Редактировать закладку</q-tooltip>
+                    </q-btn>
+                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-arrow-up" @click.stop="moveBookmark(false)" size="14px" :disabled="!ticked.length">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Переместить отмеченные вверх</q-tooltip>
+                    </q-btn>
+                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-arrow-down" @click.stop="moveBookmark(true)" size="14px" :disabled="!ticked.length">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Переместить отмеченные вниз</q-tooltip>
+                    </q-btn>
+                    <q-btn class="q-mb-sm" round dense color="blue" icon="la la-broom" @click.stop="setDefaultBookmarks" size="14px">
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Установить по умолчанию</q-tooltip>
+                    </q-btn>
+                    <div class="space"/>
+                </div>
+
+                <div class="col fit tree">
+                    <div v-show="nodes.length" class="checkbox-tick-all">
+                        <q-checkbox v-model="tickAll" @input="makeTickAll" size="36px" label="Выбрать все" />
+                    </div>
+                    <q-tree
+                        class="q-my-xs"
+                        :nodes="nodes"
+                        node-key="key"
+                        tick-strategy="leaf"
+                        :selected.sync="selected"
+                        :ticked.sync="ticked"
+                        :expanded.sync="expanded"
+                        selected-color="black"
+                        :filter="search"
+                        no-nodes-label="Закладок пока нет"
+                        no-results-label="Ничего не найдено"
+                    >
+                        <template v-slot:default-header="p">
+                            <div class="q-px-xs" :class="{selected: selected == p.key}">{{ p.node.label }}</div>
+                        </template>
+                    </q-tree>
+                </div>
+            </div>
+        </div>
+    </Window>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import _ from 'lodash';
+
+import Window from '../../share/Window.vue';
+import * as lu from '../linkUtils';
+import rstore from '../../../store/modules/reader';
+
+const BookmarkSettingsProps = Vue.extend({
+    props: {
+        libs: Object,
+        addBookmarkVisible: Boolean,
+    }
+});
+
+export default @Component({
+    components: {
+        Window,
+    },
+    watch: {
+        ticked: function() {
+            this.checkAllTicked();
+        },
+    }    
+})
+class BookmarkSettings extends BookmarkSettingsProps {
+    search = '';
+    selected = '';
+    ticked = [];
+    expanded = [];
+    tickAll = false;
+
+    created() {
+        this.afterInit = true;
+    }
+
+    mounted() {
+    }
+
+    init() {
+        this.$refs.window.init();
+    }
+
+    get nodes() {
+        const result = [];
+
+        const expanded = [];
+        this.links = {};
+        this.libs.groups.forEach(group => {
+            const rkey = `r-${group.r}`;
+            const g = {label: group.r, key: rkey, children: []};
+            this.links[rkey] = {l: group.r, c: ''};
+
+            group.list.forEach(link => {
+                const key = link.l;
+                g.children.push({
+                    label: (link.c ? link.c + ' ': '') + lu.removeOrigin(link.l),
+                    key
+                });
+
+                this.links[key] = link;
+                if (link.l == this.libs.startLink && expanded.indexOf(rkey) < 0) {
+                    expanded.push(rkey);
+                }
+
+            });
+
+            result.push(g);
+        });
+
+        if (this.afterInit) {
+            this.$nextTick(() => {
+                this.expanded = expanded;
+            });
+            this.afterInit = false;
+        }
+
+        return result;
+    }
+
+    makeTickAll() {
+        if (this.tickAll) {
+            const newTicked = [];
+            for (const key of Object.keys(this.links)) {
+                if (key.indexOf('r-') != 0)
+                    newTicked.push(key);
+            }
+            this.ticked = newTicked;
+        } else {
+            this.ticked = [];
+        }
+    }
+
+    checkAllTicked() {
+        const ticked = new Set(this.ticked);
+
+        let newTickAll = !!(this.nodes.length);
+        for (const key of Object.keys(this.links)) {
+            if (key.indexOf('r-') != 0 && !ticked.has(key))
+                newTickAll = false;
+        }
+        this.tickAll = newTickAll;
+    }
+
+    resetSearch() {
+        this.search = '';
+        this.$refs.search.focus();
+    }
+
+    openSelected() {
+        if (!this.selected)
+            return;
+        if (this.selected.indexOf('r-') === 0) {//rootLink
+            this.$emit('do-action', {action: 'setRootLink', data: this.links[this.selected].l});
+        } else {//selectedLink
+            this.$emit('do-action', {action: 'setSelectedLink', data: this.links[this.selected].l});
+        }
+        this.close();
+    }
+
+    editBookmark() {
+        this.$emit('do-action', {action: 'editBookmark', data: {link: this.links[this.selected].l, desc: this.links[this.selected].c}});
+    }
+
+    addBookmark() {
+        this.$emit('do-action', {action: 'addBookmark'});
+    }
+
+    async delBookmark() {
+        const newLibs = _.cloneDeep(this.libs);
+
+        if (await this.$root.stdDialog.confirm(`Подтвердите удаление ${this.ticked.length} закладок:`, ' ')) {
+            const ticked = new Set(this.ticked);
+            for (let i = newLibs.groups.length - 1; i >= 0; i--) {
+                const g = newLibs.groups[i];
+                for (let j = g.list.length - 1; j >= 0; j--) {
+                    if (ticked.has(g.list[j].l)) {
+                        delete g.list[j];
+                    }
+                }
+                g.list = g.list.filter(v => v);
+                if (!g.list.length)
+                    delete newLibs.groups[i];
+                else {
+                    const item = lu.getListItemByLink(g.list, g.s);
+                    if (!item)
+                        g.s = g.list[0].l;
+                }
+            }
+
+            newLibs.groups = newLibs.groups.filter(v => v);
+            this.ticked = [];
+            this.selected = '';
+            this.$emit('do-action', {action: 'setLibs', data: newLibs});
+        }
+    }
+
+    moveBookmark(down = false) {
+        const newLibs = _.cloneDeep(this.libs);
+
+        const ticked = new Set(this.ticked);
+        let moved = false;
+        let prevFull = false;
+        if (!down) {
+            for (let i = 0; i < newLibs.groups.length; i++) {
+                const g = newLibs.groups[i];
+                let count = 0;
+                for (let j = 0; j < g.list.length; j++) {
+                    if (ticked.has(g.list[j].l)) {
+                        if (j > 0 && !ticked.has(g.list[j - 1].l)) {
+                            [g.list[j], g.list[j - 1]] = [g.list[j - 1], g.list[j]];
+                            moved = true;
+                        }
+                        count++;
+                    }
+                }
+
+                if (count == g.list.length && !prevFull && i > 0) {
+                    const gs = newLibs.groups;
+                    [gs[i], gs[i - 1]] = [gs[i - 1], gs[i]];
+                    moved = true;
+                } else
+                    prevFull = (count == g.list.length);
+            }
+        } else {
+            for (let i = newLibs.groups.length - 1; i >= 0; i--) {
+                const g = newLibs.groups[i];
+                let count = 0;
+                for (let j = g.list.length - 1; j >= 0; j--) {
+                    if (ticked.has(g.list[j].l)) {
+                        if (j < g.list.length - 1 && !ticked.has(g.list[j + 1].l)) {
+                            [g.list[j], g.list[j + 1]] = [g.list[j + 1], g.list[j]];
+                            moved = true;
+                        }
+                        count++;
+                    }
+                }
+
+                if (count == g.list.length && !prevFull && i < newLibs.groups.length - 1) {
+                    const gs = newLibs.groups;
+                    [gs[i], gs[i + 1]] = [gs[i + 1], gs[i]];
+                    moved = true;
+                } else
+                    prevFull = (count == g.list.length);
+            }
+        }
+
+        if (moved)
+            this.$emit('do-action', {action: 'setLibs', data: newLibs});
+    }
+
+    async setDefaultBookmarks() {
+        const result = await this.$root.stdDialog.prompt(`Введите 'да' для сброса всех закладок в предустановленные значения:`, ' ', {
+            inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
+        });
+
+        if (result && result.value && result.value.toLowerCase() == 'да') {
+            this.$emit('do-action', {action: 'setLibs', data: _.cloneDeep(
+                Object.assign({helpShowed: true}, rstore.libsDefaults)
+            )});
+        }
+    }
+
+    close() {
+        this.afterInit = false;
+        this.$emit('close');
+    }
+
+    keyHook(event) {
+        if (this.addBookmarkVisible)
+            return false;
+
+        if (event.type == 'keydown' && event.key == 'Escape') {
+            this.close();
+            return true;
+        }
+        return false;
+    }
+
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.top-panel {
+    height: 50px;
+    border-bottom: 1px solid gray;
+    padding: 0 10px 0 12px;
+}
+
+.left-panel {
+    width: 60px;
+    height: 100%;
+    border-right: 1px solid gray;
+    overflow-x: hidden;
+    overflow-y: auto;
+}
+
+.tree {
+    padding: 0px 10px 10px 10px;
+    overflow-x: auto;
+    overflow-y: auto;
+}
+
+.selected {
+    text-shadow: 0 0 20px yellow, 0 0 15px yellow, 0 0 10px yellow, 0 0 10px yellow, 0 0 5px yellow;
+}
+
+.checkbox-tick-all {
+    border-bottom: 1px solid #bbbbbb;
+    margin-bottom: 7px;
+    padding: 5px 5px 2px 16px;
+}
+
+.space {
+    min-height: 1px;
+    width: 1px;
+}
+</style>

client/components/ExternalLibs/ExternalLibs.vue

@@ -0,0 +1,863 @@
+<template>
+    <Window ref="window" @close="close" margin="2px">
+        <template slot="header">
+            {{ header }}
+        </template>
+
+        <template slot="buttons">
+            <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="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="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="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>
+        </template>
+
+        <div v-show="ready" class="col column" style="min-width: 600px">
+            <div class="row items-center q-px-sm" style="height: 50px">
+                <q-select class="q-mr-sm" ref="rootLink" v-model="rootLink" :options="rootLinkOptions" @input="rootLinkInput"
+                    @popup-show="onSelectPopupShow" @popup-hide="onSelectPopupHide"
+                    style="width: 230px"
+                    dropdown-icon="la la-angle-down la-sm"
+                    rounded outlined dense emit-value map-options display-value-sanitize options-sanitize
+                >
+                    <template v-slot:prepend>
+                        <q-btn class="q-mr-xs" round dense color="blue" icon="la la-plus" @click.stop="addBookmark" size="12px">
+                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Добавить закладку</q-tooltip>
+                        </q-btn>
+                        <q-btn round dense color="blue" icon="la la-bars" @click.stop="bookmarkSettings" size="12px">
+                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Настроить закладки</q-tooltip>
+                        </q-btn>
+                    </template>
+                    <template v-slot:selected>
+                        <div style="overflow: hidden; white-space: nowrap;">{{ rootLinkWithoutProtocol }}</div>
+                    </template>
+                </q-select>
+
+                <q-select class="q-mr-sm" ref="selectedLink" v-model="selectedLink" :options="selectedLinkOptions" @input="selectedLinkInput" style="width: 50px"
+                    @popup-show="onSelectPopupShow" @popup-hide="onSelectPopupHide"
+                    dropdown-icon="la la-angle-down la-sm"
+                    rounded outlined dense emit-value map-options hide-selected display-value-sanitize options-sanitize
+                >
+                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Закладки</q-tooltip>
+                </q-select>
+
+                <q-input class="col q-mr-sm" ref="input" rounded outlined dense bg-color="white" v-model="bookUrl" placeholder="Скопируйте сюда URL книги"
+                    @focus="selectAllOnFocus" @keydown="bookUrlKeyDown"
+                >
+                    <template v-slot:prepend>
+                        <q-btn class="q-mr-xs" round dense color="blue" icon="la la-home" @click="goToLink(selectedLink)" size="12px">
+                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Вернуться на стартовую страницу</q-tooltip>
+                        </q-btn>
+                        <q-btn round dense color="blue" icon="la la-angle-double-down" @click="openBookUrlInFrame" size="12px" :disabled="!bookUrl">
+                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Загрузить URL во фрейм</q-tooltip>
+                        </q-btn>
+                    </template>
+                    <template v-slot:append>
+                        <q-btn round dense color="blue" icon="la la-cog" @click.stop="optionsVisible = true" size="12px">
+                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Опции</q-tooltip>
+                        </q-btn>
+                    </template>
+                </q-input>
+
+                <q-btn rounded color="green-7" no-caps size="14px" @click="submitUrl" :disabled="!bookUrl">Открыть
+                    <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Открыть в читалке</q-tooltip>
+                </q-btn>
+            </div>
+            <div class="separator"></div>
+
+            <div class="col fit" ref="frameBox" style="position: relative;">
+                <div ref="frameWrap" class="overflow-hidden">
+                    <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>
+
+            <Dialog ref="dialogAddBookmark" v-model="addBookmarkVisible">
+                <template slot="header">
+                    <div class="row items-center">
+                        <q-icon class="q-mr-sm" name="la la-bookmark" size="28px"></q-icon>
+                        <div v-if="addBookmarkMode == 'edit'">Редактировать закладку</div>
+                        <div v-else>Добавить закладку</div>
+                    </div>
+                </template>
+
+                <div class="q-mx-md row">
+                    <q-input ref="bookmarkLink" class="col q-mr-sm" outlined dense bg-color="white" v-model="bookmarkLink" @keydown="bookmarkLinkKeyDown"
+                        placeholder="Ссылка для закладки" maxlength="2000" @focus="selectAllOnFocus">
+                    </q-input>
+
+                    <q-select class="q-mr-sm" ref="defaultRootLink" v-model="defaultRootLink" :options="defaultRootLinkOptions" @input="defaultRootLinkInput" style="width: 50px"
+                        dropdown-icon="la la-angle-down la-sm"
+                        outlined dense emit-value map-options hide-selected display-value-sanitize options-sanitize
+                    >
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Предустановленные ссылки</q-tooltip>
+                    </q-select>
+                </div>
+
+                <div class="q-mx-md q-mt-md">
+                    <q-input class="col q-mr-sm" ref="bookmarkDesc" outlined dense bg-color="white" v-model="bookmarkDesc" @keydown="bookmarkDescKeyDown"
+                        placeholder="Описание" style="width: 400px" maxlength="100" @focus="selectAllOnFocus">
+                    </q-input>
+                </div>
+
+                <template slot="footer">
+                    <q-btn class="q-px-md q-ml-sm" dense no-caps v-close-popup>Отмена</q-btn>
+                    <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okAddBookmark" :disabled="!bookmarkLink">OK</q-btn>
+                </template>
+            </Dialog>
+
+            <Dialog ref="options" v-model="optionsVisible">
+                <template slot="header">
+                    <div class="row items-center">
+                        <q-icon class="q-mr-sm" name="la la-cog" size="28px"></q-icon>
+                        Опции
+                    </div>
+                </template>
+
+                <div class="q-mx-md column">
+                    <q-checkbox v-model="closeAfterSubmit" size="36px" label="Закрыть окно при отправке ссылки в читалку" />
+                    <q-checkbox v-model="openInFrameOnEnter" size="36px" label="Открывать ссылку во фрейме при нажатии 'Enter'" />
+                    <q-checkbox v-model="openInFrameOnAdd" size="36px" label="Активировать новую закладку после добавления" />
+                </div>
+
+                <template slot="footer">
+                    <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="optionsVisible = false">OK</q-btn>
+                </template>
+            </Dialog>
+        </div>
+
+        <BookmarkSettings v-if="bookmarkSettingsActive" ref="bookmarkSettings" :libs="libs" :addBookmarkVisible="addBookmarkVisible"
+            @do-action="doAction" @close="closeBookmarkSettings">
+        </BookmarkSettings>
+    </Window>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+import _ from 'lodash';
+
+import Window from '../share/Window.vue';
+import Dialog from '../share/Dialog.vue';
+import BookmarkSettings from './BookmarkSettings/BookmarkSettings.vue';
+
+import rstore from '../../store/modules/reader';
+import * as utils from '../../share/utils';
+import * as lu from './linkUtils';
+
+const proxySubst = {
+    'http://flibusta.is': 'http://b.liberama.top:23480',
+    'http://fantasy-worlds.org': 'http://b.liberama.top:23580',
+};
+
+export default @Component({
+    components: {
+        Window,
+        Dialog,
+        BookmarkSettings
+    },
+    watch: {
+        libs: function() {
+            this.loadLibs();
+        },
+        defaultRootLink: function() {
+            this.updateBookmarkLink();
+        },
+        bookUrl: function(newValue) {
+            const value = lu.addProtocol(newValue);
+            const subst = this.makeProxySubst(value, true);
+            if (value != subst) {
+                this.$nextTick(() => {
+                    this.bookUrl = subst;
+                });
+            }
+        },
+        bookmarkLink: function(newValue) {
+            const value = lu.addProtocol(newValue);
+            const subst = this.makeProxySubst(value, true);
+            if (value != subst) {
+                this.$nextTick(() => {
+                    this.bookmarkLink = subst;
+                });
+            }
+        },
+        closeAfterSubmit: function(newValue) {
+            this.commitProp('closeAfterSubmit', newValue);
+        },
+        openInFrameOnEnter: function(newValue) {
+            this.commitProp('openInFrameOnEnter', newValue);
+        },
+        openInFrameOnAdd: function(newValue) {
+            this.commitProp('openInFrameOnAdd', newValue);
+        },
+    }    
+})
+class ExternalLibs extends Vue {
+    ready = false;
+    frameVisible = false;
+    rootLink = '';
+    selectedLink = '';
+    frameSrc = '';
+    bookUrl = '';
+    libs = {};
+    fullScreenActive = false;
+    transparentLayoutVisible = false;
+
+    addBookmarkVisible = false;
+    optionsVisible = false;
+
+    addBookmarkMode = '';
+    bookmarkLink = '';
+    bookmarkDesc = '';
+    defaultRootLink = '';
+
+    bookmarkSettingsActive = false;
+
+    closeAfterSubmit = false;
+    openInFrameOnEnter = false;
+    openInFrameOnAdd = false;
+    frameScale = 1;
+
+    created() {
+        this.oldStartLink = '';
+        this.justOpened = true;
+        this.$root.addKeyHook(this.keyHook);
+
+        this.$root.$on('resize', async() => {
+            await utils.sleep(200);
+            this.frameResize();
+        });
+
+        document.addEventListener('fullscreenchange', () => {
+            this.fullScreenActive = (document.fullscreenElement !== null);
+        });
+
+        this.debouncedGoToLink = _.debounce((link) => {
+            this.goToLink(link);
+        }, 100, {'maxWait':200});
+        //this.commit = this.$store.commit;
+        //this.commit('reader/setLibs', rstore.libsDefaults);
+    }
+
+    mounted() {
+        //Поправка метода toggleOption компонента select фреймворка quasar, необходимо другое поведение
+        //$emit('input'.. вызывается всегда
+        this.toggleOption = function(opt, keepOpen) {
+            if (this.editable !== true || opt === void 0 || this.isOptionDisabled(opt) === true) {
+                return;
+            }
+
+            const optValue = this.getOptionValue(opt);
+
+            if (this.multiple !== true) {
+                if (keepOpen !== true) {
+                    this.updateInputValue(this.fillInput === true ? this.getOptionLabel(opt) : '', true, true);
+                    this.hidePopup();
+                }
+
+                this.$refs.target !== void 0 && this.$refs.target.focus();
+                this.$emit('input', this.emitValue === true ? optValue : opt);
+            }
+        };
+
+        this.$refs.rootLink.toggleOption = this.toggleOption;
+        this.$refs.selectedLink.toggleOption = this.toggleOption;
+
+        (async() => {
+            //подождем this.mode
+            let i = 0;
+            while(!this.mode && i < 100) {
+                await utils.sleep(100);
+                i++;
+            }
+
+            if (this.mode != 'liberama.top') {
+                this.$router.replace('/404');
+                return;
+            }
+
+            this.$refs.window.init();
+
+            this.opener = null;
+            const host = window.location.host;
+            const openerHost = (host.indexOf('b.') == 0 ? host.substring(2) : host);
+            const openerOrigin1 = `http://${openerHost}`;
+            const openerOrigin2 = `https://${openerHost}`;
+
+            window.addEventListener('message', (event) => {
+                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);
+            });
+
+            //Ожидаем родителя
+            i = 0;
+            while(!this.opener) {
+                await utils.sleep(1000);
+                i++;
+                if (i >= 5) {
+                    await this.$root.stdDialog.alert('Нет связи с читалкой. Окно будет закрыто', 'Ошибка');
+                    window.close();
+                }
+            }
+
+            //Проверка закрытия родительского окна
+            while(this.opener) {
+                await this.checkOpener();
+                await utils.sleep(1000);
+            }
+        })();
+    }
+
+    recvMessage(d) {
+        if (d.type == 'mes') {
+            switch(d.data) {
+                case 'hello': this.sendMessage({type: 'mes', data: 'ready'}); break;
+            }
+        } else if (d.type == 'libs') {
+            this.ready = true;
+            this.libs = _.cloneDeep(d.data);
+        } else if (d.type == 'notify') {
+            this.$root.notify.success(d.data, '', {position: 'bottom-right'});
+        }
+    }
+
+    sendMessage(d) {
+        (async() => {
+            await this.checkOpener();
+            if (this.opener && this.openerOrigin)
+                this.opener.postMessage(Object.assign({}, {from: 'ExternalLibs'}, d), this.openerOrigin);
+        })();
+    }
+
+    async checkOpener() {
+        if (this.opener.closed) {
+            await this.$root.stdDialog.alert('Потеряна связь с читалкой. Окно будет закрыто', 'Ошибка');
+            window.close();
+        }
+    }
+
+    commitLibs(libs) {
+        this.sendMessage({type: 'libs', data: libs});
+    }
+
+    commitProp(prop, value) {
+        let libs = _.cloneDeep(this.libs);
+        libs[prop] = value;
+        this.commitLibs(libs);
+    }
+
+    loadLibs() {
+        const libs = this.libs;
+
+        if (!libs.helpShowed) {
+            this.showHelp();
+            (async() => {
+                await utils.sleep(1000);
+                this.commitProp('helpShowed', true);
+            })();
+        }
+
+        this.selectedLink = libs.startLink;
+        this.closeAfterSubmit = libs.closeAfterSubmit || false;
+        this.openInFrameOnEnter = libs.openInFrameOnEnter || false;
+        this.openInFrameOnAdd = libs.openInFrameOnAdd || false;
+
+        this.frameScale = 1;
+        const index = lu.getSafeRootIndexByUrl(this.libs.groups, this.selectedLink);
+        if (index >= 0)
+            this.frameScale = this.libs.groups[index].frameScale || 1;
+
+        this.updateStartLink();
+    }
+
+    doAction(event) {
+        switch (event.action) {
+            case 'setLibs': this.commitLibs(event.data); break;
+            case 'setRootLink': this.rootLink = event.data; this.rootLinkInput(); break;
+            case 'setSelectedLink': this.selectedLink = event.data; this.selectedLinkInput(); break;
+            case 'editBookmark': this.addBookmark('edit', event.data.link, event.data.desc); break;
+            case 'addBookmark': this.addBookmark('add'); break;
+        }
+    }
+
+    get mode() {
+        return this.$store.state.config.mode;
+    }
+
+    get header() {
+        let result = (this.ready ? 'Сетевая библиотека' : 'Загрузка...');
+        if (this.ready && this.selectedLink) {
+            result += ` | ${(this.libs.comment ? this.libs.comment + ' ': '') + lu.removeProtocol(this.libs.startLink)}`;
+        }
+        this.$root.$emit('set-app-title', result);
+        return result;
+    }
+
+    get rootLinkWithoutProtocol() {
+        return lu.removeProtocol(this.rootLink);
+    }
+
+    updateSelectedLinkByRoot() {
+        if (!this.ready)
+            return;
+
+        const index = lu.getSafeRootIndexByUrl(this.libs.groups, this.rootLink);
+        if (index >= 0)
+            this.selectedLink = this.libs.groups[index].s;
+        else
+            this.selectedLink = '';
+    }
+
+    updateStartLink(force) {
+        if (!this.ready)
+            return;
+
+        let index = -1;
+        try {
+            this.rootLink = lu.getOrigin(this.selectedLink);
+            index = lu.getRootIndexByUrl(this.libs.groups, this.rootLink);
+        } catch(e) {
+            //
+        }
+
+        if (index >= 0) {
+            let libs = _.cloneDeep(this.libs);
+            const com = this.getCommentByLink(libs.groups[index].list, this.selectedLink);
+            if (libs.groups[index].s != this.selectedLink ||
+                libs.startLink != this.selectedLink ||
+                libs.comment != com) {
+                libs.groups[index].s = this.selectedLink;
+                libs.startLink = this.selectedLink;
+                libs.comment = com;
+                this.commitLibs(libs);
+            }
+
+            if (force || this.oldStartLink != libs.startLink) {
+                this.oldStartLink = libs.startLink;
+                this.debouncedGoToLink(this.selectedLink);
+            }
+        } else {
+            this.rootLink = '';
+            this.selectedLink = '';
+            this.debouncedGoToLink(this.selectedLink);
+        }
+    }
+
+    get rootLinkOptions() {
+        let result = [];
+        if (!this.ready)
+            return result;
+
+        this.libs.groups.forEach(group => {
+            result.push({label: lu.removeProtocol(group.r), value: group.r});
+        });
+
+        return result;
+    }
+
+    get defaultRootLinkOptions() {
+        let result = [];
+
+        rstore.libsDefaults.groups.forEach(group => {
+            result.push({label: lu.removeProtocol(group.r), value: group.r});
+        });
+
+        return result;
+    }
+
+    get selectedLinkOptions() {
+        let result = [];
+        if (!this.ready)
+            return result;
+
+        const index = lu.getSafeRootIndexByUrl(this.libs.groups, this.rootLink);
+        if (index >= 0) {
+            this.libs.groups[index].list.forEach(link => {
+                result.push({label: (link.c ? link.c + ' ': '') + lu.removeOrigin(link.l), value: link.l});
+            });
+        }
+
+        return result;
+    }
+
+    openBookUrlInFrame() {
+        if (this.bookUrl) {
+            this.goToLink(lu.addProtocol(this.bookUrl));
+        }
+    }
+
+    goToLink(link) {
+        if (!this.ready || !link)
+            return;
+
+        if (!link) {
+            this.frameVisible = false;
+            return;
+        }
+
+        this.frameSrc = this.makeProxySubst(link);
+
+        this.frameVisible = false;
+        this.$nextTick(() => {
+            this.frameVisible = true;
+            this.$nextTick(() => {
+                if (this.$refs.frame) {
+                    this.$refs.frame.contentWindow.focus();
+                    this.frameResize();
+                }
+            });
+        });
+    }
+
+    frameResize() {
+        this.$refs.frameWrap.style = 'width: 1px; height: 1px;';
+        this.$nextTick(() => {
+            if (this.$refs.frame) {
+                const w = this.$refs.frameBox.offsetWidth;
+                const h = this.$refs.frameBox.offsetHeight;
+                const normalSize = `width: ${w}px; height: ${h}px;`;
+                this.$refs.frameWrap.style = normalSize;
+                if (this.frameScale != 1) {
+                    const s = this.frameScale;
+                    this.$refs.frame.style = `width: ${w/s}px; height: ${h/s}px; transform: scale(${s}); transform-origin: 0 0;`;
+                } else {
+                    this.$refs.frame.style = normalSize;
+                }
+            }
+        });
+    }
+
+    changeScale(delta) {
+        if ((this.frameScale > 0.1 && delta <= 0) || (this.frameScale < 5 && delta >= 0)) {
+             this.frameScale = _.round(this.frameScale + delta, 1);
+
+            const index = lu.getSafeRootIndexByUrl(this.libs.groups, this.selectedLink);
+            if (index >= 0) {
+                let libs = _.cloneDeep(this.libs);
+                libs.groups[index].frameScale = this.frameScale;
+                this.commitLibs(libs);
+            }
+
+            this.frameResize();
+            this.$root.notify.success(`Масштаб изменен: ${(this.frameScale*100).toFixed(0)}%`, '', {position: 'bottom-right'});
+        }
+    }
+
+    getCommentByLink(list, link) {
+        const item = lu.getListItemByLink(list, link);
+        return (item ? item.c : '');
+    }
+
+    makeProxySubst(url, reverse = false) {
+        for (const [key, value] of Object.entries(proxySubst)) {
+            if (reverse && value == url.substring(0, value.length)) {
+                return key + url.substring(value.length);
+            } else if (!reverse && key == url.substring(0, key.length)) {
+                return value + url.substring(key.length);
+            }
+        }
+
+        return url;
+    }
+
+    selectAllOnFocus(event) {
+        if (event.target.select)
+            event.target.select();
+    }
+
+    rootLinkInput() {
+        this.updateSelectedLinkByRoot();
+        this.updateStartLink(true);
+    }
+
+    selectedLinkInput() {
+        this.updateStartLink(true);
+    }
+
+    submitUrl() {
+        if (this.bookUrl) {
+            this.sendMessage({type: 'submitUrl', data: {
+                url: this.bookUrl,
+                force: true
+            }});
+            this.bookUrl = '';
+            if (this.closeAfterSubmit)
+                this.close();
+        }
+    }
+
+    addBookmark(mode = 'add', link = '', desc = '') {
+
+        if (mode == 'edit') {
+            this.editBookmarkLink = this.bookmarkLink = link;
+            this.editBookmarkDesc = this.bookmarkDesc = desc;
+        } else {
+            this.bookmarkLink = this.bookUrl;
+            this.bookmarkDesc = '';
+        }
+
+        this.addBookmarkMode = mode;
+        this.addBookmarkVisible = true;
+        this.$nextTick(() => {
+            this.$refs.bookmarkLink.focus();
+            this.$refs.defaultRootLink.toggleOption = this.toggleOption;
+        });
+    }
+
+    updateBookmarkLink() {
+        const index = lu.getSafeRootIndexByUrl(rstore.libsDefaults.groups, this.defaultRootLink);
+        if (index >= 0) {
+            this.bookmarkLink = rstore.libsDefaults.groups[index].s;
+            this.bookmarkDesc = this.getCommentByLink(rstore.libsDefaults.groups[index].list, this.bookmarkLink);
+        } else {
+            this.bookmarkLink = '';
+            this.bookmarkDesc = '';
+        }
+    }
+
+    defaultRootLinkInput() {
+        this.updateBookmarkLink();
+    }
+
+    bookmarkLinkKeyDown(event) {
+        if (event.key == 'Enter') {
+            this.$refs.bookmarkDesc.focus();
+            event.preventDefault();
+        }
+    }
+
+    bookmarkDescKeyDown(event) {
+        if (event.key == 'Enter') {
+            event.stopPropagation();
+            event.preventDefault();
+            this.okAddBookmark();
+        }
+    }
+
+    async okAddBookmark() {
+        if (!this.bookmarkLink)
+            return;
+
+        const link = (this.addBookmarkMode == 'edit' ? lu.addProtocol(this.editBookmarkLink) : lu.addProtocol(this.bookmarkLink));
+        let index = -1;
+        try {
+            index = lu.getRootIndexByUrl(this.libs.groups, link);
+        } catch (e) {
+            await this.$root.stdDialog.alert('Неверный формат ссылки', 'Ошибка');
+            return;
+        }
+
+        let libs = _.cloneDeep(this.libs);
+
+        //добавление
+        //есть группа в закладках
+        if (index >= 0) {
+            const item = lu.getListItemByLink(libs.groups[index].list, link);
+
+            //редактирование
+            if (item && this.addBookmarkMode == 'edit') {
+                if (item) {
+                    //редактируем
+                    item.l = link;
+                    item.c = this.bookmarkDesc;
+                    this.commitLibs(libs);
+                } else {
+                    await this.$root.stdDialog.alert('Не удалось отредактировать закладку', 'Ошибка');
+                }
+            } else if (!item) {
+                //добавляем
+                if (libs.groups[index].list.length >= 100) {
+                    await this.$root.stdDialog.alert('Достигнут предел количества закладок для этого сайта', 'Ошибка');
+                    return;
+                }
+
+                libs.groups[index].list.push({l: link, c: this.bookmarkDesc});
+
+                if (this.openInFrameOnAdd) {
+                    libs.startLink = link;
+                    libs.comment = this.bookmarkDesc;
+                }
+
+                this.commitLibs(libs);
+            } else if (item.c != this.bookmarkDesc) {
+                if (await this.$root.stdDialog.confirm(`Такая закладка уже существует с другим описанием.<br>` +
+                    `Заменить '${this.$sanitize(item.c)}' на '${this.$sanitize(this.bookmarkDesc)}'?`, ' ')) {
+                    item.c = this.bookmarkDesc;
+                    this.commitLibs(libs);                    
+                } else 
+                    return;
+            } else {
+                await this.$root.stdDialog.alert('Такая закладка уже существует', ' ');
+                return;
+            }
+        } else {//нет группы в закладках
+            if (libs.groups.length >= 100) {
+                await this.$root.stdDialog.alert('Достигнут предел количества различных сайтов в закладках', 'Ошибка');
+                return;
+            }
+
+            //добавляем сначала группу
+            libs.groups.push({r: lu.getOrigin(link), s: link, list: []});
+            
+            index = lu.getSafeRootIndexByUrl(libs.groups, link);
+            if (index >= 0)
+                libs.groups[index].list.push({l: link, c: this.bookmarkDesc});
+
+            if (this.openInFrameOnAdd) {
+                libs.startLink = link;
+                libs.comment = this.bookmarkDesc;
+            }
+
+            this.commitLibs(libs);
+        }
+
+        this.addBookmarkVisible = false;
+    }
+
+    fullScreenToggle() {
+        this.fullScreenActive = !this.fullScreenActive;
+        if (this.fullScreenActive) {
+            this.$q.fullscreen.request();
+        } else {
+            this.$q.fullscreen.exit();
+        }
+    }
+
+    transparentLayoutClick() {
+        this.transparentLayoutVisible = false;
+    }
+
+    onSelectPopupShow() {
+        this.transparentLayoutVisible = true;
+    }
+
+    onSelectPopupHide() {
+        this.transparentLayoutVisible = false;
+    }
+
+    close() {
+        this.sendMessage({type: 'close'});
+    }
+
+    bookUrlKeyDown(event) {
+        if (event.key == 'Enter') {
+            if (!this.openInFrameOnEnter) {
+                this.submitUrl();
+            } else {
+                if (this.bookUrl)
+                    this.goToLink(this.bookUrl);
+            }
+            event.preventDefault();
+        }
+    }
+
+    bookmarkSettings() {
+        this.bookmarkSettingsActive = true;
+        this.$nextTick(() => {
+            this.$refs.bookmarkSettings.init();
+        });
+    }
+
+    closeBookmarkSettings() {
+        this.bookmarkSettingsActive = false;
+    }
+
+    showHelp() {
+        this.$root.stdDialog.alert(`
+<p>Окно 'Сетевая библиотека' позволяет открывать ссылки в читалке без переключения между окнами,
+что особенно актуально для мобильных устройств. Имеется возможность управлять закладками
+на понравившиеся ресурсы, книги или страницы авторов. Открытие ссылок и навигация происходят во фрейме, но,
+к сожалению, в нем открываются не все страницы.</p>
+
+<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>
+            `, 'Справка', {iconName: 'la la-info-circle'});
+    }
+
+    keyHook(event) {
+        if (this.$root.rootRoute() == '/external-libs') {
+            if (this.$root.stdDialog.active)
+                return false;
+
+            if (this.bookmarkSettingsActive && this.$refs.bookmarkSettings.keyHook(event))
+                return true;
+
+            if (this.addBookmarkVisible || this.optionsVisible)
+                return false;
+
+            if (event.type == 'keydown' && event.key == 'F4') {
+                this.addBookmark();
+                return true;
+            }
+
+            if (event.type == 'keydown' && event.key == 'Escape' &&
+                (document.activeElement != this.$refs.rootLink.$refs.target || !this.$refs.rootLink.menu) &&
+                (document.activeElement != this.$refs.selectedLink.$refs.target || !this.$refs.selectedLink.menu)
+               ) {
+                this.close();
+                return true;
+            }
+        }
+        return false;
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.separator {
+    height: 1px;
+    background-color: #A0A0A0;
+}
+
+.full-screen-button {
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+}
+
+.full-screen-button:hover {
+    background-color: #69C05F;
+}
+
+.transparent-layout {
+    top: 0;
+    left: 0;
+    position: absolute;
+}
+</style>

client/components/ExternalLibs/linkUtils.js

@@ -0,0 +1,48 @@
+export function addProtocol(url) {
+    if ((url.indexOf('http://') != 0) && (url.indexOf('https://') != 0))
+        return 'http://' + url;
+    return url;
+}
+
+export function removeProtocol(url) {
+    return url.replace(/(^\w+:|^)\/\//, '');
+}
+
+export function getOrigin(url) {
+    const parsed = new URL(url);
+    return parsed.origin;
+}
+
+export function removeOrigin(url) {
+    const parsed = new URL(url);
+    const result = url.substring(parsed.origin.length);
+    return (result ? result : '/');
+}
+
+export function getRootIndexByUrl(groups, url) {
+    const origin = getOrigin(url);
+    for (let i = 0; i < groups.length; i++) {
+        if (groups[i].r == origin)
+            return i;
+    }
+    return -1;
+}
+
+export function getSafeRootIndexByUrl(groups, url) {
+    let index = -1;
+    try {
+        index = getRootIndexByUrl(groups, url);
+    } catch(e) {
+        //
+    }
+    return index;
+}
+
+export function getListItemByLink(list, link) {
+    for (const item of list) {
+        if (item.l == link)
+            return item;
+    }
+    return null;
+}
+

client/components/Reader/ContentsPage/ContentsPage.vue

@@ -0,0 +1,247 @@
+<template>
+    <Window width="600px" ref="window" @close="close">
+        <template slot="header">
+            Оглавление/закладки
+        </template>
+
+    <div class="bg-grey-3 row">
+        <q-tabs
+            v-model="selectedTab"
+            active-color="black"
+            active-bg-color="white"
+            indicator-color="white"
+            dense
+            no-caps
+            inline-label
+            class="no-mp bg-grey-4 text-grey-7"
+        >
+            <q-tab name="contents" icon="la la-list" label="Оглавление" />
+            <q-tab name="bookmarks"  icon="la la-bookmark" label="Закладки" />
+        </q-tabs>
+    </div>
+
+    <div class="q-mb-sm"/>
+
+    <div class="tab-panel" v-show="selectedTab == 'contents'">
+        <div>
+            <div v-for="item in contents" :key="item.key" class="column" style="width: 540px">
+                <div class="row item q-px-sm no-wrap">
+                    <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="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="20px"/>
+                    </div>
+                    <div class="col row clickable" @click="setBookPos(item.offset)">
+                        <div :style="item.indentStyle"></div>
+                        <div class="q-mr-sm col overflow-hidden column justify-center" :style="item.labelStyle" v-html="item.label"></div>
+                        <div class="column justify-center">{{ item.perc }}%</div>
+                    </div>
+                </div>
+                
+                <div v-if="item.expanded" :ref="`subitem${item.key}`" class="subitems-transition">
+                    <div v-for="subitem in item.list" :key="subitem.key" class="row subitem q-px-sm no-wrap">
+                        <div class="col row clickable" @click="setBookPos(subitem.offset)">
+                            <div class="no-expand-button"></div>
+                            <div :style="subitem.indentStyle"></div>
+                            <div class="q-mr-sm col overflow-hidden column justify-center" :style="item.labelStyle" v-html="subitem.label"></div>
+                            <div class="column justify-center">{{ subitem.perc }}%</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div v-if="!contents.length" class="column justify-center items-center" style="height: 100px">
+                Оглавление отсутствует
+            </div>
+        </div>
+    </div>
+
+    <div class="tab-panel" v-show="selectedTab == 'bookmarks'">
+        <div class="column justify-center items-center" style="height: 100px">
+            Раздел находится в разработке
+        </div>
+    </div>
+
+    </Window>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+//import _ from 'lodash';
+
+import Window from '../../share/Window.vue';
+import * as utils from '../../../share/utils';
+
+export default @Component({
+    components: {
+        Window,
+    },
+    watch: {
+    },
+})
+class ContentsPage extends Vue {
+    selectedTab = 'contents';
+    contents = [];
+
+    created() {
+    }
+
+    async init(currentBook, parsed) {
+        this.$refs.window.init();
+
+        //закладки
+
+        //далее формаирование оглавления
+        if (this.parsed == parsed)
+            return;
+
+        this.parsed = parsed;
+        this.contents = [];
+        await this.$nextTick();
+
+        const pc = parsed.contents;
+        const newpc = [];
+        //преобразуем все, кроме первого, разделы body в title-subtitle
+        let curSubtitles = [];
+        let prevBodyIndex = -1;
+        for (let i = 0; i < pc.length; i++) {
+            const cont = pc[i];
+            if (prevBodyIndex != cont.bodyIndex)
+                curSubtitles = [];
+
+            prevBodyIndex = cont.bodyIndex;
+
+            if (cont.bodyIndex > 1) {
+                if (cont.inset < 1) {
+                    newpc.push(Object.assign({}, cont, {subtitles: curSubtitles}));
+                } else {
+                    curSubtitles.push(Object.assign({}, cont, {inset: cont.inset - 1}));
+                }
+            } else {
+                newpc.push(cont);
+            }
+        }
+
+        const prepareLabel = (title, bolder = false) => {
+            let titleParts = title.split('<p>');
+            const textParts = titleParts.filter(v => v).map(v => `<div>${utils.removeHtmlTags(v)}</div>`);
+            if (bolder && textParts.length > 1)
+                textParts[0] = `<b>${textParts[0]}</b>`;
+            return textParts.join('');
+        }
+
+        const getIndentStyle = inset => `width: ${inset*20}px`;
+
+        const getLabelStyle = (inset) => {
+            const fontSizes = ['110%', '100%', '90%', '85%'];
+            inset = (inset > 3 ? 3 : inset);
+            return `font-size: ${fontSizes[inset]}`;
+        };
+
+        //формируем newContents
+        let i = 0;
+        const newContents = [];
+        newpc.forEach((cont) => {
+            const label = prepareLabel(cont.title, true);
+            const indentStyle = getIndentStyle(cont.inset);
+            const labelStyle = getLabelStyle(cont.inset);
+
+            let j = 0;
+            const list = [];
+            cont.subtitles.forEach((sub) => {
+                const l = prepareLabel(sub.title);
+                const s = getIndentStyle(sub.inset + 1);
+                const ls = getLabelStyle(cont.inset + 1);
+                const p = parsed.para[sub.paraIndex];
+                list[j] = {perc: (p.offset/parsed.textLength*100).toFixed(2), label: l, key: j, offset: p.offset, indentStyle: s, labelStyle: ls};
+                j++;
+            });
+
+            const p = parsed.para[cont.paraIndex];
+            newContents[i] = {perc: (p.offset/parsed.textLength*100).toFixed(0), label, key: i, offset: p.offset, indentStyle, labelStyle, expanded: false, list};
+
+            i++;
+        });
+
+        this.contents = newContents;
+    }
+
+    async expandClick(key) {
+        const item = this.contents[key];
+        const expanded = !item.expanded;
+
+        if (!expanded) {
+            const subitems = this.$refs[`subitem${key}`][0];
+            subitems.style.height = '0';
+            await utils.sleep(200);
+        }
+
+        this.$set(this.contents, key, Object.assign({}, item, {expanded}));
+
+        if (expanded) {
+            await this.$nextTick();
+            const subitems = this.$refs[`subitem${key}`][0];
+            subitems.style.height = subitems.scrollHeight + 'px';
+        }
+    }
+
+    async setBookPos(newValue) {
+        this.$emit('book-pos-changed', {bookPos: newValue});
+        this.close();
+    }
+
+    close() {
+        this.$emit('do-action', {action: 'contents'});
+    }
+
+    keyHook(event) {
+        if (!this.$root.stdDialog.active && event.type == 'keydown' && event.key == 'Escape') {
+            this.close();
+        }
+        return true;
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.tab-panel {
+    overflow-x: hidden;
+    overflow-y: auto;
+    font-size: 90%;
+    padding: 0 10px 0px 10px;
+}
+
+.clickable {
+    cursor: pointer;
+    padding: 10px 0 10px 0;
+}
+
+.item, .subitem {
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.item:hover, .subitem:hover {
+    background-color: #f0f0f0;
+}
+
+.expand-button, .no-expand-button {
+    width: 40px;
+}
+
+.subitems-transition {
+    height: 0;
+    transition: height 0.2s linear;
+    overflow: hidden;
+}
+
+.icon {
+    transition: transform 0.2s;
+}
+
+.expanded-icon {
+    transform: rotate(90deg);
+}
+</style>

client/components/Reader/CopyTextPage/CopyTextPage.vue

@@ -91,11 +91,11 @@ class CopyTextPage extends Vue {
 
     close() {
         this.stopInit = true;
-        this.$emit('copy-text-toggle');
+        this.$emit('do-action', {action: 'copyText'});
     }
 
     keyHook(event) {
-        if (event.type == 'keydown' && (event.code == 'Escape')) {
+        if (event.type == 'keydown' && event.key == 'Escape') {
             this.close();
         }
         return true;

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

@@ -22,15 +22,15 @@
         на файл из онлайн-библиотеки (например, скопировав адрес ссылки или кнопки "скачать fb2").</p>
         <p>Поддерживаемые форматы: <b>fb2, fb2.zip, html, txt</b> и другие.</p>
 
-        <div v-show="mode == 'omnireader'">
+        <div v-show="mode == 'omnireader' || mode == 'liberama.top'">
             <p>Вы можете добавить в свой браузер закладку, указав в ее свойствах вместо адреса следующий код:
-                <br><strong>javascript:location.href='https://omnireader.ru/?url='+location.href;</strong>
-                <q-icon class="copy-icon" name="la la-copy" @click="copyText('javascript:location.href=\'https://omnireader.ru/?url=\'+location.href;', 'Код для адреса закладки успешно скопирован в буфер обмена')">
+                <br><strong>{{ bookmarkText }}</strong>
+                <q-icon class="copy-icon" name="la la-copy" @click="copyText(bookmarkText, 'Код для адреса закладки успешно скопирован в буфер обмена')">
                     <q-tooltip :delay="1000" anchor="top middle" self="center middle" content-style="font-size: 80%">Скопировать</q-tooltip>                    
                 </q-icon>
 
                 <br>или перетащив на панель закладок следующую ссылку:
-                <br><a style="margin-left: 50px" href="javascript:location.href='https://omnireader.ru/?url='+location.href;">Omni Reader</a>
+                <br><a style="margin-left: 50px" :href="bookmarkText">{{ (mode == 'omnireader' ? 'Omni' : 'Liberama') }} Reader</a>
                 <br>Тогда, активировав получившуюся закладку на любой странице интернета, вы автоматически загрузите эту страницу в Omni Reader.
                 <br>В Chrome для Android можно вызывать такую закладку по имени прямо в адресной строке браузера (имя стоит сделать попроще).
             </p>
@@ -56,6 +56,10 @@ class CommonHelpPage extends Vue {
         return this.$store.state.config.mode;
     }
 
+    get bookmarkText() {
+        return `javascript:location.href='https://${window.location.host}/?url='+location.href;`
+    }
+
     async copyText(text, mes) {
         const result = await copyTextToClipboard(text);
         const msg = (result ? mes : 'Копирование не удалось');

client/components/Reader/HelpPage/HelpPage.vue

@@ -43,8 +43,8 @@ const pages = {
 
 const tabs = [
     ['CommonHelpPage', 'Общее'],
-    ['HotkeysHelpPage', 'Клавиатура'],
     ['MouseHelpPage', 'Мышь/тачскрин'],
+    ['HotkeysHelpPage', 'Клавиатура'],
     ['VersionHistoryPage', 'История версий'],
     ['DonateHelpPage', 'Помочь проекту'],
 ];
@@ -56,7 +56,7 @@ class HelpPage extends Vue {
     selectedTab = 'CommonHelpPage';
 
     close() {
-        this.$emit('help-toggle');
+        this.$emit('do-action', {action: 'help'});
     }
 
     get activePage() {
@@ -81,7 +81,7 @@ class HelpPage extends Vue {
     }
 
     keyHook(event) {
-        if (event.type == 'keydown' && (event.code == 'Escape')) {
+        if (event.type == 'keydown' && event.key == 'Escape') {
             this.close();
         }
         return true;

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

@@ -1,28 +1,13 @@
 <template>
     <div class="page">
-        <span class="text-h6 text-bold">Управление с помощью горячих клавиш:</span>
-        <ul>
-            <li><b>F1, H</b> - открыть справку</li>
-            <li><b>Escape</b> - показать/скрыть страницу загрузки</li>
-            <li><b>Tab, Q</b> - показать/скрыть панель управления</li>
-            <li><b>PageUp, Left, Shift+Space, Backspace</b> - страницу назад</li>
-            <li><b>PageDown, Right, Space</b> - страницу вперед</li>
-            <li><b>Home</b> - в начало книги</li>
-            <li><b>End</b> - в конец книги</li>
-            <li><b>Up</b> - строчку назад</li>
-            <li><b>Down</b> - строчку вперёд</li>
-            <li><b>A, Shift+A</b> - изменить размер шрифта</li>
-            <li><b>Enter, F, F11, ` (апостроф)</b> - вкл./выкл. полный экран</li>
-            <li><b>Z</b> - вкл./выкл. плавный скроллинг текста</li>
-            <li><b>Shift+Down/Shift+Up</b> - увеличить/уменьшить скорость скроллинга
-            <li><b>P</b> - установить страницу</li>
-            <li><b>Ctrl+F</b> - найти в тексте</li>            
-            <li><b>Ctrl+C</b> - скопировать текст со страницы</li>            
-            <li><b>R</b> - принудительно обновить книгу в обход кэша</li>
-            <li><b>X</b> - открыть недавние</li>
-            <li><b>O</b> - автономный режим</li>
-            <li><b>S</b> - открыть окно настроек</li>
-        </ul>
+        <div style="font-size: 120%">
+            <div class="text-h6 text-bold">Доступны следующие клавиатурные команды:</div>
+            <br>
+        </div>
+        <div class="q-mb-md" style="width: 550px">
+            <div class="text-right text-italic" style="font-size: 80%">* Изменить сочетания клавиш можно в настройках</div>
+            <UserHotKeys v-model="userHotKeys" readonly/>
+        </div>
     </div>
 </template>
 
@@ -31,11 +16,25 @@
 import Vue from 'vue';
 import Component from 'vue-class-component';
 
+import UserHotKeys from '../../SettingsPage/UserHotKeys/UserHotKeys.vue';
+
 export default @Component({
+    components: {
+        UserHotKeys,
+    },
 })
 class HotkeysHelpPage extends Vue {
     created() {
     }
+
+    get userHotKeys() {
+        return this.$store.state.reader.settings.userHotKeys;
+    }
+
+    set userHotKeys(value) {
+        //no setter
+    }
+
 }
 //-----------------------------------------------------------------------------
 </script>
@@ -44,7 +43,5 @@ class HotkeysHelpPage extends Vue {
 .page {
     padding: 15px;
     overflow-y: auto;
-    font-size: 120%;
-    line-height: 130%;
 }
 </style>

client/components/Reader/LibsPage/LibsPage.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="hidden"></div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import Window from '../../share/Window.vue';
+import * as utils from '../../../share/utils';
+//import rstore from '../../../store/modules/reader';
+
+export default @Component({
+    components: {
+        Window
+    },
+    watch: {
+        libs: function() {
+            this.sendLibs();
+        },
+    }    
+})
+class LibsPage extends Vue {
+    created() {
+        this.popupWindow = null;
+        this.commit = this.$store.commit;
+        this.messageListener = null;
+        //this.commit('reader/setLibs', rstore.libsDefaults);
+    }
+
+    init() {
+        if (this.mode != 'liberama.top')
+            return;
+
+        this.childReady = false;
+        const subdomain = (window.location.protocol != 'http:' ? 'b.' : '');
+        this.origin = `http://${subdomain}${window.location.host}`;
+
+        this.messageListener = (event) => {
+            if (event.origin !== this.origin)
+                return;
+
+            //console.log(event.data);
+
+            this.recvMessage(event.data);
+        };
+
+        this.popupWindow = window.open(`${this.origin}/#/external-libs`);
+
+        if (this.popupWindow) {
+
+            window.addEventListener('message', this.messageListener);
+
+            //Проверка закрытия окна
+            (async() => {
+                while(this.popupWindow) {
+                    if (this.popupWindow && this.popupWindow.closed)
+                        this.close();
+                    await utils.sleep(1000);
+                }
+            })();
+
+            //Установление связи с окном
+            (async() => {
+                let i = 0;
+                while(!this.childReady && this.popupWindow && i < 100) {
+                    this.sendMessage({type: 'mes', data: 'hello'});
+                    await utils.sleep(100);
+                    i++;
+                }
+                this.sendLibs();
+            })();
+        }
+    }
+
+    recvMessage(d) {
+        if (d.type == 'mes') {
+            switch(d.data) {
+                case 'ready':
+                    this.childReady = true;                    
+                    break;
+            }
+        } else if (d.type == 'libs') {
+            this.commit('reader/setLibs', d.data);
+        } else if (d.type == 'close') {
+            this.close();
+        } else if (d.type == 'submitUrl') {
+            this.$emit('load-book', d.data);
+            this.sendMessage({type: 'notify', data: 'Ссылка передана в читалку'});
+        }
+    }
+
+    sendMessage(d) {
+        if (this.popupWindow)
+            this.popupWindow.postMessage(Object.assign({}, {from: 'LibsPage'}, d), this.origin);
+    }
+
+    done() {
+        window.removeEventListener('message', this.messageListener);
+        if (this.popupWindow) {
+            this.popupWindow.close();
+            this.popupWindow = null;
+        }
+    }
+
+    get mode() {
+        return this.$store.state.config.mode;
+    }
+
+    get libs() {
+        return this.$store.state.reader.libs;
+    }
+
+    sendLibs() {
+        this.sendMessage({type: 'libs', data: this.libs});
+    }
+
+    close() {
+        this.$emit('libs-close');
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.separator {
+    height: 1px;
+    background-color: #A0A0A0;
+}
+</style>

client/components/Reader/LoaderPage/LoaderPage.vue

@@ -1,14 +1,14 @@
 <template>
     <div ref="main" class="column no-wrap" style="min-height: 500px">
-        <div class="relative-position">
+        <div v-if="mode != 'liberama.top'" class="relative-position">
             <GithubCorner url="https://github.com/bookpauk/liberama" cornerColor="#1B695F" gitColor="#EBE2C9"></GithubCorner>
         </div>
         <div class="col column justify-center items-center no-wrap overflow-hidden" style="min-height: 230px">
             <span class="greeting"><b>{{ title }}</b></span>
             <div class="q-my-sm"></div>
             <span class="greeting">Добро пожаловать!</span>
-            <span class="greeting">Поддерживаются форматы: <b>fb2, html, txt</b> и сжатие: <b>zip, bz2, gz</b></span>
-            <span v-if="isExternalConverter" class="greeting">...а также форматы: <b>rtf, doc, docx, pdf, epub, mobi</b></span>
+            <span class="greeting">Поддерживаются форматы: <b>fb2, html, txt</b> и сжатие: <b>zip, bz2, gz<span v-if="isExternalConverter">, rar</span></b></span>
+            <span v-if="isExternalConverter" class="greeting">...а также частично форматы: <b>epub, mobi, rtf, doc, docx, pdf, djvu</b></span>
         </div>
 
         <div class="col-auto column justify-start items-center no-wrap overflow-hidden">
@@ -31,7 +31,7 @@
             </q-btn>
 
             <div class="q-my-md"></div>
-            <div v-if="mode == 'omnireader'">
+            <!--div v-if="mode == 'omnireader'">
                 <div ref="yaShare2" class="ya-share2" 
                     data-services="collections,vkontakte,facebook,odnoklassniki,twitter,telegram"
                     data-description="Чтение fb2-книг онлайн. Загрузка любой страницы интернета одним кликом, синхронизация между устройствами, удобное управление, регистрация не требуется."
@@ -39,7 +39,7 @@
                     data-url="https://omnireader.ru">
                 </div>
             </div>
-            <div class="q-my-sm"></div>
+            <div class="q-my-sm"></div-->
             <span v-if="mode == 'omnireader'" class="bottom-span clickable" @click="openComments">Отзывы о читалке</span>
             <span v-if="mode == 'omnireader'" class="bottom-span clickable" @click="openOldVersion">Старая версия</span>
         </div>
@@ -82,8 +82,8 @@ class LoaderPage extends Vue {
 
     mounted() {
         this.progress = this.$refs.progress;
-        if (this.mode == 'omnireader')
-            Ya.share2(this.$refs.yaShare2);// eslint-disable-line no-undef
+        /*if (this.mode == 'omnireader')
+            Ya.share2(this.$refs.yaShare2);// eslint-disable-line no-undef*/
     }
 
     activated() {
@@ -93,6 +93,8 @@ class LoaderPage extends Vue {
     get title() {
         if (this.mode == 'omnireader')
             return 'Omni Reader - браузерная онлайн-читалка.';
+        if (this.mode == 'liberama.top')
+            return 'Liberama Reader - браузерная онлайн-читалка.';
         return 'Универсальная читалка книг и ресурсов интернета.';
 
     }
@@ -148,12 +150,12 @@ class LoaderPage extends Vue {
         this.pasteTextActive = !this.pasteTextActive;
     }
 
-    openHelp() {
-        this.$emit('help-toggle');
+    openHelp(event) {
+        this.$emit('do-action', {action: 'help', event});
     }
 
     openDonate() {
-        this.$emit('donate-toggle');
+        this.$emit('do-action', {action: 'donate'});
     }
     
     openComments() {
@@ -171,23 +173,21 @@ class LoaderPage extends Vue {
 
         //недостатки сторонних ui
         const input = this.$refs.input.$refs.input;
-        if (document.activeElement === input && event.type == 'keydown' && event.code == 'Enter') {
+        if (document.activeElement === input && event.type == 'keydown' && event.key == 'Enter') {
             this.submitUrl();
-        }
-
-        if (event.type == 'keydown' && (event.code == 'F1' || (document.activeElement !== input && event.code == 'KeyH'))) {
-            this.$emit('help-toggle');
-            event.preventDefault();
-            event.stopPropagation();
             return true;
         }
 
-        if (event.type == 'keydown' && (document.activeElement !== input && event.code == 'KeyQ')) {
-            this.$emit('tool-bar-toggle');
-            event.preventDefault();
-            event.stopPropagation();
-            return true;
+        if (event.type == 'keydown' && document.activeElement !== input) {
+            const action = this.$root.readerActionByKeyEvent(event);
+            switch (action) {
+                case 'help':
+                    this.openHelp(event);
+                    return true;
+            }
         }
+
+        return false;
     }
 }
 //-----------------------------------------------------------------------------

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

@@ -78,7 +78,7 @@ class PasteTextPage extends Vue {
 
     keyHook(event) {
         if (event.type == 'keydown') {
-            switch (event.code) {
+            switch (event.key) {
                 case 'F2':
                     this.loadBuffer();
                     break;

client/components/Reader/Reader.vue

@@ -2,60 +2,76 @@
     <div class="column no-wrap">
         <div ref="header" class="header" v-show="toolBarActive">
             <div ref="buttons" class="row justify-between no-wrap">
-                <button ref="loader" class="tool-button" :class="buttonActiveClass('loader')" @click="buttonClick('loader')" v-ripple>
-                    <q-icon name="la la-arrow-left" size="32px"/>
-                    <q-tooltip :delay="1500" anchor="bottom right" content-style="font-size: 80%">Загрузить книгу</q-tooltip>
-                </button>
+                <div>
+                    <button ref="loader" class="tool-button" :class="buttonActiveClass('loader')" @click="buttonClick('loader')" v-ripple>
+                        <q-icon name="la la-arrow-left" size="32px"/>
+                        <q-tooltip :delay="1500" anchor="bottom right" content-style="font-size: 80%">{{ rstore.readerActions['loader'] }}</q-tooltip>
+                    </button>
+                </div>
 
                 <div>
                     <button ref="undoAction" v-show="showToolButton['undoAction']" class="tool-button" :class="buttonActiveClass('undoAction')" @click="buttonClick('undoAction')" v-ripple>
                         <q-icon name="la la-angle-left" size="32px"/>
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Действие назад</q-tooltip>
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['undoAction'] }}</q-tooltip>
                     </button>
                     <button ref="redoAction" v-show="showToolButton['redoAction']" class="tool-button" :class="buttonActiveClass('redoAction')" @click="buttonClick('redoAction')" v-ripple>
                         <q-icon name="la la-angle-right" size="32px"/>
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Действие вперед</q-tooltip>
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['redoAction'] }}</q-tooltip>
                     </button>
                     <div class="space"></div>
                     <button ref="fullScreen" v-show="showToolButton['fullScreen']" class="tool-button" :class="buttonActiveClass('fullScreen')" @click="buttonClick('fullScreen')" v-ripple>
                         <q-icon :name="(fullScreenActive ? 'la la-compress-arrows-alt': 'la la-expand-arrows-alt')" size="32px"/>
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">На весь экран</q-tooltip>
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['fullScreen'] }}</q-tooltip>
                     </button>
                     <button ref="scrolling" v-show="showToolButton['scrolling']" class="tool-button" :class="buttonActiveClass('scrolling')" @click="buttonClick('scrolling')" v-ripple>
                         <q-icon name="la la-film" size="32px"/>
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Плавный скроллинг</q-tooltip>
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['scrolling'] }}</q-tooltip>
                     </button>
                     <button ref="setPosition" v-show="showToolButton['setPosition']" class="tool-button" :class="buttonActiveClass('setPosition')" @click="buttonClick('setPosition')" v-ripple>
                         <q-icon name="la la-angle-double-right" size="32px"/>
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">На страницу</q-tooltip>
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['setPosition'] }}</q-tooltip>
                     </button>
                     <button ref="search" v-show="showToolButton['search']" class="tool-button" :class="buttonActiveClass('search')" @click="buttonClick('search')" v-ripple>
                         <q-icon name="la la-search" size="32px"/>
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Найти в тексте</q-tooltip>
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['search'] }}</q-tooltip>
                     </button>
                     <button ref="copyText" v-show="showToolButton['copyText']" class="tool-button" :class="buttonActiveClass('copyText')" @click="buttonClick('copyText')" v-ripple>
                         <q-icon name="la la-copy" size="32px"/>
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Скопировать текст со страницы</q-tooltip>
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['copyText'] }}</q-tooltip>
+                    </button>
+                    <button ref="splitToPara" v-show="showToolButton['splitToPara']" class="tool-button" :class="buttonActiveClass('splitToPara')" @click="buttonClick('splitToPara')" v-ripple>
+                        <q-icon name="la la-retweet" size="32px"/>
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['splitToPara'] }}</q-tooltip>
                     </button>
                     <button ref="refresh" v-show="showToolButton['refresh']" class="tool-button" :class="buttonActiveClass('refresh')" @click="buttonClick('refresh')" v-ripple>
-                        <q-icon name="la la-sync" size="32px"/>
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Принудительно обновить книгу в обход кэша</q-tooltip>
+                        <q-icon name="la la-sync" size="32px" :class="{clear: !showRefreshIcon}"/>
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['refresh'] }}</q-tooltip>
                     </button>
                     <div class="space"></div>
-                    <button ref="offlineMode" v-show="showToolButton['offlineMode']" class="tool-button" :class="buttonActiveClass('offlineMode')" @click="buttonClick('offlineMode')" v-ripple>
-                        <q-icon name="la la-unlink" size="32px"/>
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Автономный режим (без интернета)</q-tooltip>
+                    <button ref="contents" v-show="showToolButton['contents']" class="tool-button" :class="buttonActiveClass('contents')" @click="buttonClick('contents')" v-ripple>
+                        <q-icon name="la la-list" size="32px"/>
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['contents'] }}</q-tooltip>
+                    </button>
+                    <button ref="libs" v-show="mode == 'liberama.top' && showToolButton['libs']" class="tool-button" :class="buttonActiveClass('libs')" @click="buttonClick('libs')" v-ripple>
+                        <q-icon name="la la-sitemap" size="32px"/>
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['libs'] }}</q-tooltip>
                     </button>
                     <button ref="recentBooks" v-show="showToolButton['recentBooks']" class="tool-button" :class="buttonActiveClass('recentBooks')" @click="buttonClick('recentBooks')" v-ripple>
                         <q-icon name="la la-book-open" size="32px"/>
-                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">Открыть недавние</q-tooltip>
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['recentBooks'] }}</q-tooltip>
                     </button>
                 </div>
 
-                <button ref="settings" class="tool-button" :class="buttonActiveClass('settings')" @click="buttonClick('settings')" v-ripple>
-                    <q-icon name="la la-cog" size="32px"/>
-                    <q-tooltip :delay="1500" anchor="bottom left" content-style="font-size: 80%">Настроить</q-tooltip>
-                </button>
+                <div>
+                    <button ref="offlineMode" v-show="showToolButton['offlineMode']" class="tool-button" :class="buttonActiveClass('offlineMode')" @click="buttonClick('offlineMode')" v-ripple>
+                        <q-icon name="la la-unlink" size="32px"/>
+                        <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">{{ rstore.readerActions['offlineMode'] }}</q-tooltip>
+                    </button>
+                    <button ref="settings" class="tool-button" :class="buttonActiveClass('settings')" @click="buttonClick('settings')" v-ripple>
+                        <q-icon name="la la-cog" size="32px"/>
+                        <q-tooltip :delay="1500" anchor="bottom left" content-style="font-size: 80%">{{ rstore.readerActions['settings'] }}</q-tooltip>
+                    </button>
+                </div>
             </div>
         </div>
 
@@ -65,87 +81,27 @@
                     @load-book="loadBook"
                     @load-file="loadFile"
                     @book-pos-changed="bookPosChanged"
-                    @tool-bar-toggle="toolBarToggle"
-                    @full-screen-toogle="fullScreenToggle"
-                    @stop-scrolling="stopScrolling"
-                    @scrolling-toggle="scrollingToggle"
-                    @help-toggle="helpToggle"
-                    @donate-toggle="donateToggle"
+                    @do-action="doAction"
                 ></component>
             </keep-alive>
 
             <SetPositionPage v-if="setPositionActive" ref="setPositionPage" @set-position-toggle="setPositionToggle" @book-pos-changed="bookPosChanged"></SetPositionPage>
             <SearchPage v-show="searchActive" ref="searchPage" 
-                @search-toggle="searchToggle" 
+                @do-action="doAction"
                 @book-pos-changed="bookPosChanged"
                 @start-text-search="startTextSearch"
                 @stop-text-search="stopTextSearch">
             </SearchPage>
-            <CopyTextPage v-if="copyTextActive" ref="copyTextPage" @copy-text-toggle="copyTextToggle"></CopyTextPage>
+            <CopyTextPage v-if="copyTextActive" ref="copyTextPage" @do-action="doAction"></CopyTextPage>
+            <LibsPage v-show="hidden" ref="libsPage" @load-book="loadBook" @libs-close="libsClose" @do-action="doAction"></LibsPage>
             <RecentBooksPage v-show="recentBooksActive" ref="recentBooksPage" @load-book="loadBook" @recent-books-close="recentBooksClose"></RecentBooksPage>
-            <SettingsPage v-show="settingsActive" ref="settingsPage" @settings-toggle="settingsToggle"></SettingsPage>
-            <HelpPage v-if="helpActive" ref="helpPage" @help-toggle="helpToggle"></HelpPage>
+            <SettingsPage v-show="settingsActive" ref="settingsPage" @do-action="doAction"></SettingsPage>
+            <HelpPage v-if="helpActive" ref="helpPage" @do-action="doAction"></HelpPage>
             <ClickMapPage v-show="clickMapActive" ref="clickMapPage"></ClickMapPage>
             <ServerStorage v-show="hidden" ref="serverStorage"></ServerStorage>
+            <ContentsPage v-show="contentsActive" ref="contentsPage" @do-action="doAction" @book-pos-changed="bookPosChanged"></ContentsPage>
 
-            <Dialog ref="dialog1" v-model="whatsNewVisible">
-                <template slot="header">
-                    Что нового:
-                </template>
-
-                <div style="line-height: 20px" v-html="whatsNewContent"></div>
-
-                <span class="clickable" @click="openVersionHistory">Посмотреть историю версий</span>
-                <span slot="footer">
-                    <q-btn class="q-px-md" dense no-caps @click="whatsNewDisable">Больше не показывать</q-btn>
-                </span>
-            </Dialog>
-
-            <Dialog ref="dialog2" v-model="donationVisible">
-                <template slot="header">
-                    Здравствуйте, уважаемые читатели!
-                </template>
-
-                <div style="word-break: normal">
-                    Стартовала ежегодная акция "Оплатим хостинг вместе".<br><br>
-
-                    Для оплаты годового хостинга читалки, необходимо собрать около 2000 рублей.
-                    В настоящий момент у автора эта сумма есть в наличии. Однако будет справедливо, если каждый
-                    сможет проголосовать рублем за то, чтобы читалка так и оставалась:
-
-                    <ul>
-                        <li>непрерывно улучшаемой</li>
-                        <li>без рекламы</li>
-                        <li>без регистрации</li>
-                        <li>Open Source</li>
-                    </ul>
-
-                    Автор также обращается с просьбой о помощи в распространении 
-                    <a href="https://omnireader.ru" target="_blank">ссылки</a>
-                    <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%">Скопировать</q-tooltip>                    
-                    </q-icon>
-                    на читалку через тематические форумы, соцсети, мессенджеры и пр.
-                    Чем нас больше, тем легче оставаться на плаву и тем больше мотивации у разработчика, чтобы продолжать работать над проектом.
-
-                    <br><br>
-                    Если соберется бóльшая сумма, то разработка децентрализованной библиотеки для свободного обмена книгами будет по возможности ускорена.
-                    <br><br>
-                    P.S. При необходимости можно воспользоваться подходящим обменником на <a href="https://www.bestchange.ru" target="_blank">bestchange.ru</a>
-
-                    <br><br>
-                    <div class="row justify-center">
-                        <q-btn class="q-px-sm" color="primary" dense no-caps rounded @click="openDonate">Помочь проекту</q-btn>
-                    </div>
-                </div>
-
-                <span slot="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>
-                </span>
-            </Dialog>
-
+            <ReaderDialogs ref="dialogs" @donate-toggle="donateToggle" @version-history-toggle="versionHistoryToggle"></ReaderDialogs>
         </div>
     </div>
 </template>
@@ -164,17 +120,20 @@ import ProgressPage from './ProgressPage/ProgressPage.vue';
 import SetPositionPage from './SetPositionPage/SetPositionPage.vue';
 import SearchPage from './SearchPage/SearchPage.vue';
 import CopyTextPage from './CopyTextPage/CopyTextPage.vue';
+import LibsPage from './LibsPage/LibsPage.vue';
 import RecentBooksPage from './RecentBooksPage/RecentBooksPage.vue';
 import SettingsPage from './SettingsPage/SettingsPage.vue';
 import HelpPage from './HelpPage/HelpPage.vue';
 import ClickMapPage from './ClickMapPage/ClickMapPage.vue';
 import ServerStorage from './ServerStorage/ServerStorage.vue';
+import ContentsPage from './ContentsPage/ContentsPage.vue';
+
+import ReaderDialogs from './ReaderDialogs/ReaderDialogs.vue';
 
 import bookManager from './share/bookManager';
+import rstore from '../../store/modules/reader';
 import readerApi from '../../api/reader';
 import * as utils from '../../share/utils';
-import {versionHistory} from './versionHistory';
-import Dialog from '../share/Dialog.vue';
 
 export default @Component({
     components: {
@@ -185,12 +144,15 @@ export default @Component({
         SetPositionPage,
         SearchPage,
         CopyTextPage,
+        LibsPage,
         RecentBooksPage,
         SettingsPage,
         HelpPage,
         ClickMapPage,
         ServerStorage,
-        Dialog,
+        ContentsPage,
+
+        ReaderDialogs,
     },
     watch: {
         bookPos: function(newValue) {
@@ -232,7 +194,9 @@ export default @Component({
     },
 })
 class Reader extends Vue {
+    rstore = {};
     loaderActive = false;
+    offlineModeActive = false;
     progressActive = false;
     fullScreenActive = false;
 
@@ -240,11 +204,12 @@ class Reader extends Vue {
     setPositionActive = false;
     searchActive = false;
     copyTextActive = false;
+    libsActive = false;
     recentBooksActive = false;
-    offlineModeActive = false;
     settingsActive = false;
     helpActive = false;
     clickMapActive = false;
+    contentsActive = false;
 
     bookPos = null;
     allowUrlParamBookPos = false;
@@ -261,6 +226,7 @@ class Reader extends Vue {
     donationVisible = false;
 
     created() {
+        this.rstore = rstore;
         this.loading = true;
         this.commit = this.$store.commit;
         this.dispatch = this.$store.dispatch;
@@ -284,11 +250,11 @@ class Reader extends Vue {
                 await this.$nextTick();
                 this.paramPosIgnore = false;
             }
-        }, 500, {'maxWait':5000});
+        }, 500, {maxWait: 5000});
 
         this.scrollingSetRecentBook = _.debounce((newValue) => {
             this.debouncedSetRecentBook(newValue);
-        }, 15000, {'maxWait':20000});
+        }, 15000, {maxWait: 20000});
 
         document.addEventListener('fullscreenchange', () => {
             this.fullScreenActive = (document.fullscreenElement !== null);
@@ -317,10 +283,15 @@ class Reader extends Vue {
             this.checkActivateDonateHelpPage();
             this.loading = false;
 
+            //проверим состояние Settings, и обновим, если надо
+            const newSettings = rstore.addDefaultsToSettings(this.settings);
+            if (newSettings) {
+                this.commit('reader/setSettings', newSettings);
+            }
+
             this.updateRoute();
 
-            await this.showWhatsNew();
-            await this.showDonation();
+            await this.$refs.dialogs.init();
         })();
     }
 
@@ -331,11 +302,14 @@ class Reader extends Vue {
         this.showClickMapPage = settings.showClickMapPage;
         this.clickControl = settings.clickControl;
         this.blinkCachedLoad = settings.blinkCachedLoad;
-        this.showWhatsNewDialog = settings.showWhatsNewDialog;
-        this.showDonationDialog2020 = settings.showDonationDialog2020;
         this.showToolButton = settings.showToolButton;
         this.enableSitesFilter = settings.enableSitesFilter;
 
+        this.readerActionByKeyCode = utils.userHotKeysObjectSwap(settings.userHotKeys);
+        this.$root.readerActionByKeyEvent = (event) => {
+            return this.readerActionByKeyCode[utils.keyEventToCode(event)];
+        }
+
         this.updateHeaderMinWidth();
     }
 
@@ -391,64 +365,6 @@ class Reader extends Vue {
         }
     }
 
-    async showWhatsNew() {
-        await utils.sleep(2000);
-
-        const whatsNew = versionHistory[0];
-        if (this.showWhatsNewDialog &&
-            whatsNew.showUntil >= utils.formatDate(new Date(), 'coDate') &&
-            whatsNew.header != this.whatsNewContentHash) {
-            this.whatsNewContent = 'Версия ' + whatsNew.header + whatsNew.content;
-            this.whatsNewVisible = true;
-        }
-    }
-
-    async showDonation() {
-        await utils.sleep(3000);
-        const today = utils.formatDate(new Date(), 'coDate');
-
-        if (this.mode == 'omnireader' && today < '2020-03-01' && this.showDonationDialog2020 && this.donationRemindDate != today) {
-            this.donationVisible = true;
-        }
-    }
-
-    donationDialogDisable() {
-        this.donationVisible = false;
-        if (this.showDonationDialog2020) {
-            const newSettings = Object.assign({}, this.settings, { showDonationDialog2020: false });
-            this.commit('reader/setSettings', newSettings);
-        }
-    }
-
-    donationDialogRemind() {
-        this.donationVisible = false;
-        this.commit('reader/setDonationRemindDate', utils.formatDate(new Date(), 'coDate'));
-    }
-
-    openDonate() {
-        this.donationVisible = false;
-        this.donateToggle();
-    }
-
-    async copyLink(link) {
-        const result = await utils.copyTextToClipboard(link);
-        if (result)
-            this.$root.notify.success(`Ссылка ${link} успешно скопирована в буфер обмена`);
-        else
-            this.$root.notify.error('Копирование не удалось');
-    }
-
-    openVersionHistory() {
-        this.whatsNewVisible = false;
-        this.versionHistoryToggle();
-    }
-
-    whatsNewDisable() {
-        this.whatsNewVisible = false;
-        const whatsNew = versionHistory[0];
-        this.commit('reader/setWhatsNewContentHash', whatsNew.header);
-    }
-
     get routeParamPos() {
         let result = undefined;
         const q = this.$route.query;
@@ -552,14 +468,6 @@ class Reader extends Vue {
         return this.$store.state.reader.settings;
     }
 
-    get whatsNewContentHash() {
-        return this.$store.state.reader.whatsNewContentHash;
-    }
-
-    get donationRemindDate() {
-        return this.$store.state.reader.donationRemindDate;
-    }
-
     addAction(pos) {
         let a = this.actionList;
         if (!a.length || a[a.length - 1] != pos) {
@@ -584,7 +492,7 @@ class Reader extends Vue {
         }
     }
 
-    closeAllTextPages() {
+    closeAllWindows() {
         this.setPositionActive = false;
         this.copyTextActive = false;
         this.recentBooksActive = false;
@@ -592,12 +500,13 @@ class Reader extends Vue {
         this.stopScrolling();
         this.stopSearch();
         this.helpActive = false;
+        this.contentsActive = false;
     }
 
     loaderToggle() {
         this.loaderActive = !this.loaderActive;
         if (this.loaderActive) {
-            this.closeAllTextPages();
+            this.closeAllWindows();
         }
     }
 
@@ -605,7 +514,7 @@ class Reader extends Vue {
         this.setPositionActive = !this.setPositionActive;
         const page = this.$refs.page;
         if (this.setPositionActive && this.activePage == 'TextPage' && page.parsed) {
-            this.closeAllTextPages();
+            this.closeAllWindows();
             this.setPositionActive = true;
 
             this.$nextTick(() => {
@@ -657,7 +566,7 @@ class Reader extends Vue {
         this.searchActive = !this.searchActive;
         const page = this.$refs.page;
         if (this.searchActive && this.activePage == 'TextPage' && page.parsed) {
-            this.closeAllTextPages();
+            this.closeAllWindows();
             this.searchActive = true;
 
             this.$nextTick(() => {
@@ -673,7 +582,7 @@ class Reader extends Vue {
         this.copyTextActive = !this.copyTextActive;
         const page = this.$refs.page;
         if (this.copyTextActive && this.activePage == 'TextPage' && page.parsed) {
-            this.closeAllTextPages();
+            this.closeAllWindows();
             this.copyTextActive = true;
 
             this.$nextTick(() => {
@@ -691,7 +600,7 @@ class Reader extends Vue {
     recentBooksToggle() {
         this.recentBooksActive = !this.recentBooksActive;
         if (this.recentBooksActive) {
-            this.closeAllTextPages();
+            this.closeAllWindows();
             this.$refs.recentBooksPage.init();
             this.recentBooksActive = true;
         } else {
@@ -699,6 +608,35 @@ class Reader extends Vue {
         }
     }
 
+    contentsPageToggle() {
+        this.contentsActive = !this.contentsActive;
+        const page = this.$refs.page;
+        if (this.contentsActive && this.activePage == 'TextPage' && page.parsed) {
+            this.closeAllWindows();
+            this.contentsActive = true;
+
+            this.$nextTick(() => {
+                this.$refs.contentsPage.init(this.mostRecentBook(), page.parsed);
+            });
+        } else {
+            this.contentsActive = false;
+        }
+    }
+
+    libsClose() {
+        if (this.libsActive)
+            this.libsToogle();
+    }
+
+    libsToogle() {
+        this.libsActive = !this.libsActive;
+        if (this.libsActive) {
+            this.$refs.libsPage.init();
+        } else {
+            this.$refs.libsPage.done();
+        }
+    }
+
     offlineModeToggle() {
         this.offlineModeActive = !this.offlineModeActive;
         this.$refs.serverStorage.offlineModeActive = this.offlineModeActive;
@@ -707,7 +645,7 @@ class Reader extends Vue {
     settingsToggle() {
         this.settingsActive = !this.settingsActive;
         if (this.settingsActive) {
-            this.closeAllTextPages();
+            this.closeAllWindows();
             this.settingsActive = true;
 
             this.$nextTick(() => {
@@ -721,7 +659,7 @@ class Reader extends Vue {
     helpToggle() {
         this.helpActive = !this.helpActive;
         if (this.helpActive) {
-            this.closeAllTextPages();
+            this.closeAllWindows();
             this.helpActive = true;
         }
     }
@@ -744,85 +682,64 @@ class Reader extends Vue {
         }
     }
 
-    refreshBook() {
-        if (this.mostRecentBook()) {
-            this.loadBook({url: this.mostRecentBook().url, force: true});
+    refreshBook(mode) {
+        const mrb = this.mostRecentBook();
+        if (mrb) {
+            if (mode && mode == 'split') {
+                this.loadBook({url: mrb.url, uploadFileName: mrb.uploadFileName, skipCheck: true, isText: true, force: true});
+            } else {
+                this.loadBook({url: mrb.url, uploadFileName: mrb.uploadFileName, force: true});
+            }
         }
     }
 
-    buttonClick(button) {
-        const activeClass = this.buttonActiveClass(button);
+    undoAction() {
+        if (this.actionCur > 0) {
+            this.actionCur--;
+            this.bookPosChanged({bookPos: this.actionList[this.actionCur]});
+        }
+    }
 
-        this.$refs[button].blur();
+    redoAction() {
+        if (this.actionCur < this.actionList.length - 1) {
+            this.actionCur++;
+            this.bookPosChanged({bookPos: this.actionList[this.actionCur]});
+        }
+    }
+
+    buttonClick(action) {
+        const activeClass = this.buttonActiveClass(action);
+
+        this.$refs[action].blur();
 
         if (activeClass['tool-button-disabled'])
             return;
         
-        switch (button) {
-            case 'loader':
-                this.loaderToggle();
-                break;
-            case 'undoAction':
-                if (this.actionCur > 0) {
-                    this.actionCur--;
-                    this.bookPosChanged({bookPos: this.actionList[this.actionCur]});
-                }
-                break;
-            case 'redoAction':
-                if (this.actionCur < this.actionList.length - 1) {
-                    this.actionCur++;
-                    this.bookPosChanged({bookPos: this.actionList[this.actionCur]});
-                }
-                break;
-            case 'fullScreen':
-                this.fullScreenToggle();
-                break;
-            case 'setPosition':
-                this.setPositionToggle();
-                break;
-            case 'scrolling':
-                this.scrollingToggle();
-                break;
-            case 'search':
-                this.searchToggle();
-                break;
-            case 'copyText':
-                this.copyTextToggle();
-                break;
-            case 'refresh':
-                this.refreshBook();
-                break;
-            case 'recentBooks':
-                this.recentBooksToggle();
-                break;
-            case 'offlineMode':
-                this.offlineModeToggle();
-                break;
-            case 'settings':
-                this.settingsToggle();
-                break;
-        }
+        this.doAction({action});
     }
 
-    buttonActiveClass(button) {
+    buttonActiveClass(action) {
         const classActive = { 'tool-button-active': true, 'tool-button-active:hover': true };
         const classDisabled = { 'tool-button-disabled': true, 'tool-button-disabled:hover': true };
         let classResult = {};
 
-        switch (button) {
+        switch (action) {
             case 'loader':
             case 'fullScreen':
             case 'setPosition':
             case 'scrolling':
             case 'search':
             case 'copyText':
+            case 'splitToPara':
             case 'refresh':
-            case 'offlineMode':
+            case 'contents':
+            case 'libs':
             case 'recentBooks':
+            case 'offlineMode':
             case 'settings':
                 if (this.progressActive) {
                     classResult = classDisabled;
-                } else if (this[`${button}Active`]) {
+                } else if (this[`${action}Active`]) {
                     classResult = classActive;
                 }
                 break;
@@ -837,17 +754,19 @@ class Reader extends Vue {
         }
 
         if (this.activePage == 'LoaderPage' || !this.mostRecentBookReactive) {
-            switch (button) {
+            switch (action) {
                 case 'undoAction':
                 case 'redoAction':
                 case 'setPosition':
                 case 'scrolling':
                 case 'search':
                 case 'copyText':
+                case 'contents':
                     classResult = classDisabled;
                     break;
-                case 'recentBooks':
+                case 'splitToPara':
                 case 'refresh':
+                case 'recentBooks':
                     if (!this.mostRecentBookReactive)
                         classResult = classDisabled;
                     break;
@@ -922,12 +841,16 @@ class Reader extends Vue {
             return;
         }
 
-        this.closeAllTextPages();
+        this.closeAllWindows();
 
         let url = encodeURI(decodeURI(opts.url));
 
+        //TODO: убрать конвертирование 'file://' после 06.2021
+        if (url.length == 71 && url.indexOf('file://') == 0)
+            url = url.replace(/^file/, 'disk');
+
         if ((url.indexOf('http://') != 0) && (url.indexOf('https://') != 0) &&
-            (url.indexOf('file://') != 0))
+            (url.indexOf('disk://') != 0))
             url = 'http://' + url;
 
         // уже просматривается сейчас
@@ -958,6 +881,7 @@ class Reader extends Vue {
             wasOpened = (wasOpened ? wasOpened : {});
             const bookPos = (opts.bookPos !== undefined ? opts.bookPos : wasOpened.bookPos);
             const bookPosSeen = (opts.bookPos !== undefined ? opts.bookPos : wasOpened.bookPosSeen);
+            const uploadFileName = (opts.uploadFileName ? opts.uploadFileName : '');
 
             let book = null;
 
@@ -1000,9 +924,17 @@ class Reader extends Vue {
             // не удалось, скачиваем книгу полностью с конвертацией
             let loadCached = true;
             if (!book) {
-                book = await readerApi.loadBook({url, enableSitesFilter: this.enableSitesFilter}, (state) => {
-                    progress.setState(state);
-                });
+                book = await readerApi.loadBook({
+                        url,
+                        skipCheck: (opts.skipCheck ? true : false),
+                        isText: (opts.isText ? true : false),
+                        enableSitesFilter: this.enableSitesFilter,
+                        uploadFileName
+                    },
+                    (state) => {
+                        progress.setState(state);
+                    }
+                );
                 loadCached = false;
             }
 
@@ -1013,7 +945,7 @@ class Reader extends Vue {
             });
 
             // добавляем в историю
-            await bookManager.setRecentBook(Object.assign({bookPos, bookPosSeen}, addedBook));
+            await bookManager.setRecentBook(Object.assign({bookPos, bookPosSeen, uploadFileName}, addedBook));
             this.mostRecentBook();
             this.addAction(bookPos);
             this.updateRoute(true);
@@ -1030,7 +962,7 @@ class Reader extends Vue {
         } catch (e) {
             progress.hide(); this.progressActive = false;
             this.loaderActive = true;
-            this.$root.stdDialog.alert(e.message, 'Ошибка', {type: 'negative'});
+            this.$root.stdDialog.alert(e.message, 'Ошибка', {color: 'negative'});
         }
     }
 
@@ -1050,11 +982,11 @@ class Reader extends Vue {
 
             progress.hide(); this.progressActive = false;
 
-            await this.loadBook({url});
+            await this.loadBook({url, uploadFileName: opts.file.name, force: true});
         } catch (e) {
             progress.hide(); this.progressActive = false;
             this.loaderActive = true;
-            this.$root.stdDialog.alert(e.message, 'Ошибка', {type: 'negative'});
+            this.$root.stdDialog.alert(e.message, 'Ошибка', {color: 'negative'});
         }
     }
 
@@ -1086,83 +1018,168 @@ class Reader extends Vue {
         }
     }
 
+    doAction(opts) {
+        let result = true;
+        let {action = '', event = false} = opts;
+
+        switch (action) {
+            case 'loader':
+                this.loaderToggle();
+                break;
+            case 'help':
+                this.helpToggle();
+                break;
+            case 'undoAction':
+                this.undoAction();
+                break;
+            case 'redoAction':
+                this.redoAction();
+                break;
+            case 'fullScreen':
+                this.fullScreenToggle();
+                break;
+            case 'scrolling':
+                this.scrollingToggle();
+                break;
+            case 'stopScrolling':
+                this.stopScrolling();
+                break;
+            case 'setPosition':
+                this.setPositionToggle();
+                break;
+            case 'search':
+                this.searchToggle();
+                break;
+            case 'copyText':
+                this.copyTextToggle();
+                break;
+            case 'splitToPara':
+                this.refreshBook('split');
+                break;
+            case 'refresh':
+                this.refreshBook();
+                break;
+            case 'contents':
+                this.contentsPageToggle();
+                break;
+            case 'libs':
+                this.libsToogle();
+                break;
+            case 'recentBooks':
+                this.recentBooksToggle();
+                break;
+            case 'offlineMode':
+                this.offlineModeToggle();
+                break;
+            case 'settings':
+                this.settingsToggle();
+                break;
+            case 'switchToolbar':
+                this.toolBarToggle();
+                break;
+            case 'donate':
+                this.donateToggle();
+                break;
+            default:
+                result = false;
+                break;
+        }
+
+        if (!result && this.activePage == 'TextPage' && this.$refs.page) {
+            result = true;
+            const textPage = this.$refs.page;
+
+            switch (action) {
+                case 'bookBegin':
+                    textPage.doHome();
+                    break;
+                case 'bookEnd':
+                    textPage.doEnd();
+                    break;
+                case 'pageBack':
+                    textPage.doPageUp();
+                    break;
+                case 'pageForward':
+                    textPage.doPageDown();
+                    break;
+                case 'lineBack':
+                    textPage.doUp();
+                    break;
+                case 'lineForward':
+                    textPage.doDown();
+                    break;
+                case 'incFontSize':
+                    textPage.doFontSizeInc();
+                    break;
+                case 'decFontSize':
+                    textPage.doFontSizeDec();
+                    break;
+                case 'scrollingSpeedUp':
+                    textPage.doScrollingSpeedUp();
+                    break;
+                case 'scrollingSpeedDown':
+                    textPage.doScrollingSpeedDown();
+                    break;
+                default:
+                    result = false;
+                    break;
+            }
+        }
+
+        if (result && event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+
+        return result;
+    }
+
     keyHook(event) {
+        let result = false;
         if (this.$root.rootRoute() == '/reader') {
-            if (this.$root.stdDialog.active || this.$refs.dialog1.active || this.$refs.dialog2.active)
-                return;
+            if (this.$root.stdDialog.active)
+                return result;
 
-            let handled = false;
-            if (!handled && this.helpActive)
-                handled = this.$refs.helpPage.keyHook(event);
+            if (!result)
+                result = this.$refs.dialogs.keyHook(event);
 
-            if (!handled && this.settingsActive)
-                handled = this.$refs.settingsPage.keyHook(event);
+            if (!result && this.helpActive)
+                result = this.$refs.helpPage.keyHook(event);
 
-            if (!handled && this.recentBooksActive)
-                handled = this.$refs.recentBooksPage.keyHook(event);
+            if (!result && this.settingsActive)
+                result = this.$refs.settingsPage.keyHook(event);
 
-            if (!handled && this.setPositionActive)
-                handled = this.$refs.setPositionPage.keyHook(event);
+            if (!result && this.recentBooksActive)
+                result = this.$refs.recentBooksPage.keyHook(event);
 
-            if (!handled && this.searchActive)
-                handled = this.$refs.searchPage.keyHook(event);
+            if (!result && this.setPositionActive)
+                result = this.$refs.setPositionPage.keyHook(event);
 
-            if (!handled && this.copyTextActive)
-                handled = this.$refs.copyTextPage.keyHook(event);
+            if (!result && this.searchActive)
+                result = this.$refs.searchPage.keyHook(event);
 
-            if (!handled && this.$refs.page && this.$refs.page.keyHook)
-                handled = this.$refs.page.keyHook(event);
+            if (!result && this.copyTextActive)
+                result = this.$refs.copyTextPage.keyHook(event);
 
-            if (!handled && event.type == 'keydown') {
-                if (event.code == 'Escape')
-                    this.loaderToggle();
+            if (!result && this.contentsActive)
+                result = this.$refs.contentsPage.keyHook(event);
 
-                if (this.activePage == 'TextPage') {
-                    switch (event.code) {
-                        case 'KeyH':
-                        case 'F1':
-                            this.helpToggle();
-                            event.preventDefault();
-                            event.stopPropagation();
-                            break;
-                        case 'KeyZ':
-                            this.scrollingToggle();
-                            break;
-                        case 'KeyP':
-                            this.setPositionToggle();
-                            break;
-                        case 'KeyF':
-                            if (event.ctrlKey) {
-                                this.searchToggle();
-                                event.preventDefault();
-                                event.stopPropagation();
-                            }
-                            break;
-                        case 'KeyC':
-                            if (event.ctrlKey) {
-                                this.copyTextToggle();
-                                event.preventDefault();
-                                event.stopPropagation();
-                            }
-                            break;
-                        case 'KeyR':
-                            this.refreshBook();
-                            break;
-                        case 'KeyX':
-                            this.recentBooksToggle();
-                            event.preventDefault();
-                            event.stopPropagation();
-                            break;
-                        case 'KeyO':
-                            this.offlineModeToggle();
-                            break;
-                        case 'KeyS':
-                            this.settingsToggle();
-                            break;
-                    }
+            if (!result && this.$refs.page && this.$refs.page.keyHook)
+                result = this.$refs.page.keyHook(event);
+
+            if (!result && event.type == 'keydown') {
+                const action = this.$root.readerActionByKeyEvent(event);
+
+                if (action == 'loader') {
+                    result = this.doAction({action, event});
+                }
+
+                if (!result && this.activePage == 'TextPage') {
+                    result = this.doAction({action, event});
                 }
             }
         }
+        return result;
     }
 }
 //-----------------------------------------------------------------------------
@@ -1237,16 +1254,4 @@ class Reader extends Vue {
 .clear {
     color: rgba(0,0,0,0);
 }
-
-.clickable {
-    color: blue;
-    text-decoration: underline;
-    cursor: pointer;
-}
-
-.copy-icon {
-    cursor: pointer;
-    font-size: 120%;
-    color: blue;
-}
 </style>

client/components/Reader/ReaderDialogs/ReaderDialogs.vue

@@ -0,0 +1,250 @@
+<template>
+    <div>
+        <Dialog ref="dialog1" v-model="whatsNewVisible">
+            <template slot="header">
+                Что нового:
+            </template>
+
+            <div style="line-height: 20px" v-html="whatsNewContent"></div>
+
+            <span class="clickable" @click="openVersionHistory">Посмотреть историю версий</span>
+            <span slot="footer">
+                <q-btn class="q-px-md" dense no-caps @click="whatsNewDisable">Больше не показывать</q-btn>
+            </span>
+        </Dialog>
+
+        <Dialog ref="dialog2" v-model="donationVisible">
+            <template slot="header">
+                Здравствуйте, уважаемые читатели!
+            </template>
+
+            <div style="word-break: normal">
+                Стартовала ежегодная акция "Оплатим хостинг вместе".<br><br>
+
+                Для оплаты годового хостинга читалки, необходимо собрать около 2000 рублей.
+                В настоящий момент у автора эта сумма есть в наличии. Однако будет справедливо, если каждый
+                сможет проголосовать рублем за то, чтобы читалка так и оставалась:
+
+                <ul>
+                    <li>непрерывно улучшаемой</li>
+                    <li>без рекламы</li>
+                    <li>без регистрации</li>
+                    <li>Open Source</li>
+                </ul>
+
+                Автор также обращается с просьбой о помощи в распространении 
+                <a href="https://omnireader.ru" target="_blank">ссылки</a>
+                <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%">Скопировать</q-tooltip>                    
+                </q-icon>
+                на читалку через тематические форумы, соцсети, мессенджеры и пр.
+                Чем нас больше, тем легче оставаться на плаву и тем больше мотивации у разработчика, чтобы продолжать работать над проектом.
+
+                <br><br>
+                Если соберется бóльшая сумма, то разработка децентрализованной библиотеки для свободного обмена книгами будет по возможности ускорена.
+                <br><br>
+                P.S. При необходимости можно воспользоваться подходящим обменником на <a href="https://www.bestchange.ru" target="_blank">bestchange.ru</a>
+
+                <br><br>
+                <div class="row justify-center">
+                    <q-btn class="q-px-sm" color="primary" dense no-caps rounded @click="openDonate">Помочь проекту</q-btn>
+                </div>
+            </div>
+
+            <span slot="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>
+            </span>
+        </Dialog>
+
+        <Dialog ref="dialog3" v-model="liberamaTopVisible">
+            <template slot="header">
+                Здравствуйте, уважаемые читатели!
+            </template>
+
+            <div style="word-break: normal">
+                Создан новый ресурс:<br><br>
+
+                <a href="https://liberama.top" target="_blank">https://liberama.top</a>
+                <br><br>
+                Это клон читалки Omni Reader, но с некоторыми дополнениями, ориентированными в сторону более свободного обмена книгами:
+
+                <ul>
+                    <li>добавлено новое окно "Библиотека" для свободного доступа к Флибусте и другим ресурсам по желанию читателя</li>
+                    <li>планируется добавить возможность создания подборок книг и обмена ими между пользователями</li>
+                </ul>
+
+                Легко мигрировать на новый сайт можно с помощью синхронизации с сервером.
+                О багах и предложениях просьба сообщать на почту <a href="mailto:bookpauk@gmail.com">bookpauk@gmail.com</a><br><br>
+                Спасибо, что вы с нами!
+                <br><br>
+                <div class="row justify-center">
+                    <q-btn class="q-px-sm" color="primary" dense no-caps rounded @click="openDonate">Помочь проекту</q-btn>
+                </div>
+            </div>
+
+            <span slot="footer">
+                <q-btn class="q-px-sm" dense no-caps @click="liberamaTopDialogDisable">Больше не показывать</q-btn>
+            </span>
+        </Dialog>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import Dialog from '../../share/Dialog.vue';
+import * as utils from '../../../share/utils';
+import {versionHistory} from '../versionHistory';
+
+export default @Component({
+    components: {
+        Dialog
+    },
+    watch: {
+        settings: function() {
+            this.loadSettings();
+        },
+    },
+})
+class ReaderDialogs extends Vue {
+    whatsNewVisible = false;
+    whatsNewContent = '';
+    donationVisible = false;
+    liberamaTopVisible = false;
+
+    created() {
+        this.commit = this.$store.commit;
+        this.loadSettings();
+    }
+
+    mounted() {
+    }
+
+    async init() {
+        await this.showWhatsNew();
+        await this.showDonation();
+        await this.showLiberamaTop();
+    }
+
+    loadSettings() {
+        const settings = this.settings;
+        this.showWhatsNewDialog = settings.showWhatsNewDialog;
+        this.showDonationDialog2020 = settings.showDonationDialog2020;
+        this.showLiberamaTopDialog2020 = settings.showLiberamaTopDialog2020;
+    }
+
+    async showWhatsNew() {
+        const whatsNew = versionHistory[0];
+        if (this.showWhatsNewDialog &&
+            whatsNew.showUntil >= utils.formatDate(new Date(), 'coDate') &&
+            whatsNew.header != this.whatsNewContentHash) {
+            await utils.sleep(2000);
+            this.whatsNewContent = 'Версия ' + whatsNew.header + whatsNew.content;
+            this.whatsNewVisible = true;
+        }
+    }
+
+    async showDonation() {
+        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;
+        }
+    }
+
+    donationDialogDisable() {
+        this.donationVisible = false;
+        if (this.showDonationDialog2020) {
+            this.commit('reader/setSettings', { showDonationDialog2020: false });
+        }
+    }
+
+    donationDialogRemind() {
+        this.donationVisible = false;
+        this.commit('reader/setDonationRemindDate', utils.formatDate(new Date(), 'coDate'));
+    }
+
+    openDonate() {
+        this.donationVisible = false;
+        this.liberamaTopVisible = false;
+        this.$emit('donate-toggle');
+    }
+
+    async copyLink(link) {
+        const result = await utils.copyTextToClipboard(link);
+        if (result)
+            this.$root.notify.success(`Ссылка ${link} успешно скопирована в буфер обмена`);
+        else
+            this.$root.notify.error('Копирование не удалось');
+    }
+
+    openVersionHistory() {
+        this.whatsNewVisible = false;
+        this.$emit('version-history-toggle');
+    }
+
+    whatsNewDisable() {
+        this.whatsNewVisible = false;
+        const whatsNew = versionHistory[0];
+        this.commit('reader/setWhatsNewContentHash', whatsNew.header);
+    }
+
+    get mode() {
+        return this.$store.state.config.mode;
+    }
+
+    get settings() {
+        return this.$store.state.reader.settings;
+    }
+
+    get whatsNewContentHash() {
+        return this.$store.state.reader.whatsNewContentHash;
+    }
+
+    get donationRemindDate() {
+        return this.$store.state.reader.donationRemindDate;
+    }
+
+    async showLiberamaTop() {
+        const today = utils.formatDate(new Date(), 'coDate');
+
+        if (this.mode == 'omnireader' && today < '2020-12-01' && this.showLiberamaTopDialog2020) {
+            await utils.sleep(3000);
+            this.liberamaTopVisible = true;
+        }
+    }
+
+    liberamaTopDialogDisable()  {
+        this.liberamaTopVisible = false;
+        if (this.showLiberamaTopDialog2020) {
+            this.commit('reader/setSettings', { showLiberamaTopDialog2020: false });
+        }
+    }
+
+    keyHook() {
+        if (this.$refs.dialog1.active || this.$refs.dialog2.active || this.$refs.dialog3.active)
+            return true;
+        return false;
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.clickable {
+    color: blue;
+    text-decoration: underline;
+    cursor: pointer;
+}
+
+.copy-icon {
+    cursor: pointer;
+    font-size: 120%;
+    color: blue;
+}
+</style>

client/components/Reader/RecentBooksPage/RecentBooksPage.vue

@@ -5,7 +5,7 @@
             <span v-if="loading"><q-spinner class="q-mr-sm" color="lime-12" size="20px" :thickness="7"/>Список загружается</span>
         </template>
 
-        <a ref="download" style='display: none;'></a>
+        <a ref="download" style='display: none;' target="_blank"></a>
 
         <q-table
             class="recent-books-table col"
@@ -59,7 +59,7 @@
                     <q-td key="links" :props="props" class="td-mp" auto-width>
                         <div class="break-word" style="width: 75px; font-size: 90%">
                             <a v-show="isUrl(props.row.url)" :href="props.row.url" target="_blank">Оригинал</a><br>
-                            <a :href="props.row.path" @click.prevent="downloadBook(props.row.path)">Скачать FB2</a>
+                            <a :href="props.row.path" @click.prevent="downloadBook(props.row.path, props.row.fullTitle)">Скачать FB2</a>
                         </div>
                     </q-td>
 
@@ -87,7 +87,7 @@
 import Vue from 'vue';
 import Component from 'vue-class-component';
 import path from 'path';
-import _ from 'lodash';
+//import _ from 'lodash';
 
 import * as utils from '../../../share/utils';
 import Window from '../../share/Window.vue';
@@ -112,6 +112,7 @@ class RecentBooksPage extends Vue {
     pagination = {};
 
     created() {
+        this.firstInit = true;
         this.pagination = {rowsPerPage: 0};
 
         this.columns = [
@@ -167,26 +168,11 @@ class RecentBooksPage extends Vue {
             this.initing = true;
 
 
-            if (!bookManager.loaded) {
-                await this.updateTableData(10);
-                //для отзывчивости
-                await utils.sleep(100);
-                let i = 0;
-                let j = 5;
-                while (i < 500 && !bookManager.loaded) {
-                    if (i % j == 0) {
-                        bookManager.sortedRecentCached = null;
-                        await this.updateTableData(20);
-                        j *= 2;
-                    }
-
-                    await utils.sleep(100);
-                    i++;
-                }
-            } else {
-                //для отзывчивости
-                await utils.sleep(100);
+            if (this.firstInit) {//для отзывчивости
+                await this.updateTableData(20);
+                this.firstInit = false;
             }
+            await utils.sleep(50);
             await this.updateTableData();
             this.initing = false;
         })();
@@ -222,30 +208,11 @@ class RecentBooksPage extends Vue {
                 textLen = ` ${Math.round(book.textLength/1000)}k`;
             }
 
-            const fb2 = (book.fb2 ? book.fb2 : {});
+            const bt = utils.getBookTitle(book.fb2);
 
-            let title = fb2.bookTitle;
-            if (title)
-                title = `"${title}"`;
-            else
-                title = '';
-
-            let author = '';
-            if (fb2.author) {
-                const authorNames = fb2.author.map(a => _.compact([
-                    a.lastName,
-                    a.firstName,
-                    a.middleName
-                ]).join(' '));
-                author = authorNames.join(', ');
-            } else {//TODO: убрать в будущем
-                author = _.compact([
-                    fb2.lastName,
-                    fb2.firstName,
-                    fb2.middleName
-                ]).join(' ');
-            }
-            author = (author ? author : (fb2.bookTitle ? fb2.bookTitle : book.url));
+            let title = bt.bookTitle;
+            title = (title ? `"${title}"`: '');
+            const author = (bt.author ? bt.author : (bt.bookTitle ? bt.bookTitle : book.url));
 
             result.push({
                 num,
@@ -256,9 +223,10 @@ class RecentBooksPage extends Vue {
                     author,
                     title: `${title}${perc}${textLen}`,
                 },
-                descString: `${author}${title}${perc}${textLen}`,
+                descString: `${author}${title}${perc}${textLen}`,//для сортировки
                 url: book.url,
                 path: book.path,
+                fullTitle: bt.fullTitle,
                 key: book.key,
             });
         }
@@ -291,30 +259,28 @@ class RecentBooksPage extends Vue {
         return `${(this.search ? 'Найдено' : 'Всего')} ${len} книг${this.wordEnding(len)}`;
     }
 
-    async downloadBook(fb2path) {
+    async downloadBook(fb2path, fullTitle) {
         try {
             await readerApi.checkCachedBook(fb2path);
 
             const d = this.$refs.download;
             d.href = fb2path;
-            d.download = path.basename(fb2path).substr(0, 10) + '.fb2';
+            try {
+                const fn = utils.makeValidFilename(fullTitle);
+                d.download = fn.substring(0, 100) + '.fb2';
+            } catch(e) {
+                d.download = path.basename(fb2path).substr(0, 10) + '.fb2';
+            }
+
             d.click();
         } catch (e) {
             let errMes = e.message;
             if (errMes.indexOf('404') >= 0)
                 errMes = 'Файл не найден на сервере (возможно был удален как устаревший)';
-            this.$root.stdDialog.alert(errMes, 'Ошибка', {type: 'negative'});
+            this.$root.stdDialog.alert(errMes, 'Ошибка', {color: 'negative'});
         }
     }
 
-    openOriginal(url) {
-        window.open(url, '_blank');
-    }
-
-    openFb2(path) {
-        window.open(path, '_blank');
-    }
-
     async handleDel(key) {
         await bookManager.delRecentBook({key});
         //this.updateTableData();//обновление уже происходит Reader.bookManagerEvent
@@ -330,7 +296,7 @@ class RecentBooksPage extends Vue {
 
     isUrl(url) {
         if (url)
-            return (url.indexOf('file://') != 0);
+            return (url.indexOf('disk://') != 0);
         else
             return false;
     }
@@ -340,7 +306,7 @@ class RecentBooksPage extends Vue {
     }
 
     keyHook(event) {
-        if (!this.$root.stdDialog.active && event.type == 'keydown' && event.code == 'Escape') {
+        if (!this.$root.stdDialog.active && event.type == 'keydown' && event.key == 'Escape') {
             this.close();
         }
         return true;

client/components/Reader/SearchPage/SearchPage.vue

@@ -164,7 +164,7 @@ class SearchPage extends Vue {
 
     close() {
         this.stopInit = true;
-        this.$emit('search-toggle');
+        this.$emit('do-action', {action: 'search'});
     }
 
     inputKeyDown(event) {
@@ -174,7 +174,7 @@ class SearchPage extends Vue {
     }
 
     keyHook(event) {
-        if (event.type == 'keydown' && (event.code == 'Escape')) {
+        if (event.type == 'keydown' && event.key == 'Escape') {
             this.close();
         }
         return true;

client/components/Reader/ServerStorage/ServerStorage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div></div>
+    <div class="hidden"></div>
 </template>
 
 <script>
@@ -35,6 +35,9 @@ export default @Component({
         currentProfile: function() {
             this.currentProfileChanged(true);
         },
+        libs: function() {
+            this.debouncedSaveLibs();
+        },
     },
 })
 class ServerStorage extends Vue {
@@ -49,27 +52,32 @@ class ServerStorage extends Vue {
             this.saveSettings();
         }, 500);
 
+        this.debouncedSaveLibs = _.debounce(() => {
+            this.saveLibs();
+        }, 500);
+
         this.debouncedNotifySuccess = _.debounce(() => {
             this.success('Данные синхронизированы с сервером');
         }, 1000);
 
         this.oldProfiles = {};
         this.oldSettings = {};
+        this.oldLibs = {};
     }
 
     async init() {
         try {
             this.cachedRecent = await ssCacheStore.getItem('recent');
             if (!this.cachedRecent)
-                await this.setCachedRecent({rev: 0, data: {}});
+                await this.cleanCachedRecent('cachedRecent');
 
             this.cachedRecentPatch = await ssCacheStore.getItem('recent-patch');
             if (!this.cachedRecentPatch)
-                await this.setCachedRecentPatch({rev: 0, data: {}});
+                await this.cleanCachedRecent('cachedRecentPatch');
 
             this.cachedRecentMod = await ssCacheStore.getItem('recent-mod');
             if (!this.cachedRecentMod)
-                await this.setCachedRecentMod({rev: 0, data: {}});
+                await this.cleanCachedRecent('cachedRecentMod');
 
             if (!this.serverStorageKey) {
                 //генерируем новый ключ
@@ -97,6 +105,15 @@ class ServerStorage extends Vue {
         this.cachedRecentMod = value;
     }
 
+    async cleanCachedRecent(whatToClean) {
+        if (whatToClean == 'cachedRecent' || whatToClean == 'all')
+            await this.setCachedRecent({rev: 0, data: {}});
+        if (whatToClean == 'cachedRecentPatch' || whatToClean == 'all')
+            await this.setCachedRecentPatch({rev: 0, data: {}});
+        if (whatToClean == 'cachedRecentMod' || whatToClean == 'all')
+            await this.setCachedRecentMod({rev: 0, data: {}});
+    }
+
     async generateNewServerStorageKey() {
         const key = utils.toBase58(utils.randomArray(32));
         this.commit('reader/setServerStorageKey', key);
@@ -124,9 +141,14 @@ class ServerStorage extends Vue {
             await this.loadProfiles(force);
             this.checkCurrentProfile();
             await this.currentProfileChanged(force);
+            await this.loadLibs(force);
+
+            if (force)
+                await this.cleanCachedRecent('all');
             const loadSuccess = await this.loadRecent();
-            if (loadSuccess && force)
+            if (loadSuccess && force) {
                 await this.saveRecent();
+            }
         }
     }
 
@@ -169,6 +191,14 @@ class ServerStorage extends Vue {
         return this.settings.showServerStorageMessages;
     }
 
+    get libs() {
+        return this.$store.state.reader.libs;
+    }
+
+    get libsRev() {
+        return this.$store.state.reader.libsRev;
+    }
+
     checkCurrentProfile() {
         if (!this.profiles[this.currentProfile]) {
             this.commit('reader/setCurrentProfile', '');
@@ -186,8 +216,15 @@ class ServerStorage extends Vue {
     }
 
     error(message) {
-        if (this.showServerStorageMessages && !this.offlineModeActive)
-            this.$root.notify.error(message);
+        if (this.showServerStorageMessages && !this.offlineModeActive) {
+            this.errorMessageCounter = (this.errorMessageCounter ? this.errorMessageCounter + 1 : 1);
+            const hint = (this.errorMessageCounter < 2 ? '' :
+                '<div><br>Надоело это сообщение? Добавьте в настройках кнопку "Автономный режим" ' +
+                '<i class="la la-unlink" style="font-size: 20px; color: white"></i> на панель инструментов и активируйте ее.</div>'
+            );
+
+            this.$root.notify.error(message + hint);
+        }
     }
 
     async loadSettings(force = false, doNotifySuccess = true) {
@@ -338,13 +375,85 @@ class ServerStorage extends Vue {
                 this.warning(`Последние изменения отменены. Данные синхронизированы с сервером.`);
             } else if (result.state == 'success') {
                 this.oldProfiles = _.cloneDeep(this.profiles);
-                this.commit('reader/setProfilesRev', this.profilesRev + 1);        
+                this.commit('reader/setProfilesRev', this.profilesRev + 1);
             }
         } finally {
             this.savingProfiles = false;
         }
     }
 
+    async loadLibs(force = false, doNotifySuccess = true) {
+        if (!this.keyInited || !this.serverSyncEnabled)
+            return;
+
+        const oldRev = this.libsRev;
+        //проверим ревизию на сервере
+        if (!force) {
+            try {
+                const revs = await this.storageCheck({libs: {}});
+                if (revs.state == 'success' && revs.items.libs.rev == oldRev) {
+                    return;
+                }
+            } catch(e) {
+                this.error(`Ошибка соединения с сервером: ${e.message}`);
+                return;
+            }
+        }
+
+        let libs = null;
+        try {
+            libs = await this.storageGet({libs: {}});
+        } catch(e) {
+            this.error(`Ошибка соединения с сервером: ${e.message}`);
+            return;
+        }
+
+        if (libs.state == 'success') {
+            libs = libs.items.libs;
+
+            if (libs.rev == 0)
+                libs.data = {};
+
+            this.oldLibs = _.cloneDeep(libs.data);
+            this.commit('reader/setLibs', libs.data);
+            this.commit('reader/setLibsRev', libs.rev);
+
+            if (doNotifySuccess)
+                this.debouncedNotifySuccess();
+        } else {
+            this.warning(`Неверный ответ сервера: ${libs.state}`);
+        }
+    }
+
+    async saveLibs() {
+        if (!this.keyInited || !this.serverSyncEnabled || this.savingLibs)
+            return;
+
+        const diff = utils.getObjDiff(this.oldLibs, this.libs);
+        if (utils.isEmptyObjDiff(diff))
+            return;
+
+        this.savingLibs = true;
+        try {
+            let result = {state: ''};
+            try {
+                result = await this.storageSet({libs: {rev: this.libsRev + 1, data: this.libs}});
+            } catch(e) {
+                this.error(`Ошибка соединения с сервером (${e.message}). Данные не сохранены и могут быть перезаписаны.`);
+            }
+
+            if (result.state == 'reject') {
+                await this.loadLibs(true, false);
+                this.warning(`Последние изменения отменены. Данные синхронизированы с сервером.`);
+            } else if (result.state == 'success') {
+                this.oldLibs = _.cloneDeep(this.libs);
+                this.commit('reader/setLibsRev', this.libsRev + 1);
+            }
+        } finally {
+            this.savingLibs = false;
+        }
+    }
+
     async loadRecent(skipRevCheck = false, doNotifySuccess = true) {
         if (!this.keyInited || !this.serverSyncEnabled || this.loadingRecent)
             return;
@@ -403,12 +512,12 @@ class ServerStorage extends Vue {
 
                 const md = newRecentMod.data;
                 if (md.key && result[md.key])
-                    result[md.key] = utils.applyObjDiff(result[md.key], md.mod, true);
+                    result[md.key] = utils.applyObjDiff(result[md.key], md.mod, {isAddChanged: true});
 
-                if (!bookManager.loaded) {
+                /*if (!bookManager.loaded) {
                     this.warning('Ожидание загрузки списка книг перед синхронизацией');
                     while (!bookManager.loaded) await utils.sleep(100);
-                }
+                }*/
 
                 if (newRecent.rev != this.cachedRecent.rev)
                     await this.setCachedRecent(newRecent);
@@ -467,7 +576,7 @@ class ServerStorage extends Vue {
 
                 let applyMod = this.cachedRecentMod.data;
                 if (applyMod && applyMod.key && newRecentPatch.data[applyMod.key])
-                    newRecentPatch.data[applyMod.key] = utils.applyObjDiff(newRecentPatch.data[applyMod.key], applyMod.mod, true);
+                    newRecentPatch.data[applyMod.key] = utils.applyObjDiff(newRecentPatch.data[applyMod.key], applyMod.mod, {isAddChanged: true});
 
                 newRecentMod = {rev: this.cachedRecentMod.rev + 1, data: {}};
                 needSaveRecentPatch = true;
@@ -478,8 +587,8 @@ class ServerStorage extends Vue {
             let newRecent = {};
             if (!itemKey || (needSaveRecentPatch && Object.keys(newRecentPatch.data).length > 10)) {
                 //ждем весь bm.recent
-                while (!bookManager.loaded)
-                    await utils.sleep(100);
+                /*while (!bookManager.loaded)
+                    await utils.sleep(100);*/
 
                 newRecent = {rev: this.cachedRecent.rev + 1, data: _.cloneDeep(bm.recent)};
                 newRecentPatch = {rev: this.cachedRecentPatch.rev + 1, data: {}};

client/components/Reader/SetPositionPage/SetPositionPage.vue

@@ -58,8 +58,11 @@ class SetPositionPage extends Vue {
     }
 
     keyHook(event) {
-        if (event.type == 'keydown' && (event.code == 'Escape' || event.code == 'KeyP')) {
-            this.close();
+        if (event.type == 'keydown') {
+            const action = this.$root.readerActionByKeyEvent(event);
+            if (event.key == 'Escape' || action == 'setPosition') {
+                this.close();
+            }
         }
         return true;
     }

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -46,7 +46,7 @@
                     @@include('./include/ButtonsTab.inc');
                 </div>
                 <!-- Управление ------------------------------------------------------------------>
-                <div v-if="selectedTab == 'keys'" class="fit tab-panel">
+                <div v-if="selectedTab == 'keys'" class="fit column">
                     @@include('./include/KeysTab.inc');
                 </div>
                 <!-- Листание -------------------------------------------------------------------->
@@ -76,6 +76,8 @@ import _ from 'lodash';
 import * as utils from '../../../share/utils';
 import Window from '../../share/Window.vue';
 import NumInput from '../../share/NumInput.vue';
+import UserHotKeys from './UserHotKeys/UserHotKeys.vue';
+
 import rstore from '../../../store/modules/reader';
 import defPalette from './defPalette';
 
@@ -85,6 +87,7 @@ export default @Component({
     components: {
         Window,
         NumInput,
+        UserHotKeys,
     },
     data: function() {
         return Object.assign({}, rstore.settingDefaults);
@@ -105,8 +108,10 @@ export default @Component({
         },
         vertShift: function(newValue) {
             const font = (this.webFontName ? this.webFontName : this.fontName);
-            this.fontShifts = Object.assign({}, this.fontShifts, {[font]: newValue});
-            this.fontVertShift = newValue;
+            if (this.fontShifts[font] != newValue) {
+                this.fontShifts = Object.assign({}, this.fontShifts, {[font]: newValue});
+                this.fontVertShift = newValue;
+            }
         },
         fontName: function(newValue) {
             const font = (this.webFontName ? this.webFontName : newValue);
@@ -139,6 +144,7 @@ export default @Component({
 class SettingsPage extends Vue {
     selectedTab = 'profiles';
     selectedViewTab = 'color';
+    selectedKeysTab = 'mouse';
     form = {};
     fontBold = false;
     fontItalic = false;
@@ -152,12 +158,14 @@ class SettingsPage extends Vue {
 
     serverStorageKeyVisible = false;
     toolButtons = [];
+    rstore = {};
 
     created() {
         this.commit = this.$store.commit;
         this.reader = this.$store.state.reader;
 
         this.form = {};
+        this.rstore = rstore;
         this.toolButtons = rstore.toolButtons;
         this.settingsChanged();
     }
@@ -179,10 +187,18 @@ class SettingsPage extends Vue {
     settingsChanged() {
         if (_.isEqual(this.form, this.settings))
             return;
+
         this.form = Object.assign({}, this.settings);
+        if (!this.unwatch)
+            this.unwatch = {};
+
         for (let prop in rstore.settingDefaults) {
+            if (this.unwatch && this.unwatch[prop])
+                this.unwatch[prop]();
+
             this[prop] = this.form[prop];
-            this.$watch(prop, (newValue) => {
+
+            this.unwatch[prop] = this.$watch(prop, (newValue) => {
                 this.form = Object.assign({}, this.form, {[prop]: newValue});
             });
         }
@@ -339,7 +355,7 @@ class SettingsPage extends Vue {
     }
 
     close() {
-        this.$emit('settings-toggle');
+        this.$emit('do-action', {action: 'settings'});
     }
 
     async setDefaults() {
@@ -391,7 +407,7 @@ class SettingsPage extends Vue {
             return;
 
         try {
-            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Удаление профиля '${this.currentProfile}' необратимо.` +
+            const result = await this.$root.stdDialog.prompt(`<b>Предупреждение!</b> Удаление профиля '${this.$sanitize(this.currentProfile)}' необратимо.` +
                     `<br>Все настройки профиля будут потеряны, однако список читаемых книг сохранится.` +
                     `<br><br>Введите 'да' для подтверждения удаления:`, ' ', {
                 inputValidator: (str) => { if (str && str.toLowerCase() === 'да') return true; else return 'Удаление не подтверждено'; },
@@ -493,7 +509,7 @@ class SettingsPage extends Vue {
     }
 
     keyHook(event) {
-        if (!this.$root.stdDialog.active && event.type == 'keydown' && event.code == 'Escape') {
+        if (!this.$root.stdDialog.active && event.type == 'keydown' && event.key == 'Escape') {
             this.close();
         }
         return true;

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

@@ -0,0 +1,252 @@
+<template>
+    <div class="table col column no-wrap">
+        <!-- header -->
+        <div class="table-row row">
+            <div class="desc q-pa-sm bg-blue-2">Команда</div>
+            <div class="hotKeys col q-pa-sm bg-blue-2 row no-wrap">
+                <div style="width: 80px">Сочетание клавиш</div>
+                <q-input ref="input" class="q-ml-sm col"
+                    outlined dense rounded
+                    bg-color="grey-4"
+                    placeholder="Найти"
+                    v-model="search"
+                    @click.stop
+                />
+                <div v-show="!readonly" class="q-ml-sm column justify-center">
+                    <q-btn class="bg-grey-4 text-grey-6" style="height: 35px; width: 35px" rounded flat icon="la la-broom" @click="defaultHotKeyAll">
+                        <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                            Установить все сочетания по умолчанию
+                        </q-tooltip>
+                    </q-btn>
+                </div>
+            </div>
+        </div>
+
+        <!-- body -->
+        <div class="table-row row" v-for="(action, index) in tableData" :key="index">
+            <div class="desc q-pa-sm">{{ rstore.readerActions[action] }}</div>
+            <div class="hotKeys col q-pa-sm">
+                <q-chip
+                    :color="collisions[code] ? 'red' : 'grey-7'"
+                    :removable="!readonly" :clickable="collisions[code] ? true : false"
+                    text-color="white" v-for="(code, index) in value[action]" :key="index" @remove="removeCode(action, code)"
+                    @click="collisionWarning(code)"
+                    >
+                    {{ code }}
+                </q-chip>
+            </div>
+            <div v-show="!readonly" class="column q-pa-xs">
+                <q-icon
+                    name="la la-plus-circle"
+                    class="button bg-green-8 text-white"
+                    @click="addHotKey(action)"
+                    v-ripple
+                    :disabled="value[action].length >= maxCodesLength"
+                >
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        Добавить сочетание клавиш
+                    </q-tooltip>
+                </q-icon>
+                <q-icon
+                    name="la la-broom"
+                    class="button text-grey-5"
+                    @click="defaultHotKey(action)"
+                    v-ripple
+                >
+                    <q-tooltip :delay="1000" anchor="top middle" self="bottom middle" content-style="font-size: 80%">
+                        По умолчанию
+                    </q-tooltip>
+                </q-icon>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+//-----------------------------------------------------------------------------
+import Vue from 'vue';
+import Component from 'vue-class-component';
+
+import rstore from '../../../../store/modules/reader';
+//import * as utils from '../../share/utils';
+
+const UserHotKeysProps = Vue.extend({
+    props: {
+        value: Object,
+        readonly: Boolean,
+    }
+});
+
+export default @Component({
+    watch: {
+        search: function() {
+            this.updateTableData();
+        },
+        value: function() {
+            this.checkCollisions();
+            this.updateTableData();
+        }
+    },
+})
+class UserHotKeys extends UserHotKeysProps {
+    search = '';
+    rstore = {};
+    tableData = [];
+    collisions = {};
+    maxCodesLength = 10;
+
+    created() {
+        this.rstore = rstore;
+    }
+
+    mounted() {
+        this.checkCollisions();
+        this.updateTableData();
+    }
+
+    get mode() {
+        return this.$store.state.config.mode;
+    }
+
+    updateTableData() {
+        let result = rstore.hotKeys.map(hk => hk.name).filter(name => (this.mode == 'liberama.top' || name != 'libs'));
+
+        const search = this.search.toLowerCase();
+        const codesIncludeSearch = (action) => {
+            for (const code of this.value[action]) {
+                if (code.toLowerCase().includes(search))
+                    return true;
+            }
+            return false;
+        };
+
+        result = result.filter(item => {
+            return !search ||
+                rstore.readerActions[item].toLowerCase().includes(search) ||
+                codesIncludeSearch(item)
+        });
+
+        this.tableData = result;
+    }
+
+    checkCollisions() {
+        const cols = {};
+        for (const [action, codes] of Object.entries(this.value)) {
+            codes.forEach(code => {
+                if (!cols[code])
+                    cols[code] = [];
+                if (cols[code].indexOf(action) < 0)
+                    cols[code].push(action);
+            });
+        }
+
+        const result = {};
+        for (const [code, actions] of Object.entries(cols)) {
+            if (actions.length > 1)
+                result[code] = actions;
+        }
+
+        this.collisions = result;
+    }
+
+    collisionWarning(code) {
+        if (this.collisions[code]) {
+            const descs = this.collisions[code].map(action => `<b>${rstore.readerActions[action]}</b>`);
+            this.$root.stdDialog.alert(`Сочетание '${code}' одновременно назначено<br>следующим командам:<br>${descs.join('<br>')}<br><br>
+Возможно неожиданное поведение.`, 'Предупреждение');
+        }
+    }
+
+    removeCode(action, code) {
+        let codes = Array.from(this.value[action]);
+        const index = codes.indexOf(code);
+        if (index >= 0) {
+            codes.splice(index, 1);
+            const newValue = Object.assign({}, this.value, {[action]: codes});
+            this.$emit('input', newValue);
+        }
+    }
+
+    async addHotKey(action) {
+        if (this.value[action].length >= this.maxCodesLength)
+            return;
+        try {
+            const result = await this.$root.stdDialog.getHotKey(`Добавить сочетание для:<br><b>${rstore.readerActions[action]}</b>`, '');
+            if (result) {
+                let codes = Array.from(this.value[action]);
+                if (codes.indexOf(result) < 0) {
+                    codes.push(result);
+                    const newValue = Object.assign({}, this.value, {[action]: codes});
+                    this.$emit('input', newValue);
+                    this.$nextTick(() => {
+                        this.collisionWarning(result);
+                    });
+                }
+            }
+        } catch (e) {
+            //
+        }
+    }
+
+    async defaultHotKey(action) {
+        try {
+            if (await this.$root.stdDialog.confirm(`Подтвердите сброс сочетаний клавиш<br>в значения по умолчанию для команды:<br><b>${rstore.readerActions[action]}</b>`, ' ')) {
+                const codes = Array.from(rstore.settingDefaults.userHotKeys[action]);
+                const newValue = Object.assign({}, this.value, {[action]: codes});
+                this.$emit('input', newValue);
+            }
+        } catch (e) {
+            //
+        }
+    }
+
+    async defaultHotKeyAll() {
+        try {
+            if (await this.$root.stdDialog.confirm('Подтвердите сброс сочетаний клавиш<br>для ВСЕХ команд в значения по умолчанию:', ' ')) {
+                const newValue = Object.assign({}, rstore.settingDefaults.userHotKeys);
+                this.$emit('input', newValue);
+            }
+        } catch (e) {
+            //
+        }
+    }
+}
+//-----------------------------------------------------------------------------
+</script>
+
+<style scoped>
+.table {
+    border-left: 1px solid grey;
+    border-top: 1px solid grey;
+}
+
+.table-row {
+    border-right: 1px solid grey;
+    border-bottom: 1px solid grey;
+}
+
+.table-row:nth-child(even) {
+    background-color: #f7f7f7;
+}
+
+.table-row:hover {
+    background-color: #f0f0f0;
+}
+
+.desc {
+    width: 130px;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    white-space: normal;
+}
+
+.hotKeys {
+    border-left: 1px solid grey;    
+}
+
+.button {
+    font-size: 25px;
+    border-radius: 25px;
+    cursor: pointer;
+}
+</style>

client/components/Reader/SettingsPage/include/ButtonsTab.inc

@@ -1,8 +1,10 @@
 <div class="part-header">Показывать кнопки панели</div>
 
-<div class="item row" v-for="item in toolButtons" :key="item.name">
+<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" @input="changeShowToolButton(item.name)" :value="showToolButton[item.name]" :label="item.text" />
+        <q-checkbox size="xs" @input="changeShowToolButton(item.name)"
+            :value="showToolButton[item.name]" :label="rstore.readerActions[item.name]"
+        />
     </div>
 </div>

client/components/Reader/SettingsPage/include/KeysTab.inc

@@ -1,8 +1,33 @@
-<div class="part-header">Управление</div>
+<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="item row">
-    <div class="label-4"></div>
-    <div class="col row">
-        <q-checkbox size="xs" v-model="clickControl" label="Включить управление кликом" />
+<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/include/OthersTab.inc

@@ -54,6 +54,34 @@
 <!---------------------------------------------->
 <div class="part-header">Другое</div>
 
+<div class="item row">
+    <div class="label-6">Обработка</div>
+    <div class="col row">
+        <q-checkbox v-model="enableSitesFilter" @input="needTextReload" 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 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">
@@ -68,18 +96,6 @@
     </q-checkbox>
 </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">Копирование</div>
     <q-checkbox size="xs" v-model="copyFullText" label="Загружать весь текст">

client/components/Reader/SettingsPage/include/ProfilesTab.inc

@@ -22,7 +22,7 @@
             <q-select v-model="currentProfile" :options="currentProfileOptions"
                 style="width: 275px"
                 dropdown-icon="la la-angle-down la-sm"
-                outlined dense emit-value map-options
+                outlined dense emit-value map-options display-value-sanitize options-sanitize
             />
         </div>
     </div>
@@ -68,7 +68,7 @@
                     <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'">
+            <div v-if="mode == 'omnireader' || mode == 'liberama.top'">
                 <br>Переход по ссылке позволит автоматически ввести ключ доступа:
                 <br><div class="text-center" style="margin-top: 5px">
                     <a :href="setStorageKeyLink" target="_blank">Ссылка для ввода ключа</a>

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

@@ -22,3 +22,15 @@
         <NumInput class="col-left" v-model="statusBarColorAlpha" :min="0" :max="1" :digits="2" :step="0.1" :disable="!showStatusBar"/>
     </div>
 </div>
+
+<div 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/include/ViewTab/Text.inc

@@ -108,22 +108,6 @@
     <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="enableSitesFilter" @input="needTextReload" 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 class="item row">
     <div class="label-2">Изображения</div>
     <div class="col row">

client/components/Reader/TextPage/DrawHelper.js

@@ -159,7 +159,7 @@ export default class DrawHelper {
         const fh = h - 2*pad;
         const fh2 = fh/2;
 
-        const t1 = `${Math.floor((bookPos + 1)/1000)}k/${Math.floor(textLength/1000)}k`;
+        const t1 = `${Math.floor((bookPos + 1)/1000)}/${Math.floor(textLength/1000)}`;
         const w1 = this.measureTextFont(t1, font) + fh2;
         const read = (bookPos + 1)/textLength;
         const t2 = `${(read*100).toFixed(2)}%`;

client/components/Reader/TextPage/TextPage.vue

@@ -21,11 +21,12 @@
             @wheel.prevent.stop="onMouseWheel"
             @touchstart.stop="onTouchStart" @touchend.stop="onTouchEnd" @touchmove.stop="onTouchMove" @touchcancel.prevent.stop="onTouchCancel"
             oncontextmenu="return false;">
-            <div v-show="showStatusBar" v-html="statusBarClickable" @mousedown.prevent.stop @touchstart.stop
+            <div v-show="showStatusBar && statusBarClickOpen" v-html="statusBarClickable" @mousedown.prevent.stop @touchstart.stop
                 @click.prevent.stop="onStatusBarClick"></div>
         </div>
-        <div v-show="!clickControl && showStatusBar" class="layout" v-html="statusBarClickable" @mousedown.prevent.stop @touchstart.stop
-            @click.prevent.stop="onStatusBarClick"></div>
+        <div v-show="!clickControl && showStatusBar && statusBarClickOpen" class="layout" v-html="statusBarClickable" @mousedown.prevent.stop @touchstart.stop
+            @click.prevent.stop="onStatusBarClick">
+        </div>
         <!-- невидимым делать нельзя, вовремя не подгружаютя шрифты -->
         <canvas ref="offscreenCanvas" class="layout" style="visibility: hidden"></canvas>
         <div ref="measureWidth" style="position: absolute; visibility: hidden"></div>
@@ -39,7 +40,7 @@ import Component from 'vue-class-component';
 import {loadCSS} from 'fg-loadcss';
 import _ from 'lodash';
 
-import {sleep} from '../../../share/utils';
+import * as utils from '../../../share/utils';
 import bookManager from '../share/bookManager';
 import DrawHelper from './DrawHelper';
 import rstore from '../../../store/modules/reader';
@@ -133,7 +134,7 @@ class TextPage extends Vue {
 
         this.$root.$on('resize', async() => {
             this.$nextTick(this.onResize);
-            await sleep(500);
+            await utils.sleep(500);
             this.$nextTick(this.onResize);
         });
     }
@@ -284,7 +285,7 @@ class TextPage extends Vue {
 
         let close = null;
         (async() => {
-            await sleep(500);
+            await utils.sleep(500);
             if (this.fontsLoading)
                 close = this.$root.notify.info('Загрузка шрифта &nbsp;<i class="la la-snowflake icon-rotate" style="font-size: 150%"></i>');
         })();
@@ -341,7 +342,7 @@ class TextPage extends Vue {
             let i = 0;
             const t = this.parsed.testText;
             while (i++ < 50 && this.parsed === parsed && this.drawHelper.measureText(t, {}) === this.parsed.testWidth)
-                await sleep(100);
+                await utils.sleep(100);
 
             if (this.parsed === parsed) {
                 this.parsed.testWidth = this.drawHelper.measureText(t, {});
@@ -365,7 +366,6 @@ class TextPage extends Vue {
         this.updateLayout();
         this.book = null;
         this.meta = null;
-        this.fb2 = null;
         this.parsed = null;
 
         this.linesUp = null;
@@ -382,7 +382,7 @@ class TextPage extends Vue {
                 try {
                     //подождем ленивый парсинг
                     this.stopLazyParse = true;
-                    while (this.doingLazyParse) await sleep(10);
+                    while (this.doingLazyParse) await utils.sleep(10);
 
                     const isParsed = await bookManager.hasBookParsed(this.lastBook);
                     if (!isParsed) {
@@ -391,21 +391,9 @@ class TextPage extends Vue {
 
                     this.book = await bookManager.getBook(this.lastBook);
                     this.meta = bookManager.metaOnly(this.book);
-                    this.fb2 = this.meta.fb2;
+                    const bt = utils.getBookTitle(this.meta.fb2);
 
-                    let authorNames = [];
-                    if (this.fb2.author) {
-                        authorNames = this.fb2.author.map(a => _.compact([
-                            a.lastName,
-                            a.firstName,
-                            a.middleName
-                        ]).join(' '));
-                    }
-
-                    this.title = _.compact([
-                        authorNames.join(', '),
-                        this.fb2.bookTitle
-                    ]).join(' - ');
+                    this.title = bt.fullTitle;
 
                     this.$root.$emit('set-app-title', this.title);
 
@@ -422,7 +410,7 @@ class TextPage extends Vue {
                     if (this.lazyParseEnabled)
                         this.lazyParsePara();
                 } catch (e) {
-                    this.$root.stdDialog.alert(e.message, 'Ошибка', {type: 'negative'});
+                    this.$root.stdDialog.alert(e.message, 'Ошибка', {color: 'negative'});
                 }
             })();
         }
@@ -492,7 +480,7 @@ class TextPage extends Vue {
                 let wait = (timeout + 201)/100;
                 while (wait > 0 && !this[stopPropertyName]) {
                     wait--;
-                    await sleep(100);
+                    await utils.sleep(100);
                 }
                 resolve();
             })().catch(reject); });
@@ -503,12 +491,12 @@ class TextPage extends Vue {
     async startTextScrolling() {
         if (this.doingScrolling || !this.book || !this.parsed.textLength || !this.linesDown || this.pageLineCount < 1 ||
             this.linesDown.length <= this.pageLineCount) {
-            this.$emit('stop-scrolling');
+            this.doStopScrolling();
             return;
         }
 
         //ждем анимацию
-        while (this.inAnimation) await sleep(10);
+        while (this.inAnimation) await utils.sleep(10);
 
         this.stopScrolling = false;
         this.doingScrolling = true;
@@ -519,7 +507,7 @@ class TextPage extends Vue {
             this.page1 = this.page2;
         this.toggleLayout = true;
         await this.$nextTick();
-        await sleep(50);
+        await utils.sleep(50);
 
         this.cachedPos = -1;
         this.draw();
@@ -544,7 +532,7 @@ class TextPage extends Vue {
         }
         this.resolveTransition1Finish = null;
         this.doingScrolling = false;
-        this.$emit('stop-scrolling');
+        this.doStopScrolling();
         this.draw();
     }
 
@@ -556,7 +544,7 @@ class TextPage extends Vue {
         page.style.transform = 'none';
         page.offsetHeight;
 
-        while (this.doingScrolling) await sleep(10);
+        while (this.doingScrolling) await utils.sleep(10);
     }
 
     draw() {
@@ -765,7 +753,7 @@ class TextPage extends Vue {
         for (let i = 0; i < this.parsed.para.length; i++) {
             j++;
             if (j > 1) {
-                await sleep(1);
+                await utils.sleep(1);
                 j = 0;
             }
             if (this.stopLazyParse)
@@ -787,7 +775,7 @@ class TextPage extends Vue {
     async refreshTime() {
         if (!this.timeRefreshing) {
             this.timeRefreshing = true;
-            await sleep(60*1000);
+            await utils.sleep(60*1000);
 
             if (this.book && this.parsed.textLength) {
                 this.debouncedDrawStatusBar();
@@ -838,7 +826,7 @@ class TextPage extends Vue {
             let i = this.pageLineCount;
             if (this.keepLastToFirst)
                 i--;
-            if (i >= 0 && this.linesDown.length >= 2*i) {
+            if (i >= 0 && this.linesDown.length >= 2*i + (this.keepLastToFirst ? 1 : 0)) {
                 this.currentAnimation = this.pageChangeAnimation;
                 this.pageChangeDirectionDown = true;
                 this.bookPos = this.linesDown[i].begin;
@@ -883,25 +871,28 @@ class TextPage extends Vue {
         }
     }
 
-    doToolBarToggle() {
-        this.$emit('tool-bar-toggle');
+    doToolBarToggle(event) {
+        this.$emit('do-action', {action: 'switchToolbar', event});
     }
 
     doScrollingToggle() {
-        this.$emit('scrolling-toggle');
+        this.$emit('do-action', {action: 'scrolling', event});
     }
 
     doFullScreenToggle() {
-        this.$emit('full-screen-toogle');
+        this.$emit('do-action', {action: 'fullScreen', event});
+    }
+
+    doStopScrolling() {
+        this.$emit('do-action', {action: 'stopScrolling', event});
     }
 
     async doFontSizeInc() {
         if (!this.settingsChanging) {
             this.settingsChanging = true;
-            const newSize = (this.settings.fontSize + 1 < 100 ? this.settings.fontSize + 1 : 100);
-            const newSettings = Object.assign({}, this.settings, {fontSize: newSize});
-            this.commit('reader/setSettings', newSettings);
-            await sleep(50);
+            const newSize = (this.settings.fontSize + 1 < 200 ? this.settings.fontSize + 1 : 100);
+            this.commit('reader/setSettings', {fontSize: newSize});
+            await utils.sleep(50);
             this.settingsChanging = false;
         }
     }
@@ -910,9 +901,8 @@ class TextPage extends Vue {
         if (!this.settingsChanging) {
             this.settingsChanging = true;
             const newSize = (this.settings.fontSize - 1 > 5 ? this.settings.fontSize - 1 : 5);
-            const newSettings = Object.assign({}, this.settings, {fontSize: newSize});
-            this.commit('reader/setSettings', newSettings);
-            await sleep(50);
+            this.commit('reader/setSettings', {fontSize: newSize});
+            await utils.sleep(50);
             this.settingsChanging = false;
         }
     }
@@ -921,9 +911,8 @@ class TextPage extends Vue {
         if (!this.settingsChanging) {
             this.settingsChanging = true;
             const newDelay = (this.settings.scrollingDelay - 50 > 1 ? this.settings.scrollingDelay - 50 : 1);
-            const newSettings = Object.assign({}, this.settings, {scrollingDelay: newDelay});
-            this.commit('reader/setSettings', newSettings);
-            await sleep(50);
+            this.commit('reader/setSettings', {scrollingDelay: newDelay});
+            await utils.sleep(50);
             this.settingsChanging = false;
         }
     }
@@ -932,76 +921,12 @@ class TextPage extends Vue {
         if (!this.settingsChanging) {
             this.settingsChanging = true;
             const newDelay = (this.settings.scrollingDelay + 50 < 10000 ? this.settings.scrollingDelay + 50 : 10000);
-            const newSettings = Object.assign({}, this.settings, {scrollingDelay: newDelay});
-            this.commit('reader/setSettings', newSettings);
-            await sleep(50);
+            this.commit('reader/setSettings', {scrollingDelay: newDelay});
+            await utils.sleep(50);
             this.settingsChanging = false;
         }
     }
 
-    keyHook(event) {
-        let result = false;
-        if (event.type == 'keydown' && !event.ctrlKey && !event.altKey) {
-            result = true;
-            switch (event.code) {
-                case 'ArrowDown':
-                    if (event.shiftKey)
-                        this.doScrollingSpeedUp();
-                    else
-                        this.doDown();
-                    break;
-                case 'ArrowUp':
-                    if (event.shiftKey)
-                        this.doScrollingSpeedDown();
-                    else
-                        this.doUp();
-                    break;
-                case 'PageDown':
-                case 'ArrowRight':
-                    this.doPageDown();
-                    break;
-                case 'Space':
-                    if (event.shiftKey)
-                        this.doPageUp();
-                    else
-                        this.doPageDown();
-                    break;
-                case 'PageUp':
-                case 'ArrowLeft':
-                case 'Backspace':
-                    this.doPageUp();
-                    break;
-                case 'Home':
-                    this.doHome();
-                    break;
-                case 'End':
-                    this.doEnd();
-                    break;
-                case 'KeyA':
-                    if (event.shiftKey)
-                        this.doFontSizeDec();
-                    else
-                        this.doFontSizeInc();
-                    break;
-                case 'Enter':
-                case 'Backquote'://`
-                case 'KeyF':
-                    this.doFullScreenToggle();
-                    break;
-                case 'Tab':
-                case 'KeyQ':
-                    this.doToolBarToggle();
-                    event.preventDefault();
-                    event.stopPropagation();
-                    break;
-                default:
-                    result = false;
-                    break;
-            }
-        }
-        return result;
-    }
-
     async startClickRepeat(pointX, pointY) {
         this.repX = pointX;
         this.repY = pointY;
@@ -1011,7 +936,7 @@ class TextPage extends Vue {
             let delay = 400;
             while (this.repDoing) {
                 this.handleClick(pointX, pointY);
-                await sleep(delay);
+                await utils.sleep(delay);
                 if (delay > 15)
                     delay *= 0.8;
             }
@@ -1079,7 +1004,7 @@ class TextPage extends Vue {
                     //движение вправо
                     this.doScrollingSpeedUp();
                 } else if (Math.abs(dy) < touchDelta && Math.abs(dx) < touchDelta) {
-                    this.doToolBarToggle();
+                    this.doToolBarToggle(event);
                 }
 
                 this.startTouch = null;
@@ -1106,7 +1031,7 @@ class TextPage extends Vue {
         } else if (event.button == 1) {
             this.doScrollingToggle();
         } else if (event.button == 2) {
-            this.doToolBarToggle();
+            this.doToolBarToggle(event);
         }
     }
 
@@ -1128,10 +1053,10 @@ class TextPage extends Vue {
 
     onStatusBarClick() {
         const url = this.meta.url;
-        if (url && url.indexOf('file://') != 0) {
+        if (url && url.indexOf('disk://') != 0) {
             window.open(url, '_blank');
         } else {
-            this.$root.stdDialog.alert('Оригинал недоступен, т.к. файл книги был загружен с локального диска.', ' ', {type: 'info'});
+            this.$root.stdDialog.alert('Оригинал недоступен, т.к. файл книги был загружен с локального диска.', ' ', {color: 'info'});
         }
     }
 

client/components/Reader/share/BookParser.js

@@ -1,6 +1,6 @@
 import he from 'he';
 import sax from '../../../../server/core/sax';
-import {sleep} from '../../../share/utils';
+import * as utils from '../../../share/utils';
 
 const maxImageLineCount = 100;
 
@@ -46,11 +46,21 @@ export default class BookParser {
         let isFirstSection = true;
         let isFirstTitlePara = false;
 
+        //изображения
         this.binary = {};
         let binaryId = '';
         let binaryType = '';
         let dimPromises = [];
 
+        //оглавление
+        this.contents = [];
+        let curTitle = {paraIndex: -1, title: '', subtitles: []};
+        let curSubtitle = {paraIndex: -1, title: ''};
+        let inTitle = false;
+        let inSubtitle = false;
+        let sectionLevel = 0;
+        let bodyIndex = 0;
+
         let paraIndex = -1;
         let paraOffset = 0;
         let para = []; /*array of
@@ -59,7 +69,6 @@ export default class BookParser {
                 offset: Number, //сумма всех length до этого параграфа
                 length: Number, //длина text без тегов
                 text: String, //текст параграфа с вложенными тегами
-                cut: Boolean, //параграф - кандидат на сокрытие (cutEmptyParagraphs)
                 addIndex: Number, //индекс добавляемого пустого параграфа (addEmptyParagraphs)
             }
         */
@@ -81,7 +90,7 @@ export default class BookParser {
                 i.onerror = reject;
 
                 i.src = `data:${binaryType};base64,${data}`;
-                await sleep(30*1000);
+                await utils.sleep(30*1000);
                 if (!resolved)
                     reject('Не удалось получить размер изображения');
             })().catch(reject); });
@@ -103,7 +112,7 @@ export default class BookParser {
                 i.onerror = reject;
 
                 i.src = src;
-                await sleep(30*1000);
+                await utils.sleep(30*1000);
                 if (!resolved)
                     reject('Не удалось получить размер изображения');
             })().catch(reject); });
@@ -116,10 +125,15 @@ export default class BookParser {
                 offset: paraOffset,
                 length: len,
                 text: text,
-                cut: (!addIndex && (len == 1 && text[0] == ' ')),
                 addIndex: (addIndex ? addIndex : 0),
             };
 
+            if (inSubtitle) {
+                curSubtitle.title += '<p>';
+            } else if (inTitle) {
+                curTitle.title += '<p>';
+            }
+
             para[paraIndex] = p;
             paraOffset += p.length;
         };
@@ -131,11 +145,12 @@ export default class BookParser {
                 return;
             }
 
+            const prevParaIndex = paraIndex;
             let p = para[paraIndex];
-            //добавление пустых (addEmptyParagraphs) параграфов
+            paraOffset -= p.length;
+            //добавление пустых (addEmptyParagraphs) параграфов перед текущим
             if (p.length == 1 && p.text[0] == ' ' && len > 0) {
                 paraIndex--;
-                paraOffset -= p.length;
                 for (let i = 0; i < 2; i++) {
                     newParagraph(' ', 1, i + 1);
                 }
@@ -144,20 +159,27 @@ export default class BookParser {
                 p.index = paraIndex;
                 p.offset = paraOffset;
                 para[paraIndex] = p;
-                paraOffset += p.length;
-            }
 
-            paraOffset -= p.length;
-            //параграф оказался непустой
-            if (p.length == 1 && p.text[0] == ' ' && len > 0) {
+                if (curTitle.paraIndex == prevParaIndex)
+                    curTitle.paraIndex = paraIndex;
+                if (curSubtitle.paraIndex == prevParaIndex)
+                    curSubtitle.paraIndex = paraIndex;
+
+                //уберем начальный пробел
                 p.length = 0;
                 p.text = p.text.substr(1);
-                p.cut = (len == 1 && text[0] == ' ');
             }
 
             p.length += len;
             p.text += text;
 
+            
+            if (inSubtitle) {
+                curSubtitle.title += text;
+            } else if (inTitle) {
+                curTitle.title += text;
+            }
+
             para[paraIndex] = p;
             paraOffset += p.length;
         };
@@ -167,7 +189,7 @@ export default class BookParser {
                 return;
 
             tag = elemName;
-            path += '/' + elemName;
+            path += '/' + tag;
 
             if (tag == 'binary') {
                 let attrs = sax.getAttrsSync(tail);
@@ -194,17 +216,55 @@ export default class BookParser {
                 }
             }
 
-            if (elemName == 'author' && path.indexOf('/fictionbook/description/title-info/author') == 0) {
+            if (path == '/fictionbook/description/title-info/author') {
                 if (!fb2.author)
                     fb2.author = [];
+
                 fb2.author.push({});
             }
 
+            const isPublishSequence = (path == '/fictionbook/description/publish-info/sequence');
+            if (path == '/fictionbook/description/title-info/sequence' || isPublishSequence) {
+                if (!fb2.sequence)
+                    fb2.sequence = [];
+
+                if (!isPublishSequence || !fb2.sequence.length) {
+                    const attrs = sax.getAttrsSync(tail);
+                    const seq = {};
+                    if (attrs.name && attrs.name.value) {
+                        seq.name = attrs.name.value;
+                    }
+                    if (attrs.number && attrs.number.value) {
+                        seq.number = attrs.number.value;
+                    }
+
+                    fb2.sequence.push(seq);
+                }
+            }
+
             if (path.indexOf('/fictionbook/body') == 0) {
                 if (tag == 'body') {
+                    if (isFirstBody && fb2.annotation) {
+                        const ann = fb2.annotation.split('<p>').filter(v => v).map(v => utils.removeHtmlTags(v));
+                        ann.forEach(a => {
+                            newParagraph(`<emphasis><space w="1">${a}</space></emphasis>`, a.length);
+                        });
+                        if (ann.length)
+                            newParagraph(' ', 1);
+                    }
+
+                    if (isFirstBody && fb2.sequence && fb2.sequence.length) {
+                        const bt = utils.getBookTitle(fb2);
+                        if (bt.sequence) {
+                            newParagraph(bt.sequence, bt.sequence.length);
+                            newParagraph(' ', 1);
+                        }
+                    }
+
                     if (!isFirstBody)
                         newParagraph(' ', 1);
                     isFirstBody = false;
+                    bodyIndex++;
                 }
 
                 if (tag == 'title') {
@@ -212,12 +272,17 @@ export default class BookParser {
                     isFirstTitlePara = true;
                     bold = true;
                     center = true;
+
+                    inTitle = true;
+                    curTitle = {paraIndex, title: '', inset: sectionLevel, bodyIndex, subtitles: []};
+                    this.contents.push(curTitle);
                 }
 
                 if (tag == 'section') {
                     if (!isFirstSection)
                         newParagraph(' ', 1);
                     isFirstSection = false;
+                    sectionLevel++;
                 }
 
                 if (tag == 'emphasis' || tag == 'strong') {
@@ -238,9 +303,13 @@ export default class BookParser {
                     isFirstTitlePara = true;
                     bold = true;
                     center = true;
+
+                    inSubtitle = true;
+                    curSubtitle = {paraIndex, inset: sectionLevel, title: ''};
+                    curTitle.subtitles.push(curSubtitle);
                 }
 
-                if (tag == 'epigraph') {
+                if (tag == 'epigraph' || tag == 'annotation') {
                     italic = true;
                     space += 1;
                 }
@@ -267,6 +336,11 @@ export default class BookParser {
                         isFirstTitlePara = false;
                         bold = false;
                         center = false;
+                        inTitle = false;
+                    }
+
+                    if (tag == 'section') {
+                        sectionLevel--;
                     }
 
                     if (tag == 'emphasis' || tag == 'strong') {
@@ -281,11 +355,14 @@ export default class BookParser {
                         isFirstTitlePara = false;
                         bold = false;
                         center = false;
+                        inSubtitle = false;
                     }
 
-                    if (tag == 'epigraph') {
+                    if (tag == 'epigraph' || tag == 'annotation') {
                         italic = false;
                         space -= 1;
+                        if (tag == 'annotation')
+                            newParagraph(' ', 1);
                     }
 
                     if (tag == 'stanza') {
@@ -379,7 +456,7 @@ export default class BookParser {
         };
 
         const onProgress = async(prog) => {
-            await sleep(1);
+            await utils.sleep(1);
             callback(prog);
         };
 
@@ -401,7 +478,7 @@ export default class BookParser {
         this.textLength = paraOffset;
 
         callback(100);
-        await sleep(10);
+        await utils.sleep(10);
 
         return {fb2};
     }
@@ -633,10 +710,7 @@ export default class BookParser {
             imageHeightLines: this.imageHeightLines,
             imageFitWidth: this.imageFitWidth,
             compactTextPerc: this.compactTextPerc,
-            visible: !(
-                (this.cutEmptyParagraphs && para.cut) ||
-                (para.addIndex > this.addEmptyParagraphs)
-            )
+            visible: true, //вычисляется позже
         };
 
 
@@ -652,9 +726,12 @@ export default class BookParser {
                 text: String,
             }
         }*/
+
         let parts = this.splitToStyle(para.text);
 
+        //инициализация парсера
         let line = {begin: para.offset, parts: []};
+        let paragraphText = '';//текст параграфа
         let partText = '';//накапливаемый кусок со стилем
 
         let str = '';//измеряемая строка
@@ -663,14 +740,16 @@ export default class BookParser {
         let style = {};
         let ofs = 0;//смещение от начала параграфа para.offset
         let imgW = 0;
+        let imageInPara = false;
         const compactWidth = this.measureText('W', {})*this.compactTextPerc/100;
         // тут начинается самый замес, перенос по слогам и стилизация, а также изображения
         for (const part of parts) {
             style = part.style;
+            paragraphText += part.text;
 
             //изображения
             if (part.image.id && !part.image.inline) {
-                parsed.visible = this.showImages;
+                imageInPara = true;
                 let bin = this.binary[part.image.id];
                 if (!bin)
                     bin = {h: 1, w: 1};
@@ -837,6 +916,16 @@ export default class BookParser {
             }
         }
 
+        //parsed.visible
+        if (imageInPara) {
+            parsed.visible = this.showImages;
+        } else {
+            parsed.visible = !(
+                (para.addIndex > this.addEmptyParagraphs) ||
+                (para.addIndex == 0 && this.cutEmptyParagraphs && paragraphText.trim() == '')
+            );
+        }
+
         parsed.lines = lines;
         para.parsed = parsed;
 

client/components/Reader/share/bookManager.js

@@ -4,19 +4,25 @@ import _ from 'lodash';
 import * as utils from '../../../share/utils';
 import BookParser from './BookParser';
 
-const maxDataSize = 300*1024*1024;//compressed bytes
+const maxDataSize = 500*1024*1024;//compressed bytes
 
+//локальный кэш метаданных книг, ограничение maxDataSize
 const bmMetaStore = localForage.createInstance({
     name: 'bmMetaStore'
 });
 
+//локальный кэш самих книг, ограничение maxDataSize
 const bmDataStore = localForage.createInstance({
     name: 'bmDataStore'
 });
 
-const bmRecentStore = localForage.createInstance({
+//список недавно открытых книг
+const bmRecentStoreOld = localForage.createInstance({
     name: 'bmRecentStore'
 });
+const bmRecentStoreNew = localForage.createInstance({
+    name: 'bmRecentStoreNew'
+});
 
 class BookManager {
     async init(settings) {
@@ -25,15 +31,80 @@ class BookManager {
 
         this.eventListeners = [];
         this.books = {};
-        this.recent = {};
 
-        this.recentLast = await bmRecentStore.getItem('recent-last');
-        if (this.recentLast) {
-            this.recent[this.recentLast.key] = this.recentLast;
-            const meta = await bmMetaStore.getItem(`bmMeta-${this.recentLast.key}`);
-            if (_.isObject(meta)) {
-                this.books[meta.key] = meta;
+        this.recent = {};
+        this.saveRecent = _.debounce(() => {
+            bmRecentStoreNew.setItem('recent', this.recent);
+        }, 300, {maxWait: 800});
+
+        this.saveRecentItem = _.debounce(() => {
+            bmRecentStoreNew.setItem('recent-item', this.recentItem);
+            this.recentRev = (this.recentRev < 1000 ? this.recentRev + 1 : 1);
+            bmRecentStoreNew.setItem('rev', this.recentRev);
+        }, 200, {maxWait: 300});
+
+        //загрузка bmRecentStore
+        this.recentRev = await bmRecentStoreNew.getItem('rev') || 0;
+        if (this.recentRev) {
+            this.recent = await bmRecentStoreNew.getItem('recent');
+            if (!this.recent)
+                this.recent = {};
+
+            this.recentItem = await bmRecentStoreNew.getItem('recent-item');
+            if (this.recentItem)
+                this.recent[this.recentItem.key] = this.recentItem;
+
+            this.recentLastKey = await bmRecentStoreNew.getItem('recent-last-key');
+            if (this.recentLastKey) {
+                const meta = await bmMetaStore.getItem(`bmMeta-${this.recentLastKey}`);
+                if (_.isObject(meta)) {
+                    this.books[meta.key] = meta;
+                }
             }
+
+            await this.cleanRecentBooks();
+
+            //TODO: убрать после 06.2021, когда bmRecentStoreOld устареет
+            {
+                await this.convertFileToDiskPrefix();
+                if (this.recentRev > 10)
+                    await bmRecentStoreOld.clear();
+            }
+        } else {//TODO: убрать после 06.2021, когда bmRecentStoreOld устареет
+            this.recentLast = await bmRecentStoreOld.getItem('recent-last');
+            if (this.recentLast) {
+                this.recent[this.recentLast.key] = this.recentLast;
+                const meta = await bmMetaStore.getItem(`bmMeta-${this.recentLast.key}`);
+                if (_.isObject(meta)) {
+                    this.books[meta.key] = meta;
+                }
+            }
+
+            let key = null;
+            const len = await bmRecentStoreOld.length();
+            for (let i = len - 1; i >= 0; i--) {
+                key = await bmRecentStoreOld.key(i);
+                if (key) {
+                    let r = await bmRecentStoreOld.getItem(key);
+                    if (_.isObject(r) && r.key) {
+                        this.recent[r.key] = r;
+                    }
+                } else  {
+                    await bmRecentStoreOld.removeItem(key);
+                }
+            }
+
+            //размножение для дебага
+            /*if (key) {
+                for (let i = 0; i < 1000; i++) {
+                    const k = this.keyFromUrl(i.toString());
+                    this.recent[k] = Object.assign({}, _.cloneDeep(this.recent[key]), {key: k, touchTime: Date.now() - 1000000, url: utils.randomHexString(300)});
+                }
+            }*/
+
+            await bmRecentStoreNew.setItem('recent', this.recent);
+            this.recentRev = 1;
+            await bmRecentStoreNew.setItem('rev', this.recentRev);
         }
 
         this.recentChanged = true;
@@ -41,9 +112,7 @@ class BookManager {
         this.loadStored();//no await
     }
 
-    //Долгая асинхронная загрузка из хранилища.
-    //Хранение в отдельных записях дает относительно
-    //нормальное поведение при нескольких вкладках с читалкой в браузере.
+    //Ленивая асинхронная загрузка bmMetaStore
     async loadStored() {
         //даем время для загрузки последней читаемой книги, чтобы не блокировать приложение
         await utils.sleep(2000);
@@ -70,32 +139,7 @@ class BookManager {
             }
         }
 
-        let key = null;
-        len = await bmRecentStore.length();
-        for (let i = len - 1; i >= 0; i--) {
-            key = await bmRecentStore.key(i);
-            if (key) {
-                let r = await bmRecentStore.getItem(key);
-                if (_.isObject(r) && r.key) {
-                    this.recent[r.key] = r;
-                }
-            } else  {
-                await bmRecentStore.removeItem(key);
-            }
-        }
-
-        //размножение для дебага
-        /*if (key) {
-            for (let i = 0; i < 1000; i++) {
-                const k = this.keyFromUrl(i.toString());
-                this.recent[k] = Object.assign({}, _.cloneDeep(this.recent[key]), {key: k, touchTime: Date.now() - 1000000, url: utils.randomHexString(300)});
-            }
-        }*/
-        
         await this.cleanBooks();
-        await this.cleanRecentBooks();
-
-        this.recentChanged = true;
         this.loaded = true;
         this.emit('load-stored-finish');
     }
@@ -238,7 +282,7 @@ class BookManager {
         let book = this.books[meta.key];
 
         if (!book && !this.loaded) {
-            book = await bmDataStore.getItem(`bmMeta-${meta.key}`);
+            book = await bmMetaStore.getItem(`bmMeta-${meta.key}`);
             if (book)
                 this.books[meta.key] = book;
         }
@@ -254,7 +298,7 @@ class BookManager {
         result = this.books[meta.key];
 
         if (!result) {
-            result = await bmDataStore.getItem(`bmMeta-${meta.key}`);
+            result = await bmMetaStore.getItem(`bmMeta-${meta.key}`);
             if (result)
                 this.books[meta.key] = result;
         }
@@ -328,6 +372,43 @@ class BookManager {
     }
 
     //-- recent --------------------------------------------------------------
+    async recentSetItem(item = null, skipCheck = false) {
+        const rev = await bmRecentStoreNew.getItem('rev');
+        if (rev != this.recentRev && !skipCheck) {
+            const newRecent = await bmRecentStoreNew.getItem('recent');
+            Object.assign(this.recent, newRecent);
+            this.recentItem = await bmRecentStoreNew.getItem('recent-item');
+            this.recentRev = rev;
+        }
+
+        const prevKey = (this.recentItem ? this.recentItem.key : '');
+        if (item) {
+            this.recent[item.key] = item;
+            this.recentItem = item;
+        } else {
+            this.recentItem = null;
+        }
+
+        this.saveRecentItem();
+
+        if (!item || prevKey != item.key) {
+            this.saveRecent();
+        }
+
+        this.recentChanged = true;
+
+        if (item) {
+            this.emit('recent-changed', item.key);
+        } else {
+            this.emit('recent-changed');
+        }
+    }
+
+    async recentSetLastKey(key) {
+        this.recentLastKey = key;
+        await bmRecentStoreNew.setItem('recent-last-key', this.recentLastKey);
+    }
+
     async setRecentBook(value) {
         const result = this.metaOnly(value);
         result.touchTime = Date.now();
@@ -341,38 +422,25 @@ class BookManager {
                 result.bookPosSeen = this.recent[result.key].bookPosSeen;
         }
 
-        this.recent[result.key] = result;
-
-        await bmRecentStore.setItem(result.key, result);
-
-        this.recentLast = result;
-        await bmRecentStore.setItem('recent-last', this.recentLast);
-
-        this.recentChanged = true;
-        this.emit('recent-changed', result.key);
+        await this.recentSetLastKey(result.key);
+        await this.recentSetItem(result);
         return result;
     }
 
     async getRecentBook(value) {
-        let result = this.recent[value.key];
-        if (!result) {
-            result = await bmRecentStore.getItem(value.key);
-            if (result)
-                this.recent[value.key] = result;
-        }
-        return result;
+        return this.recent[value.key];
     }
 
     async delRecentBook(value) {
-        this.recent[value.key].deleted = 1;
-        await bmRecentStore.setItem(value.key, this.recent[value.key]);
+        const item = this.recent[value.key];
+        item.deleted = 1;
 
-        if (this.recentLast.key == value.key) {
-            this.recentLast = null;
-            await bmRecentStore.setItem('recent-last', this.recentLast);
+        if (this.recentLastKey == value.key) {
+            await this.recentSetLastKey(null);
         }
+
+        await this.recentSetItem(item);
         this.emit('recent-deleted', value.key);
-        this.emit('recent-changed', value.key);
     }
 
     async cleanRecentBooks() {
@@ -380,24 +448,49 @@ class BookManager {
 
         let isDel = false;
         for (let i = 1000; i < sorted.length; i++) {
-            await bmRecentStore.removeItem(sorted[i].key);
             delete this.recent[sorted[i].key];
-            await bmRecentStore.removeItem(sorted[i].key);
             isDel = true;
         }
 
         this.sortedRecentCached = null;
 
         if (isDel)
-            this.emit('recent-changed');
+            await this.recentSetItem();
         return isDel;
     }
 
-    mostRecentBook() {
-        if (this.recentLast) {
-            return this.recentLast;
+    async convertFileToDiskPrefix() {
+        let isConverted = false;
+
+        const newRecent = {};
+        for (let key of Object.keys(this.recent)) {
+            let newKey = key;
+            let newUrl = this.recent[key].url;
+
+            if (newKey.indexOf('66696c65') == 0) {
+                newKey = newKey.replace(/^66696c65/, '6469736b');
+                if (newUrl)
+                    newUrl = newUrl.replace(/^file/, 'disk');
+                isConverted = true;
+            }
+
+            newRecent[newKey] = this.recent[key];
+            newRecent[newKey].key = newKey;
+            if (newUrl)
+                newRecent[newKey].url = newUrl;
         }
-        const oldRecentLast = this.recentLast;
+        if (isConverted) {
+            this.recent = newRecent;
+            await this.recentSetItem(null, true);
+        }
+        return isConverted;
+    }
+
+    mostRecentBook() {
+        if (this.recentLastKey) {
+            return this.recent[this.recentLastKey];
+        }
+        const oldKey = this.recentLastKey;
 
         let max = 0;
         let result = null;
@@ -408,10 +501,11 @@ class BookManager {
                 result = book;
             }
         }
-        this.recentLast = result;
-        bmRecentStore.setItem('recent-last', this.recentLast);//no await
+        
+        const newRecentLastKey = (result ? result.key : null);
+        this.recentSetLastKey(newRecentLastKey);//no await
 
-        if (this.recentLast !== oldRecentLast)
+        if (newRecentLastKey !== oldKey)
             this.emit('recent-changed');
 
         return result;
@@ -442,24 +536,12 @@ class BookManager {
                 delete mergedRecent[i];
         }
         
-        //"ленивое" обновление хранилища
-        (async() => {
-            for (const rec of Object.values(mergedRecent)) {
-                if (rec.key) {
-                    await bmRecentStore.setItem(rec.key, rec);
-                    await utils.sleep(1);
-                }
-            }
-        })();
-
         this.recent = mergedRecent;
 
-        this.recentLast = null;
-        await bmRecentStore.setItem('recent-last', this.recentLast);
+        await this.recentSetLastKey(null);
+        await this.recentSetItem(null, true);
 
-        this.recentChanged = true;
         this.emit('set-recent');
-        this.emit('recent-changed');
     }
 
     addEventListener(listener) {

client/components/Reader/versionHistory.js

@@ -1,4 +1,123 @@
 export const versionHistory = [
+{
+    showUntil: '2020-12-10',
+    header: '0.9.10 (2020-12-03)',
+    content:
+`
+<ul>
+    <li>добавлена частичная поддержка формата Djvu</li>
+    <li>добавлена поддержка Rar-архивов</li>
+    <li>исправления багов</li>
+</ul>
+`
+},
+
+{
+    showUntil: '2020-11-20',
+    header: '0.9.9 (2020-11-21)',
+    content:
+`
+<ul>
+    <li>оптимизации, исправления багов</li>
+</ul>
+`
+},
+
+{
+    showUntil: '2020-11-12',
+    header: '0.9.8 (2020-11-13)',
+    content:
+`
+<ul>
+    <li>добавлено окно "Оглавление/закладки"</li>
+</ul>
+`
+},
+
+{
+    showUntil: '2020-11-11',
+    header: '0.9.7 (2020-11-12)',
+    content:
+`
+<ul>
+    <li>исправления багов</li>
+</ul>
+`
+},
+
+{
+    showUntil: '2020-11-05',
+    header: '0.9.6 (2020-11-06)',
+    content:
+`
+<ul>
+    <li>завершена работа над новым окном "Библиотека"</li>
+    <li>исправления багов</li>
+</ul>
+`
+},
+
+{
+    showUntil: '2020-10-31',
+    header: '0.9.5 (2020-11-01)',
+    content:
+`
+<ul>
+    <li>на панель инструментов добавлена новая кнопка "Обновить с разбиением на параграфы"</li>
+    <li>исправления багов</li>
+</ul>
+`
+},
+
+{
+    showUntil: '2020-10-28',
+    header: '0.9.4 (2020-10-29)',
+    content:
+`
+<ul>
+    <li>заработал новый сайт <a href="https://liberama.top">https://liberama.top</a>, где будет более свободный обмен книгами</li>
+    <li>для liberama.top добавлено новое окно: "Библиотека"</li>
+    <li>исправления багов</li>
+</ul>
+`
+},
+
+{
+    showUntil: '2020-05-20',
+    header: '0.9.3 (2020-05-21)',
+    content:
+`
+<ul>
+    <li>исправления багов</li>
+</ul>
+`
+},
+
+{
+    showUntil: '2020-04-25',
+    header: '0.9.2 (2020-03-15)',
+    content:
+`
+<ul>
+    <li>в настройки добавлена возможность назначать сочетания клавиш на команды в читалке</li>
+    <li>переход на Service Worker вместо AppCache для автономного режима работы</li>
+    <li>исправления багов</li>
+</ul>
+`
+},
+
+{
+    showUntil: '2020-03-02',
+    header: '0.9.1 (2020-03-03)',
+    content:
+`
+<ul>
+    <li>улучшение работы серверной части</li>
+    <li>незначительные изменения интерфейса</li>
+</ul>
+`
+},
+
 {
     showUntil: '2020-02-25',
     header: '0.9.0 (2020-02-26)',

client/components/share/Dialog.vue

@@ -1,5 +1,5 @@
 <template>
-    <q-dialog v-model="active">
+    <q-dialog v-model="active" no-route-dismiss>
         <div class="column bg-white no-wrap">
             <div class="header row">
                 <div class="caption col row items-center q-ml-md">
@@ -32,7 +32,7 @@ const DialogProps = Vue.extend({
     props: {
         value: Boolean,
     }
-})
+});
 
 export default @Component({
 })

client/components/share/Notify.vue

@@ -19,11 +19,12 @@ class Notify extends Vue {
             iconColor = 'white',
             message = '',
             messageColor = 'black',
+            position = 'top-right',
         } = opts;
 
         caption = (caption ? `<div style="font-size: 120%; color: ${captionColor}"><b>${caption}</b></div><br>` : '');
         return this.$q.notify({
-            position: 'top-right',
+            position,
             color,
             textColor: iconColor,
             icon,
@@ -38,20 +39,20 @@ class Notify extends Vue {
         });
     }
 
-    success(message, caption) {
-        this.notify({color: 'positive', icon: 'la la-check-circle', message, caption});
+    success(message, caption, options) {
+        this.notify(Object.assign({color: 'positive', icon: 'la la-check-circle', message, caption}, options));
     }
 
-    warning(message, caption) {
-        this.notify({color: 'warning', icon: 'la la-exclamation-circle', message, caption});
+    warning(message, caption, options) {
+        this.notify(Object.assign({color: 'warning', icon: 'la la-exclamation-circle', message, caption}, options));
     }
 
-    error(message, caption) {
-        this.notify({color: 'negative', icon: 'la la-exclamation-circle', messageColor: 'yellow', captionColor: 'white', message, caption});
+    error(message, caption, options) {
+        this.notify(Object.assign({color: 'negative', icon: 'la la-exclamation-circle', messageColor: 'yellow', captionColor: 'white', message, caption}, options));
     }
 
-    info(message, caption) {
-        this.notify({color: 'info', icon: 'la la-bell', message, caption});
+    info(message, caption, options) {
+        this.notify(Object.assign({color: 'info', icon: 'la la-bell', message, caption}, options));
     }
 }
 //-----------------------------------------------------------------------------

client/components/share/StdDialog.vue

@@ -1,12 +1,12 @@
 <template>
-    <q-dialog ref="dialog" v-model="active" @show="onShow" @hide="onHide">
+    <q-dialog ref="dialog" v-model="active" @show="onShow" @hide="onHide" no-route-dismiss>
         <slot></slot>
 
         <!--------------------------------------------------->
-        <div v-show="type == 'alert'" class="dialog column bg-white no-wrap" style="min-height: 150px">
+        <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="las la-exclamation-circle" size="28px"></q-icon>
+                    <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">
@@ -16,7 +16,7 @@
                 </div>
             </div>
 
-            <div class="col q-mx-md">
+            <div class="q-mx-md">
                 <div v-html="message"></div>
             </div>
 
@@ -26,10 +26,10 @@
         </div>
 
         <!--------------------------------------------------->
-        <div v-show="type == 'confirm'" class="dialog column bg-white no-wrap" style="min-height: 150px">
+        <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="las la-exclamation-circle" size="28px"></q-icon>
+                    <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">
@@ -39,7 +39,7 @@
                 </div>
             </div>
 
-            <div class="col q-mx-md">
+            <div class="q-mx-md">
                 <div v-html="message"></div>
             </div>
 
@@ -50,10 +50,10 @@
         </div>
 
         <!--------------------------------------------------->
-        <div v-show="type == 'prompt'" class="dialog column bg-white no-wrap" style="min-height: 250px">
+        <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="las la-exclamation-circle" size="28px"></q-icon>
+                    <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">
@@ -63,7 +63,7 @@
                 </div>
             </div>
 
-            <div class="col q-mx-md">
+            <div class="q-mx-md">
                 <div v-html="message"></div>
                 <q-input ref="input" class="q-mt-xs" outlined dense v-model="inputValue"/>
                 <div class="error"><span v-show="error != ''">{{ error }}</span></div>
@@ -74,6 +74,34 @@
                 <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick">OK</q-btn>
             </div>
         </div>
+
+        <!--------------------------------------------------->
+        <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>
+                    <div v-html="caption"></div>
+                </div>
+                <div class="close-icon column justify-center items-center">
+                    <q-btn flat round dense v-close-popup>
+                        <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 class="q-my-md text-center">
+                    <div v-show="hotKeyCode == ''" class="text-grey-5">Нет</div>
+                    <div>{{ hotKeyCode }}</div>
+                </div>
+            </div>
+
+            <div class="buttons row justify-end q-pa-md">
+                <q-btn class="q-px-md q-ml-sm" dense no-caps v-close-popup>Отмена</q-btn>
+                <q-btn class="q-px-md q-ml-sm" color="primary" dense no-caps @click="okClick" :disabled="hotKeyCode == ''">OK</q-btn>
+            </div>
+        </div>
     </q-dialog>
 </template>
 
@@ -82,7 +110,7 @@
 import Vue from 'vue';
 import Component from 'vue-class-component';
 
-//import * as utils from '../../share/utils';
+import * as utils from '../../share/utils';
 
 export default @Component({
     watch: {
@@ -99,6 +127,8 @@ class StdDialog extends Vue {
     inputValue = '';
     error = '';
     iconColor = '';
+    iconName = '';
+    hotKeyCode = '';
 
     created() {
         if (this.$root.addKeyHook) {
@@ -115,10 +145,21 @@ class StdDialog extends Vue {
         this.inputValidator = null;
         this.inputValue = '';
         this.error = '';
+        this.showed = false;
 
         this.iconColor = 'text-warning';
-        if (opts && opts.type) {
-            this.iconColor = `text-${opts.type}`;
+        if (opts && opts.color) {
+            this.iconColor = `text-${opts.color}`;
+        }
+
+        this.iconName = 'las la-exclamation-circle';
+        if (opts && opts.iconName) {
+            this.iconName = opts.iconName;
+        }
+
+        this.hotKeyCode = '';
+        if (opts && opts.hotKeyCode) {
+            this.hotKeyCode = opts.hotKeyCode;
         }
     }
 
@@ -127,6 +168,7 @@ class StdDialog extends Vue {
             this.hideTrigger();
             this.hideTrigger = null;
         }
+        this.showed = false;
     }
 
     onShow() {
@@ -136,6 +178,7 @@ class StdDialog extends Vue {
                 this.validate(this.inputValue);
             this.$refs.input.focus();
         }
+        this.showed = true;
     }
 
     validate(value) {
@@ -158,6 +201,12 @@ class StdDialog extends Vue {
             this.$refs.dialog.shake();
             return;
         }
+
+        if (this.type == 'hotKey' && this.hotKeyCode == '') {
+            this.$refs.dialog.shake();
+            return;
+        }
+
         this.ok = true;
         this.$refs.dialog.hide();
     }
@@ -218,11 +267,49 @@ class StdDialog extends Vue {
         });
     }
 
+    getHotKey(message, caption, opts) {
+        return new Promise((resolve) => {
+            this.init(message, caption, opts);
+
+            this.hideTrigger = () => {
+                if (this.ok) {
+                    resolve(this.hotKeyCode);
+                } else {
+                    resolve(false);
+                }
+            };
+
+            this.type = 'hotKey';
+            this.active = true;
+        });
+    }
+
     keyHook(event) {
-        if (this.active && event.code == 'Enter') {
-            this.okClick();
-            event.stopPropagation();
-            event.preventDefault();
+        if (this.active && this.showed) {
+            let handled = false;
+            if (this.type == 'hotKey') {
+                if (event.type == 'keydown') {
+                    this.hotKeyCode = utils.keyEventToCode(event);
+                    handled = true;
+                }
+            } else {
+                if (event.key == 'Enter') {
+                    this.okClick();
+                    handled = true;
+                }
+
+                if (event.key == 'Escape') {
+                    this.$nextTick(() => {
+                        this.$refs.dialog.hide();
+                    });
+                    handled = true;
+                }
+            }
+
+            if (handled) {
+                event.stopPropagation();
+                event.preventDefault();
+            }
         }
     }
 }

client/components/share/Window.vue

@@ -1,10 +1,11 @@
 <template>
     <div ref="main" class="main xyfit absolute" @click="close" @mouseup="onMouseUp" @mousemove="onMouseMove">
         <div ref="windowBox" class="xyfit absolute flex no-wrap" @click.stop>
-            <div class="window flexfit column no-wrap">
+            <div ref="window" class="window flexfit column no-wrap">
                 <div ref="header" class="header row justify-end" @mousedown.prevent.stop="onMouseDown"
                     @touchstart.stop="onTouchStart" @touchend.stop="onTouchEnd" @touchmove.stop="onTouchMove">
                     <span class="header-text col"><slot name="header"></slot></span>
+                    <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>
 
@@ -25,11 +26,15 @@ export default @Component({
         width: { type: String, default: '100%' },
         maxWidth: { type: String, default: '' },
         topShift: { type: Number, default: 0 },
+        margin: '',
     }
 })
 class Window extends Vue {
     init() {
         this.$nextTick(() => {
+            this.$refs.main.style.top = 0;
+            this.$refs.main.style.left = 0;
+
             this.$refs.windowBox.style.height = this.height;
             this.$refs.windowBox.style.width = this.width;
             if (this.maxWidth)
@@ -39,6 +44,9 @@ class Window extends Vue {
             const top = (this.$refs.main.offsetHeight - this.$refs.windowBox.offsetHeight)/2 + this.topShift;
             this.$refs.windowBox.style.left = (left > 0 ? left : 0) + 'px';
             this.$refs.windowBox.style.top = (top > 0 ? top : 0) + 'px';
+
+            if (this.margin)
+                this.$refs.window.style.margin = this.margin;
         });
     }
 

client/index.html.template

@@ -1,14 +1,14 @@
 <!DOCTYPE html>
-<html manifest="/app/manifest.appcache">
+<html>
   <head>
+    <title></title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="description" content="Браузерная онлайн-читалка книг. Поддерживаются форматы: fb2, html, txt, rtf, doc, docx, pdf, epub, mobi.">
     <meta name="keywords" content="онлайн,читалка,fb2,книги,читать,браузер,интернет">
-    <title></title>
+    <script src="/sw-register.js"></script>
   </head>
   <body>
     <div id="app"></div>
-    <script src="https://yastatic.net/share2/share.js" async="async"></script>
   </body>
 </html>

client/main.js

@@ -4,6 +4,9 @@ import router from './router';
 import store from './store';
 import './quasar';
 
+import vueSanitize from 'vue-sanitize';
+Vue.use(vueSanitize);
+
 import App from './components/App.vue';
 //Vue.config.productionTip = false;
 Vue.prototype.$isMobileDevice = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);

client/quasar.js

@@ -21,7 +21,7 @@ import {QSlider} from 'quasar/src/components/slider';
 import {QTabs, QTab} from 'quasar/src/components/tabs';
 //import {QTabPanels, QTabPanel} from 'quasar/src/components/tab-panels';
 import {QSeparator} from 'quasar/src/components/separator';
-import {QList, QItem, QItemSection, QItemLabel} from 'quasar/src/components/item';
+//import {QList, QItem, QItemSection, QItemLabel} from 'quasar/src/components/item';
 import {QTooltip} from 'quasar/src/components/tooltip';
 import {QSpinner} from 'quasar/src/components/spinner';
 import {QTable, QTh, QTr, QTd} from 'quasar/src/components/table';
@@ -30,6 +30,9 @@ import {QSelect} from 'quasar/src/components/select';
 import {QColor} from 'quasar/src/components/color';
 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 {QExpansionItem} from 'quasar/src/components/expansion-item';
 
 const components = {
     //QLayout,
@@ -46,7 +49,7 @@ const components = {
     QTabs, QTab,
     //QTabPanels, QTabPanel,
     QSeparator,
-    QList, QItem, QItemSection, QItemLabel,
+    //QList, QItem, QItemSection, QItemLabel,
     QTooltip,
     QSpinner,
     QTable, QTh, QTr, QTd,
@@ -55,6 +58,9 @@ const components = {
     QColor,
     QPopupProxy,
     QDialog,
+    QChip,
+    QTree,
+    //QExpansionItem,
 };
 
 //directives 
@@ -80,7 +86,6 @@ Vue.use(Quasar, { config, components, directives, plugins });
 //import '@quasar/extras/material-icons-outlined/material-icons-outlined.css';
 //import '@quasar/extras/fontawesome-v5/fontawesome-v5.css';
 
-//import '@quasar/extras/material-icons-outlined/material-icons-outlined.css';
 import '@quasar/extras/line-awesome/line-awesome.css';
 
 //import fontawesomeV5 from 'quasar/icon-set/fontawesome-v5.js'

client/router.js

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

client/share/utils.js

@@ -103,47 +103,107 @@ export function fromBase64(data) {
     ));
 }
 
-export function getObjDiff(oldObj, newObj) {
-    const result = {__isDiff: true, change: {}, add: {}, del: []};
+export function getObjDiff(oldObj, newObj, opts = {}) {
+    const {
+        exclude = [],
+        excludeAdd = [],
+        excludeDel = [],
+    } = opts;
 
-    for (const key of Object.keys(oldObj)) {
-        if (newObj.hasOwnProperty(key)) {
-            if (!_.isEqual(oldObj[key], newObj[key])) {
-                if (_.isObject(oldObj[key]) && _.isObject(newObj[key])) {
-                    result.change[key] = getObjDiff(oldObj[key], newObj[key]);
-                } else {
-                    result.change[key] = _.cloneDeep(newObj[key]);
+    const ex = new Set(exclude);
+    const exAdd = new Set(excludeAdd);
+    const exDel = new Set(excludeDel);
+
+    const makeObjDiff = (oldObj, newObj, keyPath) => {
+        const result = {__isDiff: true, change: {}, add: {}, del: []};
+
+        keyPath = `${keyPath}${keyPath ? '/' : ''}`;
+
+        for (const key of Object.keys(oldObj)) {
+            const kp = `${keyPath}${key}`;
+
+            if (newObj.hasOwnProperty(key)) {
+                if (ex.has(kp))
+                    continue;
+
+                if (!_.isEqual(oldObj[key], newObj[key])) {
+                    if (_.isObject(oldObj[key]) && _.isObject(newObj[key])) {
+                        result.change[key] = makeObjDiff(oldObj[key], newObj[key], kp);
+                    } else {
+                        result.change[key] = _.cloneDeep(newObj[key]);
+                    }
                 }
+            } else {
+                if (exDel.has(kp))
+                    continue;
+                result.del.push(key);
             }
-        } else {
-            result.del.push(key);
         }
+
+        for (const key of Object.keys(newObj)) {
+            const kp = `${keyPath}${key}`;
+            if (exAdd.has(kp))
+                continue;
+
+            if (!oldObj.hasOwnProperty(key)) {
+                result.add[key] = _.cloneDeep(newObj[key]);
+            }
+        }
+
+        return result;
     }
 
-    for (const key of Object.keys(newObj)) {
-        if (!oldObj.hasOwnProperty(key)) {
-            result.add[key] = _.cloneDeep(newObj[key]);
-        }
-    }
-
-    return result;
+    return makeObjDiff(oldObj, newObj, '');
 }
 
 export function isObjDiff(diff) {
-    return (_.isObject(diff) && diff.__isDiff);
+    return (_.isObject(diff) && diff.__isDiff && diff.change && diff.add && diff.del);
 }
 
 export function isEmptyObjDiff(diff) {
-    return (!_.isObject(diff) || !diff.__isDiff ||
-        (!Object.keys(diff.change).length &&
-            !Object.keys(diff.add).length &&
-            !diff.del.length
+    return (!isObjDiff(diff) ||
+        !(Object.keys(diff.change).length ||
+          Object.keys(diff.add).length ||
+          diff.del.length
         )
     );
 }
 
-export function applyObjDiff(obj, diff, isAddChanged) {
-    const result = _.cloneDeep(obj);
+export function isEmptyObjDiffDeep(diff, opts = {}) {
+    if (!isObjDiff(diff))
+        return true;
+
+    const {
+        isApplyChange = true,
+        isApplyAdd = true,
+        isApplyDel = true,
+    } = opts;
+
+    let notEmptyDeep = false;
+    const change = diff.change;
+    for (const key of Object.keys(change)) {
+        if (_.isObject(change[key]))
+            notEmptyDeep |= !isEmptyObjDiffDeep(change[key], opts);
+        else if (isApplyChange)
+            notEmptyDeep = true;
+    }
+
+    return !(
+        notEmptyDeep ||
+        (isApplyAdd && Object.keys(diff.add).length) ||
+        (isApplyDel && diff.del.length)
+    );
+}
+
+export function applyObjDiff(obj, diff, opts = {}) {
+    const {
+        isAddChanged = false,
+        isApplyChange = true,
+        isApplyAdd = true,
+        isApplyDel = true,
+    } = opts;
+
+    let result = _.cloneDeep(obj);
     if (!diff.__isDiff)
         return result;
 
@@ -151,21 +211,28 @@ export function applyObjDiff(obj, diff, isAddChanged) {
     for (const key of Object.keys(change)) {
         if (result.hasOwnProperty(key)) {
             if (_.isObject(change[key])) {
-                result[key] = applyObjDiff(result[key], change[key], isAddChanged);
+                result[key] = applyObjDiff(result[key], change[key], opts);
             } else {
-                result[key] = _.cloneDeep(change[key]);
+                if (isApplyChange)
+                    result[key] = _.cloneDeep(change[key]);
             }
         } else if (isAddChanged) {
             result[key] = _.cloneDeep(change[key]);
         }
     }
 
-    for (const key of Object.keys(diff.add)) {
-        result[key] = _.cloneDeep(diff.add[key]);
+    if (isApplyAdd) {
+        for (const key of Object.keys(diff.add)) {
+            result[key] = _.cloneDeep(diff.add[key]);
+        }
     }
 
-    for (const key of diff.del) {
-        delete result[key];
+    if (isApplyDel && diff.del.length) {
+        for (const key of diff.del) {
+            delete result[key];
+        }
+        if (_.isArray(result))
+            result = result.filter(v => v);
     }
 
     return result;
@@ -202,4 +269,90 @@ export function escapeXml(str) {
         .replace(/"/g, '"')
         .replace(/'/g, ''')
     ;
+}
+
+export function keyEventToCode(event) {
+    let result = [];
+    let code = event.code;
+
+    const modCode = code.substring(0, 3);
+    if (event.metaKey && modCode != 'Met')
+        result.push('Meta');
+    if (event.ctrlKey && modCode != 'Con')
+        result.push('Ctrl');
+    if (event.shiftKey && modCode != 'Shi')
+        result.push('Shift');
+    if (event.altKey && modCode != 'Alt')
+        result.push('Alt');
+    
+    if (modCode == 'Dig') {
+        code = code.substring(5, 6);
+    } else if (modCode == 'Key') {
+        code = code.substring(3, 4);
+    }
+    result.push(code);
+
+    return result.join('+');
+}
+
+export function userHotKeysObjectSwap(userHotKeys) {
+    let result = {};
+    for (const [name, codes] of Object.entries(userHotKeys)) {
+        for (const code of codes) {
+            result[code] = name;
+        }
+    }
+    return result;
+}
+
+export function removeHtmlTags(s) {
+    return s.replace(/(<([^>]+)>)/ig, '');
+}
+
+export function makeValidFilename(filename, repl = '_') {
+    let f = filename.replace(/[\x00\\/:*"<>|]/g, repl); // eslint-disable-line no-control-regex
+    f = f.trim();
+    while (f.length && (f[f.length - 1] == '.' || f[f.length - 1] == '_')) {
+        f = f.substring(0, f.length - 1);
+    }
+
+    if (f)
+        return f;
+    else
+        throw new Error('Invalid filename');
+}
+
+export function getBookTitle(fb2) {
+    fb2 = (fb2 ? fb2 : {});
+    const result = {};
+
+   if (fb2.author) {
+        const authorNames = fb2.author.map(a => _.compact([
+            a.lastName,
+            a.firstName,
+            a.middleName
+        ]).join(' '));
+
+        result.author = authorNames.join(', ');
+    }
+
+    if (fb2.sequence) {
+        const seqs = fb2.sequence.map(s => _.compact([
+            s.name,
+            (s.number ? `#${s.number}` : null),
+        ]).join(' '));
+
+        result.sequence = seqs.join(', ');
+        if (result.sequence)
+            result.sequenceTitle = `(${result.sequence})`;
+    }
+
+    result.bookTitle = _.compact([result.sequenceTitle, fb2.bookTitle]).join(' ');
+
+    result.fullTitle = _.compact([
+        result.author,
+        result.bookTitle
+    ]).join(' - ');
+
+    return result;
 }

client/store/index.js

@@ -12,11 +12,11 @@ Vue.use(Vuex);
 const debug = process.env.NODE_ENV !== 'production';
 
 export default new Vuex.Store(Object.assign({}, root, {
-  modules: {
-    uistate,
-    config,
-    reader,
-  },
-  strict: debug,
-  plugins: [createPersistedState()]
+    modules: {
+        uistate,
+        config,
+        reader,
+    },
+    strict: debug,
+    plugins: [createPersistedState()]
 }));

client/store/modules/reader.js

@@ -1,15 +1,84 @@
-//занчение toolButtons.name не должно совпадать с settingDefaults-propertyName
+import * as utils from '../../share/utils';
+
+const readerActions = {
+    'help': 'Вызвать cправку',
+    'loader': 'На страницу загрузки',
+    'settings': 'Настроить',
+    'undoAction': 'Действие назад',
+    'redoAction': 'Действие вперед',
+    'fullScreen': 'На весь экран',
+    'scrolling': 'Плавный скроллинг',
+    'stopScrolling': '',
+    'setPosition': 'Установить позицию',
+    'search': 'Найти в тексте',
+    'copyText': 'Скопировать текст со страницы',
+    'splitToPara': 'Обновить с разбиением на параграфы',
+    'refresh': 'Принудительно обновить книгу',
+    'offlineMode': 'Автономный режим (без интернета)',
+    'contents': 'Оглавление/закладки',
+    'libs': 'Сетевая библиотека',
+    'recentBooks': 'Открыть недавние',
+    'switchToolbar': 'Показать/скрыть панель управления',
+    'donate': '',
+    'bookBegin': 'В начало книги',
+    'bookEnd': 'В конец книги',
+    'pageBack': 'Страницу назад',
+    'pageForward': 'Страницу вперед',
+    'lineBack': 'Строчку назад',
+    'lineForward': 'Строчку вперед',
+    'incFontSize': 'Увеличить размер шрифта',
+    'decFontSize': 'Уменьшить размер шрифта',
+    'scrollingSpeedUp': 'Увеличить скорость скроллинга',
+    'scrollingSpeedDown': 'Уменьшить скорость скроллинга',
+};
+
+//readerActions[name]
 const toolButtons = [
-    {name: 'undoAction',  show: true, text: 'Действие назад'},
-    {name: 'redoAction',  show: true, text: 'Действие вперед'},
-    {name: 'fullScreen',  show: true, text: 'На весь экран'},
-    {name: 'scrolling',   show: false, text: 'Плавный скроллинг'},
-    {name: 'setPosition', show: true, text: 'На страницу'},
-    {name: 'search',      show: true, text: 'Найти в тексте'},
-    {name: 'copyText',    show: false, text: 'Скопировать текст со страницы'},
-    {name: 'refresh',     show: true, text: 'Принудительно обновить книгу'},
-    {name: 'offlineMode', show: false, text: 'Автономный режим (без интернета)'},
-    {name: 'recentBooks', show: true, text: 'Открыть недавние'},
+    {name: 'undoAction',  show: true},
+    {name: 'redoAction',  show: true},
+    {name: 'fullScreen',  show: true},
+    {name: 'scrolling',   show: false},
+    {name: 'setPosition', show: true},
+    {name: 'search',      show: true},
+    {name: 'copyText',    show: false},
+    {name: 'splitToPara', show: false},
+    {name: 'refresh',     show: true},
+    {name: 'contents',    show: true},
+    {name: 'libs',        show: true},
+    {name: 'recentBooks', show: true},
+    {name: 'offlineMode', show: false},
+];
+
+//readerActions[name]
+const hotKeys = [
+    {name: 'help', codes: ['F1', 'H']},
+    {name: 'loader', codes: ['Escape']},
+    {name: 'settings', codes: ['S']},
+    {name: 'undoAction', codes: ['Ctrl+BracketLeft']},
+    {name: 'redoAction', codes: ['Ctrl+BracketRight']},
+    {name: 'fullScreen', codes: ['Enter', 'Backquote', 'F']},
+    {name: 'scrolling', codes: ['Z']},
+    {name: 'setPosition', codes: ['P']},
+    {name: 'search', codes: ['Ctrl+F']},
+    {name: 'copyText', codes: ['Ctrl+C']},
+    {name: 'splitToPara', codes: ['Shift+R']},
+    {name: 'refresh', codes: ['R']},
+    {name: 'contents', codes: ['C']},
+    {name: 'libs', codes: ['L']},
+    {name: 'recentBooks', codes: ['X']},
+    {name: 'offlineMode', codes: ['O']},
+
+    {name: 'switchToolbar', codes: ['Tab', 'Q']},
+    {name: 'bookBegin', codes: ['Home']},
+    {name: 'bookEnd', codes: ['End']},
+    {name: 'pageBack', codes: ['PageUp', 'ArrowLeft', 'Backspace', 'Shift+Space']},
+    {name: 'pageForward', codes: ['PageDown', 'ArrowRight', 'Space']},
+    {name: 'lineBack', codes: ['ArrowUp']},
+    {name: 'lineForward', codes: ['ArrowDown']},
+    {name: 'incFontSize', codes: ['A']},
+    {name: 'decFontSize', codes: ['Shift+A']},
+    {name: 'scrollingSpeedUp', codes: ['Shift+ArrowDown']},
+    {name: 'scrollingSpeedDown', codes: ['Shift+ArrowUp']},
 ];
 
 const fonts = [
@@ -136,6 +205,7 @@ const webFonts = [
 
 ];
 
+//----------------------------------------------------------------------------------------------------------
 const settingDefaults = {
     textColor: '#000000',
     backgroundColor: '#EBE2C9',
@@ -160,6 +230,7 @@ const settingDefaults = {
     statusBarTop: false,// top, bottom
     statusBarHeight: 19,// px
     statusBarColorAlpha: 0.4,
+    statusBarClickOpen: true,
 
     scrollingDelay: 3000,// замедление, ms
     scrollingType: 'ease-in-out', //linear, ease, ease-in, ease-out, ease-in-out
@@ -183,10 +254,12 @@ const settingDefaults = {
     showServerStorageMessages: true,
     showWhatsNewDialog: true,
     showDonationDialog2020: true,
+    showLiberamaTopDialog2020: true,
     enableSitesFilter: true,
 
     fontShifts: {},
     showToolButton: {},
+    userHotKeys: {},
 };
 
 for (const font of fonts)
@@ -195,6 +268,49 @@ for (const font of webFonts)
     settingDefaults.fontShifts[font.name] = font.fontVertShift;
 for (const button of toolButtons)
     settingDefaults.showToolButton[button.name] = button.show;
+for (const hotKey of hotKeys)
+    settingDefaults.userHotKeys[hotKey.name] = hotKey.codes;
+
+const excludeDiffHotKeys = [];
+for (const hotKey of hotKeys)
+    excludeDiffHotKeys.push(`userHotKeys/${hotKey.name}`);
+
+function addDefaultsToSettings(settings) {
+    const diff = utils.getObjDiff(settings, settingDefaults, {exclude: excludeDiffHotKeys});
+    if (!utils.isEmptyObjDiffDeep(diff, {isApplyChange: false})) {
+        return utils.applyObjDiff(settings, diff, {isApplyChange: false});
+    }
+
+    return false;
+}
+
+const libsDefaults = {
+    startLink: 'http://flibusta.is',
+    comment: 'Флибуста | Книжное братство',
+    closeAfterSubmit: false,
+    openInFrameOnEnter: false,
+    openInFrameOnAdd: false,
+    groups: [
+        {r: 'http://flibusta.is', s: 'http://flibusta.is', list: [
+            {l: 'http://flibusta.is', c: 'Флибуста | Книжное братство'},
+        ]},
+        {r: 'https://flibs.in', s: 'https://flibs.in', list: [
+            {l: 'https://flibs.in', c: 'Flibs'},
+        ]},
+        {r: 'http://fantasy-worlds.org', s: 'http://fantasy-worlds.org', list: [
+            {l: 'http://fantasy-worlds.org', c: 'Миры Фэнтези'},
+        ]},
+        {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: 'АЛЬДЕБАРАН | Электронная библиотека книг'},
+        ]},
+    ]
+};
 
 // initial state
 const state = {
@@ -209,6 +325,8 @@ const state = {
     currentProfile: '',
     settings: Object.assign({}, settingDefaults),
     settingsRev: {},
+    libs: Object.assign({}, libsDefaults),
+    libsRev: 0,
 };
 
 // getters
@@ -247,18 +365,34 @@ const mutations = {
         state.currentProfile = value;
     },
     setSettings(state, value) {
-        state.settings = Object.assign({}, state.settings, value);
+        const newSettings = Object.assign({}, state.settings, value);
+        const added = addDefaultsToSettings(newSettings);
+        if (added) {
+            state.settings = added;
+        } else {
+            state.settings = newSettings;
+        }
     },
     setSettingsRev(state, value) {
         state.settingsRev = Object.assign({}, state.settingsRev, value);
     },
+    setLibs(state, value) {
+        state.libs = value;
+    },
+    setLibsRev(state, value) {
+        state.libsRev = value;
+    },
 };
 
 export default {
+    readerActions,
     toolButtons,
+    hotKeys,
     fonts,
     webFonts,
     settingDefaults,
+    addDefaultsToSettings,
+    libsDefaults,
 
     namespaced: true,
     state,

docs/beta/beta.liberama

@@ -0,0 +1,85 @@
+server {
+  listen 443 ssl; # managed by Certbot
+  ssl_certificate /etc/letsencrypt/live/beta.liberama.top/fullchain.pem; # managed by Certbot
+  ssl_certificate_key /etc/letsencrypt/live/beta.liberama.top/privkey.pem; # managed by Certbot
+  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
+  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
+
+  server_name beta.liberama.top;
+
+  client_max_body_size 50m;
+  proxy_read_timeout 1h;
+
+  gzip on;
+  gzip_min_length 1024;
+  gzip_proxied expired no-cache no-store private auth;
+  gzip_types *;
+
+  location /api {
+    proxy_pass http://127.0.0.1:34082;
+  }
+
+  location /ws {
+    proxy_pass http://127.0.0.1:34082;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+  }
+
+  location / {
+    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;
+    }
+  }
+}
+
+server {
+  listen 80;
+  server_name beta.liberama.top;
+
+  return 301 https://$host$request_uri;
+}
+
+server {
+  listen 80;
+  server_name b.beta.liberama.top;
+
+  client_max_body_size 50m;
+  proxy_read_timeout 1h;
+
+  gzip on;
+  gzip_min_length 1024;
+  gzip_proxied expired no-cache no-store private auth;
+  gzip_types *;
+
+  location /api {
+    proxy_pass http://127.0.0.1:34082;
+  }
+
+  location /ws {
+    proxy_pass http://127.0.0.1:34082;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+  }
+
+  location / {
+    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;
+    }
+  }
+}

docs/beta/beta.omnireader

@@ -0,0 +1,48 @@
+server {
+  listen 443 ssl; # managed by Certbot
+  ssl_certificate /etc/letsencrypt/live/beta.omnireader.ru/fullchain.pem; # managed by Certbot
+  ssl_certificate_key /etc/letsencrypt/live/beta.omnireader.ru/privkey.pem; # managed by Certbot
+  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
+  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
+
+  server_name beta.omnireader.ru;
+
+  client_max_body_size 50m;
+  proxy_read_timeout 1h;
+
+  gzip on;
+  gzip_min_length 1024;
+  gzip_proxied expired no-cache no-store private auth;
+  gzip_types *;
+
+  location /api {
+    proxy_pass http://127.0.0.1:34081;
+  }
+
+  location /ws {
+    proxy_pass http://127.0.0.1:34081;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+  }
+
+  location / {
+    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;
+    }
+  }
+}
+
+server {
+  listen 80;
+  server_name beta.omnireader.ru;
+
+  return 301 https://$host$request_uri;
+}

docs/beta/deploy.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+npm run build:linux
+sudo -u www-data cp -r ../../dist/linux/* /home/beta.liberama

docs/beta/run_server.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+sudo -H -u www-data bash -c "cd /var/www; /home/beta.liberama/liberama"

docs/liberama.top/liberama

@@ -0,0 +1,143 @@
+server {
+    server_name _;
+    listen 80 default_server;
+    listen 443 ssl default_server;
+
+    #openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/nginx/ssl/nginx.key -out /etc/nginx/ssl/nginx.crt
+    ssl_certificate /etc/nginx/ssl/nginx.crt;
+    ssl_certificate_key /etc/nginx/ssl/nginx.key;
+    return 403;
+}
+
+server {
+  listen 443 ssl; # managed by Certbot
+  ssl_certificate /etc/letsencrypt/live/liberama.top/fullchain.pem; # managed by Certbot
+  ssl_certificate_key /etc/letsencrypt/live/liberama.top/privkey.pem; # managed by Certbot
+  include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
+  ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
+
+  server_name liberama.top;
+
+  client_max_body_size 50m;
+  proxy_read_timeout 1h;
+
+  gzip on;
+  gzip_min_length 1024;
+  gzip_proxied expired no-cache no-store private auth;
+  gzip_types *;
+
+  location /api {
+    proxy_pass http://127.0.0.1:55081;
+  }
+
+  location /ws {
+    proxy_pass http://127.0.0.1:55081;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+  }
+
+  location / {
+    root /home/liberama/public;
+
+    location /tmp {
+      types { } default_type "application/xml; charset=utf-8";
+      add_header Content-Encoding gzip;
+    }
+
+    location ~* \.(?:manifest|appcache|html)$ {
+      expires -1;
+    }
+  }
+}
+
+server {
+  listen 80;
+  server_name liberama.top;
+
+  return 301 https://$host$request_uri;
+}
+
+server {
+  listen 80;
+  server_name b.liberama.top;
+
+  client_max_body_size 50m;
+  proxy_read_timeout 1h;
+
+  gzip on;
+  gzip_min_length 1024;
+  gzip_proxied expired no-cache no-store private auth;
+  gzip_types *;
+
+  location /api {
+    proxy_pass http://127.0.0.1:55081;
+  }
+
+  location /ws {
+    proxy_pass http://127.0.0.1:55081;
+    proxy_http_version 1.1;
+    proxy_set_header Upgrade $http_upgrade;
+    proxy_set_header Connection "upgrade";
+  }
+
+  location / {
+    root /home/liberama/public;
+
+    location /tmp {
+      types { } default_type "application/xml; charset=utf-8";
+      add_header Content-Encoding gzip;
+    }
+
+    location ~* \.(?:manifest|appcache|html)$ {
+      expires -1;
+    }
+  }
+}
+
+server {
+  listen 23480;
+  server_name flibusta_proxy;
+
+  valid_referers liberama.top b.liberama.top;
+
+  if ($invalid_referer) {
+    return 403;
+  }
+
+  location / {
+    proxy_pass http://flibusta.is;
+    proxy_redirect http://static.flibusta.is:443 http://b.liberama.top:23481;
+  }
+}
+
+server {
+  listen 23481;
+  server_name flibusta_proxy_static;
+
+  valid_referers liberama.top b.liberama.top;
+
+  if ($invalid_referer) {
+    return 403;
+  }
+
+  location / {
+    proxy_pass http://static.flibusta.is:443;
+    proxy_set_header Referer "";
+  }
+}
+
+server {
+  listen 23580;
+  server_name fw_proxy;
+
+  valid_referers liberama.top b.liberama.top;
+
+  if ($invalid_referer) {
+    return 403;
+  }
+
+  location / {
+    proxy_pass http://fantasy-worlds.org;
+  }
+}

docs/omnireader.ru/README.md

@@ -27,23 +27,27 @@ sudo chown www-data.www-data /home/liberama
 
 ### external converter `calibre`, download from https://download.calibre-ebook.com/
 ```
-wget "https://download.calibre-ebook.com/3.39.1/calibre-3.39.1-x86_64.txz"
+wget "https://download.calibre-ebook.com/5.5.0/calibre-5.5.0-x86_64.txz"
 sudo -u www-data mkdir -p /home/liberama/data/calibre
-sudo -u www-data tar xvf calibre-3.39.1-x86_64.txz -C /home/liberama/data/calibre
+sudo -u www-data tar xvf calibre-5.5.0-x86_64.txz -C /home/liberama/data/calibre
 ```
 
 ### external converters
 ```
+sudo apt install rar
 sudo apt install libreoffice
 sudo apt install poppler-utils
+sudo apt install djvulibre-bin
+sudo apt install libtiff-tools
+sudo apt install graphicsmagick-imagemagick-compat
 ```
 
 ### nginx, server config
-Для своего домена необходимо будет подправить docs/omnireader/omnireader.
+Для своего домена необходимо будет подправить docs/omnireader.ru/omnireader.
 Можно также настроить сервер для HTTP, без SSL.
 ```
 sudo apt install nginx
-sudo cp docs/omnireader/omnireader /etc/nginx/sites-available/omnireader
+sudo cp docs/omnireader.ru/omnireader /etc/nginx/sites-available/omnireader
 sudo ln -s /etc/nginx/sites-available/omnireader /etc/nginx/sites-enabled/omnireader
 sudo rm /etc/nginx/sites-enabled/default
 sudo service nginx reload
@@ -59,14 +63,20 @@ sudo service php7.2-fpm restart
 
 sudo mkdir /home/oldreader
 sudo chown www-data.www-data /home/oldreader
-sudo -u www-data cp -r docs/omnireader/old/* /home/oldreader
+sudo -u www-data cp -r docs/omnireader.ru/old/* /home/oldreader
+```
+
+## Запуск по крону
+```
+* * * * * /root/liberama/docs/omnireader.ru/cron_server.sh
 ```
 
 ## Деплой и запуск
 ```
-cd docs/omnireader
+cd docs/omnireader.ru
+./stop_server.sh
 ./deploy.sh
-./run_server.sh
+./start_server.sh
 ```
 
 После первого запуска будет создан конфигурационный файл `/home/liberama/data/config.json`.
@@ -81,4 +91,4 @@ cd docs/omnireader
         }
     ]
 ```
-и перезапустить `run_server.sh`
+и перезапустить сервер

docs/omnireader.ru/cron_server.sh

@@ -0,0 +1,8 @@
+#!/bin/bash
+
+if ! pgrep -x "liberama" > /dev/null ; then
+    sudo -H -u www-data bash -c "cd /var/www; /home/liberama/liberama"
+else
+    echo "Process 'liberama' already running"
+fi
+

docs/omnireader.ru/omnireader

@@ -30,7 +30,7 @@ server {
     root /home/liberama/public;
 
     location /tmp {
-      add_header Content-Type text/xml;
+      types { } default_type "application/xml; charset=utf-8";
       add_header Content-Encoding gzip;
     }
 

docs/omnireader.ru/omnireader_http

@@ -25,7 +25,7 @@ server {
     root /home/liberama/public;
 
     location /tmp {
-      add_header Content-Type text/xml;
+      types { } default_type "application/xml; charset=utf-8";
       add_header Content-Encoding gzip;
     }
 

docs/omnireader.ru/start_server.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+sudo -H -u www-data bash -c "cd /var/www; /home/liberama/liberama" & disown
+sudo service cron start

docs/omnireader.ru/stop_server.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+sudo service cron stop
+sudo killall liberama

docs/omnireader/run_server.sh

@@ -1,11 +0,0 @@
-#!/bin/bash
-
-sudo -H -u www-data bash -c "\
-while true; do\
-  trap '' 2;\
-  cd /var/www;\
-  /home/liberama/liberama;\
-  trap 2;\
-  echo \"Restart after 5 sec. Press Ctrl+C to exit.\";\
-  sleep 5;\
-done;"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Liberama",
-  "version": "0.9.0",
+  "version": "0.9.10",
   "author": "Book Pauk <bookpauk@gmail.com>",
   "license": "CC0-1.0",
   "repository": "bookpauk/liberama",
@@ -8,7 +8,7 @@
     "node": ">=10.0.0"
   },
   "scripts": {
-    "dev": "nodemon --inspect --exec 'node server'",
+    "dev": "nodemon --inspect --ignore server/public --ignore server/data --exec 'node server'",
     "build:client": "webpack --config build/webpack.prod.config.js",
     "build:linux": "npm run build:client && node build/linux && pkg -t latest-linux-x64 -o dist/linux/liberama .",
     "build:win": "npm run build:client && node build/win && pkg -t latest-win-x64 -o dist/win/liberama .",
@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "babel-core": "^6.22.1",
-    "babel-eslint": "^10.0.3",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^7.1.1",
     "babel-plugin-component": "^1.1.1",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
@@ -32,7 +32,6 @@
     "clean-webpack-plugin": "^1.0.1",
     "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^1.0.0",
-    "element-theme-chalk": "^2.12.0",
     "eslint": "^5.16.0",
     "eslint-plugin-html": "^5.0.5",
     "eslint-plugin-node": "^8.0.0",
@@ -41,27 +40,26 @@
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.5.0",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
-    "pkg": "^4.4.2",
+    "pkg": "^4.4.4",
     "terser-webpack-plugin": "^1.4.1",
     "url-loader": "^1.1.2",
     "vue-class-component": "^6.3.2",
-    "vue-loader": "^15.7.1",
+    "vue-loader": "^15.9.0",
     "vue-style-loader": "^4.1.2",
-    "vue-template-compiler": "^2.6.10",
-    "webpack": "^4.39.3",
-    "webpack-cli": "^3.3.7",
-    "webpack-dev-middleware": "^3.7.1",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-middleware": "^3.7.2",
     "webpack-hot-middleware": "^2.25.0",
-    "webpack-merge": "^4.2.2"
+    "webpack-merge": "^4.2.2",
+    "workbox-webpack-plugin": "^5.1.3"
   },
   "dependencies": {
-    "@quasar/extras": "^1.5.0",
-    "appcache-webpack-plugin": "^1.4.0",
+    "@quasar/extras": "^1.5.2",
     "axios": "^0.18.1",
-    "base-x": "^3.0.6",
+    "base-x": "^3.0.8",
     "chardet": "^0.7.0",
     "compression": "^1.7.4",
-    "element-ui": "^2.12.0",
     "express": "^4.17.1",
     "fg-loadcss": "^2.1.0",
     "fs-extra": "^7.0.1",
@@ -72,21 +70,23 @@
     "lodash": "^4.17.15",
     "minimist": "^1.2.0",
     "multer": "^1.4.2",
-    "pako": "^1.0.10",
+    "pako": "^1.0.11",
     "path-browserify": "^1.0.0",
-    "quasar": "^1.8.5",
+    "pidusage": "^2.0.21",
+    "quasar": "^1.14.3",
     "safe-buffer": "^5.2.0",
     "sjcl": "^1.0.8",
     "sql-template-strings": "^2.2.2",
     "sqlite": "^3.0.3",
     "tar-fs": "^2.0.0",
     "unbzip2-stream": "^1.3.3",
-    "vue": "github:paulkamer/vue#fix_palemoon_clickhandlers_dist",
-    "vue-router": "^3.1.3",
-    "vuex": "^3.1.1",
-    "vuex-persistedstate": "^2.5.4",
-    "webdav": "^2.10.1",
+    "vue": "github:bookpauk/vue",
+    "vue-router": "^3.1.6",
+    "vue-sanitize": "^0.2.1",
+    "vuex": "^3.1.2",
+    "vuex-persistedstate": "^2.7.1",
+    "webdav": "^2.10.2",
     "ws": "^7.2.1",
-    "zip-stream": "^2.1.2"
+    "zip-stream": "^2.1.3"
   }
 }

server/config/base.js

@@ -18,7 +18,7 @@ module.exports = {
     loggingEnabled: true,
 
     maxUploadFileSize: 50*1024*1024,//50Мб
-    maxTempPublicDirSize: 512*1024*1024,//512Мб
+    maxTempPublicDirSize: 512*1024*1024,//512Мб + 20% квота если проблема с remoteWebDavStorage
     maxUploadPublicDirSize: 200*1024*1024,//100Мб
 
     useExternalBookConverter: false,

server/controllers/ReaderController.js

@@ -19,7 +19,10 @@ class ReaderController extends BaseController {
                 throw new Error(`key 'url' is empty`);
             const workerId = this.readerWorker.loadBookUrl({
                 url: request.url, 
-                enableSitesFilter: (request.hasOwnProperty('enableSitesFilter') ? request.enableSitesFilter : true)
+                enableSitesFilter: (request.hasOwnProperty('enableSitesFilter') ? request.enableSitesFilter : true),
+                skipCheck: (request.hasOwnProperty('skipCheck') ? request.skipCheck : false),
+                isText: (request.hasOwnProperty('isText') ? request.isText : false),
+                uploadFileName: (request.hasOwnProperty('uploadFileName') ? request.uploadFileName : false),
             });
             const state = this.workerState.getState(workerId);
             return (state ? state : {});

server/controllers/WebSocketController.js

@@ -138,6 +138,7 @@ class WebSocketController {
             i++;
             if (i > 2*60*1000/refreshPause) {//2 мин ждем телодвижений воркера
                 this.send({state: 'error', error: 'Время ожидания процесса истекло'}, req, ws);
+                break;
             }
             i = (prevProgress != state.progress || prevState != state.state ? 1 : i);
         }        

server/core/FileDecompressor.js

@@ -15,6 +15,13 @@ class FileDecompressor {
     constructor(limitFileSize = 0) {
         this.detector = new FileDetector();
         this.limitFileSize = limitFileSize;
+
+        this.rarPath = '/usr/bin/rar';
+        this.rarExists = false;
+        (async() => {
+            if (await fs.pathExists(this.rarPath))
+                this.rarExists = true;
+        })();
     }
 
     async decompressNested(filename, outputDir) {
@@ -30,7 +37,11 @@ class FileDecompressor {
             files: []
         };
 
-        if (!fileType || !(fileType.ext == 'zip' || fileType.ext == 'bz2' || fileType.ext == 'gz' || fileType.ext == 'tar')) {
+        if (!fileType || !(
+                    fileType.ext == 'zip' || fileType.ext == 'bz2' || fileType.ext == 'gz'
+                    || fileType.ext == 'tar' || (this.rarExists && fileType.ext == 'rar')
+                )
+            ) {
             return result;
         }
 
@@ -94,6 +105,11 @@ class FileDecompressor {
     async decompress(fileExt, filename, outputDir) {
         let files = [];
 
+        if (fileExt == 'rar' && this.rarExists) {
+            files = await this.unRar(filename, outputDir);
+            return files;
+        }
+
         switch (fileExt) {
             case 'zip':
                 files = await this.unZip(filename, outputDir);
@@ -119,14 +135,18 @@ class FileDecompressor {
         try {
             return await zip.unpack(filename, outputDir, {
                 limitFileSize: this.limitFileSize, 
-                limitFileCount: 1000
+                limitFileCount: 10000,
+                decodeEntryNameCallback: (nameRaw) => {
+                    return utils.bufferRemoveZeroes(nameRaw);
+                }
             });
         } catch (e) {
             fs.emptyDir(outputDir);
             return await zip.unpack(filename, outputDir, {
                 limitFileSize: this.limitFileSize, 
-                limitFileCount: 1000,
+                limitFileCount: 10000,
                 decodeEntryNameCallback: (nameRaw) => {
+                    nameRaw = utils.bufferRemoveZeroes(nameRaw);
                     const enc = textUtils.getEncodingLite(nameRaw);
                     if (enc.indexOf('ISO-8859') < 0) {
                         return iconv.decode(nameRaw, enc);
@@ -151,7 +171,7 @@ class FileDecompressor {
 
             if (this.limitFileSize) {
                 if ((await fs.stat(filename)).size > this.limitFileSize) {
-                    reject('Файл слишком большой');
+                    reject(new Error('Файл слишком большой'));
                     return;
                 }
             }
@@ -217,7 +237,39 @@ class FileDecompressor {
         
             inputStream.pipe(stream).pipe(outputStream);
         })().catch(reject); });
-   }
+    }
+
+    async unRar(filename, outputDir) {
+        try {
+            const args = ['x', '-p-', '-y', filename, `${outputDir}`];
+            const result = await utils.spawnProcess(this.rarPath, {
+                killAfter: 60,
+                args
+            });
+
+            if (result.code == 0) {
+                const files = [];
+                await utils.findFiles(async(file) => {
+                    const stat = await fs.stat(file);
+                    files.push({path: path.relative(outputDir, file), size: stat.size});
+                }, outputDir);
+
+                return files;
+
+            } else {
+                const error = `${result.code}|FORLOG|, exec: ${this.rarPath}, args: ${args.join(' ')}, stdout: ${result.stdout}, stderr: ${result.stderr}`;
+                throw new Error(`Архиватор Rar завершился с ошибкой: ${error}`);
+            }
+        } catch(e) {
+            if (e.status == 'killed') {
+                throw new Error('Слишком долгое ожидание архиватора Rar');
+            } else if (e.status == 'error') {
+                throw new Error(e.error);
+            } else {
+                throw new Error(e);
+            }
+        }
+    }
 
     async gzipBuffer(buf) {
         return new Promise((resolve, reject) => {
@@ -241,27 +293,29 @@ class FileDecompressor {
         });
     }
 
-    async gzipFileIfNotExists(filename, outDir) {
+    async gzipFileIfNotExists(filename, outDir, isMaxCompression) {
         const hash = await utils.getFileHash(filename, 'sha256', 'hex');
 
         const outFilename = `${outDir}/${hash}`;
 
         if (!await fs.pathExists(outFilename)) {
-            await this.gzipFile(filename, outFilename, 1);
+            await this.gzipFile(filename, outFilename, (isMaxCompression ? 9 : 1));
 
-            // переупакуем через некоторое время на максималках
-            const filenameCopy = `${filename}.copy`;
-            await fs.copy(filename, filenameCopy);
+            // переупакуем через некоторое время на максималках, если упаковали плохо
+            if (!isMaxCompression) {
+                const filenameCopy = `${filename}.copy`;
+                await fs.copy(filename, filenameCopy);
 
-            (async() => {
-                await utils.sleep(5000);
-                const filenameGZ = `${filename}.gz`;
-                await this.gzipFile(filenameCopy, filenameGZ, 9);
+                (async() => {
+                    await utils.sleep(5000);
+                    const filenameGZ = `${filename}.gz`;
+                    await this.gzipFile(filenameCopy, filenameGZ, 9);
 
-                await fs.move(filenameGZ, outFilename, {overwrite: true});
+                    await fs.move(filenameGZ, outFilename, {overwrite: true});
 
-                await fs.remove(filenameCopy);
-            })().catch((e) => { if (appLogger.inited) appLogger.log(LM_ERR, `FileDecompressor.gzipFileIfNotExists: ${e.message}`) });
+                    await fs.remove(filenameCopy);
+                })().catch((e) => { if (appLogger.inited) appLogger.log(LM_ERR, `FileDecompressor.gzipFileIfNotExists: ${e.message}`) });
+            }
         } else {
             await utils.touchFile(outFilename);
         }

server/core/FileDetector/index.js

@@ -4,7 +4,7 @@ const signatures = require('./signatures.json');
 class FileDetector {
     detectFile(filename) {
         return new Promise((resolve, reject) => {
-            this.fromFile(filename, 2000, (err, result) => {
+            this.fromFile(filename, 10000, (err, result) => {
                 if (err) reject(err);
                 resolve(result);
             });
@@ -54,7 +54,7 @@ class FileDetector {
 
     fromBuffer(buffer, callback) {
         let result = null;
-
+        //console.log(buffer);
         const invalidSignaturesList = this.validateSigantures();
         if (invalidSignaturesList.length) {
             return callback(invalidSignaturesList);

server/core/FileDetector/signatures.json

@@ -653,40 +653,6 @@
     ]
   },
 
-  {
-    "type": "svg",
-    "ext": "svg",
-    "mime": "image/svg+xml",
-    "rules": [
-      { "type": "contains", "bytes": "3c737667" }
-    ]
-  },
-
-  {
-    "type": "html",
-    "ext": "html",
-    "mime": "text/html",
-    "rules": [
-      { "type": "or", "rules":
-      [
-        { "type": "contains", "bytes": "3c68746d6c" },
-        { "type": "contains", "bytes": "3c00680074006d006c00" },
-        { "type": "equal", "end": 5, "bytes": "3c68746d6c" },
-        { "type": "equal", "end": 10, "bytes": "3c00680074006d006c00" },
-        { "type": "equal", "end": 9, "bytes": "3c21646f6374797065" },
-        { "type": "equal", "end": 5, "bytes": "3c626f6479" },
-        { "type": "equal", "end": 5, "bytes": "3c68656164" },
-        { "type": "equal", "end": 7, "bytes": "3c696672616d65" },
-        { "type": "equal", "end": 4, "bytes": "3c696d67" },
-        { "type": "equal", "end": 7, "bytes": "3c6f626a656374" },
-        { "type": "equal", "end": 7, "bytes": "3c736372697074" },
-        { "type": "equal", "end": 6, "bytes": "3c7461626c65" },
-        { "type": "equal", "end": 6, "bytes": "3c7469746c65" }
-      ]
-      }
-    ]
-  },
-
   {
     "type": "docx",
     "ext": "docx",
@@ -708,7 +674,11 @@
       { "type": "or", "rules":
       [
         { "type": "equal", "end": 19, "bytes": "3c3f786d6c2076657273696f6e3d22312e3022" },
-        { "type": "equal", "end": 22, "bytes": "efbbbf3c3f786d6c2076657273696f6e3d22312e3022" }
+        { "type": "equal", "end": 22, "bytes": "efbbbf3c3f786d6c2076657273696f6e3d22312e3022" },
+        { "type": "equal", "end": 19, "bytes": "3c3f786d6c2076657273696f6e3d27312e3027" },
+        { "type": "equal", "end": 22, "bytes": "efbbbf3c3f786d6c2076657273696f6e3d27312e3027" },
+        { "type": "equal", "end": 40, "bytes": "fffe3c003f0078006d006c002000760065007200730069006f006e003d00220031002e0030002200" },
+        { "type": "equal", "end": 40, "bytes": "fffe3c003f0078006d006c002000760065007200730069006f006e003d00270031002e0030002700" }
       ]
       }
     ]
@@ -721,6 +691,53 @@
     "rules": [
       { "type": "equal", "start": 64, "end": 68, "bytes": "4d4f4249" }
     ]
-  }
+  },
 
+  {
+    "type": "djvu",
+    "ext": "djvu",
+    "mime": "image/vnd.djvu",
+    "rules": [
+      { "type": "equal", "start": 0, "end": 8, "bytes": "41542654464f524d" },
+      { "type": "equal", "start": 12, "end": 15, "bytes": "444a56" }
+    ]
+  },  
+
+  {
+    "type": "html",
+    "ext": "html",
+    "mime": "text/html",
+    "rules": [
+      { "type": "or", "rules":
+      [
+        { "type": "contains", "bytes": "3c68746d6c" },
+        { "type": "contains", "bytes": "3c00680074006d006c00" },
+        { "type": "contains", "bytes": "3c48544d4c" },
+        { "type": "contains", "bytes": "3c00480054004d004c00" },
+
+        { "type": "equal", "end": 5, "bytes": "3c68746d6c" },
+        { "type": "equal", "end": 10, "bytes": "3c00680074006d006c00" },
+        { "type": "equal", "end": 9, "bytes": "3c21646f6374797065" },
+        { "type": "equal", "end": 9, "bytes": "3c21444f4354595045" },
+        { "type": "equal", "end": 5, "bytes": "3c626f6479" },
+        { "type": "equal", "end": 5, "bytes": "3c68656164" },
+        { "type": "equal", "end": 7, "bytes": "3c696672616d65" },
+        { "type": "equal", "end": 4, "bytes": "3c696d67" },
+        { "type": "equal", "end": 7, "bytes": "3c6f626a656374" },
+        { "type": "equal", "end": 7, "bytes": "3c736372697074" },
+        { "type": "equal", "end": 6, "bytes": "3c7461626c65" },
+        { "type": "equal", "end": 6, "bytes": "3c7469746c65" }
+      ]
+      }
+    ]
+  },
+
+  {
+    "type": "svg",
+    "ext": "svg",
+    "mime": "image/svg+xml",
+    "rules": [
+      { "type": "contains", "bytes": "3c737667" }
+    ]
+  }
 ]

server/core/LimitedQueue.js

@@ -28,7 +28,7 @@ class LimitedQueue {
     get(onPlaceChange) {
         return new Promise((resolve, reject) => {
             if (this.destroyed)
-                reject('destroyed');
+                reject(new Error('destroyed'));
 
             const take = () => {
                 if (this.freed <= 0)
@@ -73,7 +73,7 @@ class LimitedQueue {
                     if (onPlaceChange)
                         onPlaceChange(this.listeners.length);
                 } else {
-                    reject('Превышен размер очереди ожидания');
+                    reject(new Error('Превышен размер очереди ожидания'));
                 }
             }
         });

server/core/Reader/BookConverter/ConvertBase.js

@@ -6,7 +6,7 @@ const LimitedQueue = require('../../LimitedQueue');
 const textUtils = require('./textUtils');
 const utils = require('../../utils');
 
-const queue = new LimitedQueue(2, 20, 3*60*1000);//3 минуты ожидание подвижек
+const queue = new LimitedQueue(3, 20, 3*60*1000);//3 минуты ожидание подвижек
 
 class ConvertBase {
     constructor(config) {
@@ -42,20 +42,35 @@ class ConvertBase {
             throw new Error('Слишком большая очередь конвертирования. Пожалуйста, попробуйте позже.');
         }
 
+        abort = (abort ? abort : () => false);
+        const myAbort = () => {
+            return q.abort() || abort();
+        }
+
         try {
+            if (myAbort())
+                throw new Error('abort');
+
             const result = await utils.spawnProcess(path, {
-                killAfter: 600,
+                killAfter: 3600,//1 час
                 args, 
                 onData: (data) => {
-                    q.resetTimeout();
+                    if (queue.freed > 0)
+                        q.resetTimeout();
                     onData(data);
                 },
-                abort
+                //будем периодически проверять работу конвертера и если очереди нет, то разрешаем работу пинком onData
+                onUsage: (stats) => {
+                    if (queue.freed > 0 && stats.cpu >= 10) {
+                        q.resetTimeout();
+                        onData('.');
+                    }
+                },
+                onUsageInterval: 10,
+                abort: myAbort
             });
             if (result.code != 0) {
-                let error = result.code;
-                if (this.config.branch == 'development')
-                    error = `exec: ${path}, stdout: ${result.stdout}, stderr: ${result.stderr}`;
+                const error = `${result.code}|FORLOG|, exec: ${path}, args: ${args.join(' ')}, stdout: ${result.stdout}, stderr: ${result.stderr}`;
                 throw new Error(`Внешний конвертер завершился с ошибкой: ${error}`);
             }
         } catch(e) {

server/core/Reader/BookConverter/ConvertDjvu.js

@@ -0,0 +1,102 @@
+const fs = require('fs-extra');
+const path = require('path');
+const utils = require('../../utils');
+
+const ConvertHtml = require('./ConvertHtml');
+
+class ConvertDjvu extends ConvertHtml {
+    check(data, opts) {
+        const {inputFiles} = opts;
+
+        return this.config.useExternalBookConverter && 
+            inputFiles.sourceFileType && inputFiles.sourceFileType.ext == 'djvu';
+    }
+
+    async run(data, opts) {
+        if (!this.check(data, opts))
+            return false;
+
+        const {inputFiles, callback, abort, uploadFileName} = opts;
+
+        const ddjvuPath = '/usr/bin/ddjvu';
+        if (!await fs.pathExists(ddjvuPath))
+            throw new Error('Внешний конвертер ddjvu не найден');
+
+        const tiffsplitPath = '/usr/bin/tiffsplit';
+        if (!await fs.pathExists(tiffsplitPath))
+            throw new Error('Внешний конвертер tiffsplitPath не найден');
+
+        const mogrifyPath = '/usr/bin/mogrify';
+        if (!await fs.pathExists(mogrifyPath))
+            throw new Error('Внешний конвертер mogrifyPath не найден');
+
+        const dir = `${inputFiles.filesDir}/`;
+        const inpFile = `${dir}${path.basename(inputFiles.sourceFile)}`;
+        const tifFile = `${inpFile}.tif`;
+
+        //конвертируем в tiff
+        let perc = 0;
+        await this.execConverter(ddjvuPath, ['-format=tiff', '-quality=50', '-verbose', inputFiles.sourceFile, tifFile], () => {
+            perc = (perc < 100 ? perc + 1 : 40);
+            callback(perc);
+        }, abort);
+
+        const tifFileSize = (await fs.stat(tifFile)).size;
+        let limitSize = 3*this.config.maxUploadFileSize;
+        if (tifFileSize > limitSize) {
+            throw new Error(`Файл для конвертирования слишком большой|FORLOG| ${tifFileSize} > ${limitSize}`);
+        }
+
+        //разбиваем на файлы
+        await this.execConverter(tiffsplitPath, [tifFile, dir], null, abort);
+
+        await fs.remove(tifFile);
+
+        //конвертируем в jpg
+        await this.execConverter(mogrifyPath, ['-quality', '20', '-scale', '2048', '-verbose', '-format', 'jpg', `${dir}*.tif`], () => {
+            perc = (perc < 100 ? perc + 1 : 40);
+            callback(perc);
+        }, abort);
+
+        //читаем изображения
+        const loadImage = async(image) => {
+            image.data = (await fs.readFile(image.file)).toString('base64');
+            image.name = path.basename(image.file);
+        }
+
+        let files = [];
+        await utils.findFiles(async(file) => {
+            if (path.extname(file) == '.jpg')
+                files.push({name: file, base: path.basename(file)});
+        }, dir);
+
+        files.sort((a, b) => a.base.localeCompare(b.base));
+
+        let images = [];
+        let loading = [];
+        files.forEach(f => {
+            const image = {file: f.name};
+            images.push(image);
+            loading.push(loadImage(image));
+        });
+
+        await Promise.all(loading);
+
+        //формируем текст
+        limitSize = 2*this.config.maxUploadFileSize;
+        let title = '';
+        if (uploadFileName)
+            title = uploadFileName;
+        let text = `<title>${title}</title>`;
+        for (const image of images) {
+            text += `<fb2-image type="image/jpeg" name="${image.name}">${image.data}</fb2-image>`;
+
+            if (text.length > limitSize) {
+                throw new Error(`Файл для конвертирования слишком большой|FORLOG| text.length: ${text.length} > ${limitSize}`);
+            }
+        }
+        return await super.run(Buffer.from(text), {skipCheck: true, isText: true, cutTitle: true});
+    }
+}
+
+module.exports = ConvertDjvu;

server/core/Reader/BookConverter/ConvertFb2.js

@@ -1,5 +1,6 @@
 const ConvertBase = require('./ConvertBase');
 const iconv = require('iconv-lite');
+const textUtils = require('./textUtils');
 
 class ConvertFb2 extends ConvertBase {
     check(data, opts) {
@@ -9,26 +10,46 @@ class ConvertFb2 extends ConvertBase {
     }
 
     async run(data, opts) {
-        if (!this.check(data, opts))
+        let newData = data;
+
+        //Корректируем кодировку, 16-битные кодировки должны стать utf-8
+        const encoding = textUtils.getEncoding(newData);
+        if (encoding.indexOf('UTF-16') == 0) {
+            newData = Buffer.from(iconv.decode(newData, encoding));
+        }
+
+        if (!this.check(newData, opts))
             return false;
 
-        return this.checkEncoding(data);
+        return this.checkEncoding(newData);
     }
 
     checkEncoding(data) {
         let result = data;
 
-        const left = data.indexOf('<?xml version="1.0"');
+        let q = '"';
+        let left = data.indexOf('<?xml version="1.0"');
+        if (left < 0) {
+            left = data.indexOf('<?xml version=\'1.0\'');
+            q = '\'';
+        }
+
         if (left >= 0) {
             const right = data.indexOf('?>', left);
             if (right >= 0) {
                 const head = data.slice(left, right + 2).toString();
-                const m = head.match(/encoding="(.*?)"/);
+                const m = head.match(/encoding=['"](.*?)['"]/);
                 if (m) {
                     let encoding = m[1].toLowerCase();
                     if (encoding != 'utf-8') {
-                        result = iconv.decode(data, encoding);
-                        result = Buffer.from(result.toString().replace(m[0], 'encoding="utf-8"'));
+                        //encoding может не соответсвовать реальной кодировке файла, поэтому:
+                        let calcEncoding = textUtils.getEncoding(data);
+                        if (calcEncoding.indexOf('ISO-8859') >= 0) {
+                            calcEncoding = encoding;
+                        }
+
+                        result = iconv.decode(data, calcEncoding);
+                        result = Buffer.from(result.toString().replace(m[0], `encoding=${q}utf-8${q}`));
                     }
                 }
             }

server/core/Reader/BookConverter/ConvertHtml.js

@@ -200,7 +200,7 @@ class ConvertHtml extends ConvertBase {
 
         titleInfo['book-title'] = title;
         //подозрение на чистый текст, надо разбить на параграфы
-        if (isText || pars.length < buf.length/2000) {
+        if (isText || (buf.length > 30*1024 && pars.length < buf.length/2000)) {
             let total = 0;
             let count = 1;
             for (let i = 0; i < spaceCounter.length; i++) {
@@ -218,7 +218,7 @@ class ConvertHtml extends ConvertBase {
 
             let i = 0;
             //если разброс не слишком большой, выделяем параграфы
-            if (d < 10 && spaceCounter.length) {
+            if (d < 20 && spaceCounter.length) {
                 total /= 20;
                 i = spaceCounter.length - 1;
                 while (i > 0 && (!spaceCounter[i] || spaceCounter[i] < total)) i--;

server/core/Reader/BookConverter/ConvertPdf.js

@@ -16,15 +16,17 @@ class ConvertPdf extends ConvertHtml {
     async run(notUsed, opts) {
         if (!this.check(notUsed, opts))
             return false;
+
         await this.checkExternalConverterPresent();
 
-        const {inputFiles, callback, abort} = opts;
+        const {inputFiles, callback, abort, uploadFileName} = opts;
 
+        const inpFile = inputFiles.sourceFile;
         const outFile = `${inputFiles.filesDir}/${utils.randomHexString(10)}.xml`;
 
         //конвертируем в xml
         let perc = 0;
-        await this.execConverter(this.pdfToHtmlPath, ['-c', '-s', '-xml', inputFiles.sourceFile, outFile], () => {
+        await this.execConverter(this.pdfToHtmlPath, ['-nodrm', '-c', '-s', '-xml', inpFile, outFile], () => {
             perc = (perc < 80 ? perc + 10 : 40);
             callback(perc);
         }, abort);
@@ -186,10 +188,17 @@ class ConvertPdf extends ConvertHtml {
         indents[0] = 0;
 
         //формируем текст
+        const limitSize = 2*this.config.maxUploadFileSize;
+        if (!title && uploadFileName)
+            title = uploadFileName;
         let text = `<title>${title}</title>`;
         let concat = '';
         let sp = '';
         for (const line of lines) {
+            if (text.length > limitSize) {
+                throw new Error(`Файл для конвертирования слишком большой|FORLOG| text.length: ${text.length} > ${limitSize}`);
+            }
+            
             if (line.isImage) {
                 text += `<fb2-image type="${line.type}" name="${line.name}">${line.data}</fb2-image>`;
                 continue;

server/core/Reader/BookConverter/index.js

@@ -4,6 +4,7 @@ const FileDetector = require('../../FileDetector');
 //порядок важен
 const convertClassFactory = [
     require('./ConvertEpub'),
+    require('./ConvertDjvu'),
     require('./ConvertPdf'),
     require('./ConvertRtf'),
     require('./ConvertDocX'),

server/core/Reader/ReaderWorker.js

@@ -12,7 +12,7 @@ const utils = require('../utils');
 const log = new (require('../AppLogger'))().log;//singleton
 
 const cleanDirPeriod = 60*60*1000;//1 раз в час
-const queue = new LimitedQueue(5, 100, 5*60*1000);//5 минут ожидание подвижек
+const queue = new LimitedQueue(5, 100, 2*60*1000 + 15000);//2 минуты ожидание подвижек
 
 let instance = null;
 
@@ -30,7 +30,7 @@ class ReaderWorker {
 
             this.workerState = new WorkerState();
             this.down = new FileDownloader(config.maxUploadFileSize);
-            this.decomp = new FileDecompressor(2*config.maxUploadFileSize);
+            this.decomp = new FileDecompressor(3*config.maxUploadFileSize);
             this.bookConverter = new BookConverter(this.config);
 
             this.remoteWebDavStorage = false;
@@ -54,6 +54,7 @@ class ReaderWorker {
         let decompDir = '';
         let downloadedFilename = '';
         let isUploaded = false;
+        let isRestored = false;
         let convertFilename = '';
 
         const overLoadMes = 'Слишком большая очередь загрузки. Пожалуйста, попробуйте позже.';
@@ -80,7 +81,7 @@ class ReaderWorker {
             const decompDirname = utils.randomHexString(30);
 
             //download or use uploaded
-            if (url.indexOf('file://') != 0) {//download
+            if (url.indexOf('disk://') != 0) {//download
                 const downdata = await this.down.load(url, (progress) => {
                     wState.set({progress});
                 }, q.abort);
@@ -88,9 +89,17 @@ class ReaderWorker {
                 downloadedFilename = `${this.config.tempDownloadDir}/${tempFilename}`;
                 await fs.writeFile(downloadedFilename, downdata);
             } else {//uploaded file
-                downloadedFilename = `${this.config.uploadDir}/${url.substr(7)}`;
-                if (!await fs.pathExists(downloadedFilename)) 
-                    throw new Error('Файл не найден на сервере (возможно был удален как устаревший). Пожалуйста, загрузите файл с диска на сервер заново.');
+                const fileHash = url.substr(7);
+                downloadedFilename = `${this.config.uploadDir}/${fileHash}`;
+                if (!await fs.pathExists(downloadedFilename)) {
+                    //если удалено из upload, попробуем восстановить из удаленного хранилища
+                    try {
+                        downloadedFilename = await this.restoreRemoteFile(fileHash);
+                        isRestored = true;
+                    } catch(e) {
+                        throw new Error('Файл не найден на сервере (возможно был удален как устаревший). Пожалуйста, загрузите файл с диска на сервер заново.');
+                    }
+                }
                 await utils.touchFile(downloadedFilename);
                 isUploaded = true;
             }
@@ -121,6 +130,8 @@ class ReaderWorker {
             convertFilename = `${this.config.tempDownloadDir}/${tempFilename2}`;
             await this.bookConverter.convertToFb2(decompFiles, convertFilename, opts, progress => {
                 wState.set({progress});
+                if (queue.freed > 0)
+                    q.resetTimeout();
             }, q.abort);
 
             //сжимаем файл в tmp, если там уже нет с тем же именем-sha256
@@ -146,11 +157,31 @@ class ReaderWorker {
                 })();
             }
 
+            //лениво сохраним downloadedFilename в tmp и в удаленном хранилище в случае isUploaded
+            if (this.remoteWebDavStorage && isUploaded && !isRestored) {
+                (async() => {
+                    await utils.sleep(30*1000);
+                    try {
+                        //сжимаем файл в tmp, если там уже нет с тем же именем-sha256
+                        const compDownloadedFilename = await this.decomp.gzipFileIfNotExists(downloadedFilename, this.config.tempPublicDir, true);
+                        await this.remoteWebDavStorage.putFile(compDownloadedFilename);
+                    } catch (e) {
+                        log(LM_ERR, e.stack);
+                    }
+                })();
+            }
+
         } catch (e) {
             log(LM_ERR, e.stack);
-            if (e.message == 'abort')
-                e.message = overLoadMes;
-            wState.set({state: 'error', error: e.message});
+            let mes = e.message.split('|FORLOG|');
+            if (mes[1])
+                log(LM_ERR, mes[0] + mes[1]);
+            log(LM_ERR, `downloadedFilename: ${downloadedFilename}`);
+
+            mes = mes[0];
+            if (mes == 'abort')
+                mes = overLoadMes;
+            wState.set({state: 'error', error: mes});
         } finally {
             //clean
             if (q)
@@ -185,7 +216,25 @@ class ReaderWorker {
             await fs.remove(file.path);
         }
 
-        return `file://${hash}`;
+        return `disk://${hash}`;
+    }
+
+    async restoreRemoteFile(filename) {
+        const basename = path.basename(filename);
+        const targetName = `${this.config.tempPublicDir}/${basename}`;
+
+        if (!await fs.pathExists(targetName)) {
+            let found = false;
+            if (this.remoteWebDavStorage) {
+                found = await this.remoteWebDavStorage.getFileSuccess(targetName);
+            }
+
+            if (!found) {
+                throw new Error('404 Файл не найден');
+            }
+        }
+
+        return targetName;
     }
 
     restoreCachedFile(filename) {
@@ -197,21 +246,10 @@ class ReaderWorker {
             try {
                 wState.set({state: 'download', step: 1, totalSteps: 1, path: filename, progress: 0});
 
-                const basename = path.basename(filename);
-                const targetName = `${this.config.tempPublicDir}/${basename}`;
-
-                if (!await fs.pathExists(targetName)) {
-                    let found = false;
-                    if (this.remoteWebDavStorage) {
-                        found = await this.remoteWebDavStorage.getFileSuccess(targetName);
-                    } 
-
-                    if (!found) {
-                        throw new Error('404 Файл не найден');
-                    }
-                }
-
+                const targetName = await this.restoreRemoteFile(filename);
                 const stat = await fs.stat(targetName);
+
+                const basename = path.basename(filename);
                 wState.finish({path: `/tmp/${basename}`, size: stat.size, progress: 100});
             } catch (e) {
                 if (e.message.indexOf('404') < 0)
@@ -236,30 +274,38 @@ class ReaderWorker {
                     files.push({name, stat});
                 }
             }
-            log(`clean dir ${dir}, maxSize=${maxSize}, found ${files.length} files`);
+            log(`clean dir ${dir}, maxSize=${maxSize}, found ${files.length} files, total size=${size}`);
 
             files.sort((a, b) => a.stat.mtimeMs - b.stat.mtimeMs);
 
             let i = 0;
+            let j = 0;
             while (i < files.length && size > maxSize) {
                 const file = files[i];
                 const oldFile = `${dir}/${file.name}`;
 
+                let remoteSuccess = true;
                 //отправляем только this.config.tempPublicDir
-                //TODO: убрать в будущем, т.к. уже делается ленивое сохранение compFilename в удаленном хранилище
                 if (this.remoteWebDavStorage && dir === this.config.tempPublicDir) {
+                    remoteSuccess = false;
                     try {
                         //log(`remoteWebDavStorage.putFile ${path.basename(oldFile)}`);
                         await this.remoteWebDavStorage.putFile(oldFile);
+                        remoteSuccess = true;
                     } catch (e) {
                         log(LM_ERR, e.stack);
                     }
                 }
-                await fs.remove(oldFile);
+                //реально удаляем только если сохранили в хранилище
+                if (remoteSuccess || size > maxSize*1.2) {
+                    await fs.remove(oldFile);
+                    j++;
+                }
+                
                 size -= file.stat.size;
                 i++;
             }
-            log(`removed ${i} files`);
+            log(`removed ${j} files`);
         } catch(e) {
             log(LM_ERR, e.stack);
         } finally {

server/core/Zip/ZipStreamer.js

@@ -76,13 +76,13 @@ class ZipStreamer {
                 if (limitFileCount || limitFileSize || decodeEntryNameCallback) {
                     const entries = Object.values(unzip.entries());
                     if (limitFileCount && entries.length > limitFileCount) {
-                        reject('Слишком много файлов');
+                        reject(new Error('Слишком много файлов'));
                         return;
                     }
 
                     for (const entry of entries) {
                         if (limitFileSize && !entry.isDirectory && entry.size > limitFileSize) {
-                            reject('Файл слишком большой');
+                            reject(new Error('Файл слишком большой'));
                             return;
                         }
 

server/core/Zip/node_stream_zip.js

@@ -766,7 +766,7 @@ ZipEntry.prototype.readDataHeader = function(data) {
 };
 
 ZipEntry.prototype.read = function(data, offset) {
-    this.nameRaw = data.slice(offset, offset += this.fnameLen);
+    this.nameRaw = Buffer.from(data.slice(offset, offset += this.fnameLen));
     this.name = this.nameRaw.toString();
     var lastChar = data[offset - 1];
     this.isDirectory = (lastChar == 47) || (lastChar == 92);

server/core/sax.js

@@ -93,6 +93,12 @@ function parseSync(xstr, options) {
             }
             tag = tag.toLowerCase();
 
+            if (innerCut.has(tag) && (!cutCounter || cutTag === tag)) {
+                if (!cutCounter)
+                    cutTag = tag;
+                cutCounter++;
+            }
+
             let endTag = (singleTag ? tag : '');
             if (tag === '' || tag[0] !== '/') {
                 _onStartNode(tag, tail, singleTag, cutCounter, cutTag);
@@ -103,12 +109,6 @@ function parseSync(xstr, options) {
             if (endTag)
                 _onEndNode(endTag, tail, singleTag, cutCounter, cutTag);
 
-            if (innerCut.has(tag) && (!cutCounter || cutTag === tag)) {
-                if (!cutCounter)
-                    cutTag = tag;
-                cutCounter++;
-            }
-
             if (cutTag === endTag) {
                 cutCounter = (cutCounter > 0 ? cutCounter - 1 : 0);
                 if (!cutCounter)
@@ -125,9 +125,9 @@ function parseSync(xstr, options) {
 
     if (i < len) {
         if (inCdata) {
-            _onCdata(xstr.substr(leftData, len - leftData), cutCounter, cutTag);
+            _onCdata(xstr.substr(leftData + 1, len - leftData - 1), cutCounter, cutTag);
         } else if (inComment) {
-            _onComment(xstr.substr(leftData, len - leftData), cutCounter, cutTag);
+            _onComment(xstr.substr(leftData + 1, len - leftData - 1), cutCounter, cutTag);
         } else {
             _onTextNode(xstr.substr(i, len - i), cutCounter, cutTag);
         }
@@ -233,6 +233,12 @@ async function parse(xstr, options) {
             }
             tag = tag.toLowerCase();
 
+            if (innerCut.has(tag) && (!cutCounter || cutTag === tag)) {
+                if (!cutCounter)
+                    cutTag = tag;
+                cutCounter++;
+            }
+
             let endTag = (singleTag ? tag : '');
             if (tag === '' || tag[0] !== '/') {
                 await _onStartNode(tag, tail, singleTag, cutCounter, cutTag);
@@ -243,12 +249,6 @@ async function parse(xstr, options) {
             if (endTag)
                 await _onEndNode(endTag, tail, singleTag, cutCounter, cutTag);
 
-            if (innerCut.has(tag) && (!cutCounter || cutTag === tag)) {
-                if (!cutCounter)
-                    cutTag = tag;
-                cutCounter++;
-            }
-
             if (cutTag === endTag) {
                 cutCounter = (cutCounter > 0 ? cutCounter - 1 : 0);
                 if (!cutCounter)
@@ -265,9 +265,9 @@ async function parse(xstr, options) {
 
     if (i < len) {
         if (inCdata) {
-            await _onCdata(xstr.substr(leftData, len - leftData), cutCounter, cutTag);
+            await _onCdata(xstr.substr(leftData + 1, len - leftData - 1), cutCounter, cutTag);
         } else if (inComment) {
-            await _onComment(xstr.substr(leftData, len - leftData), cutCounter, cutTag);
+            await _onComment(xstr.substr(leftData + 1, len - leftData - 1), cutCounter, cutTag);
         } else {
             await _onTextNode(xstr.substr(i, len - i), cutCounter, cutTag);
         }

server/core/utils.js

@@ -1,7 +1,9 @@
 const { spawn } = require('child_process');
 const fs = require('fs-extra');
+const path = require('path');
 const crypto = require('crypto');
 const baseX = require('base-x');
+const pidusage = require('pidusage');
 
 const BASE36 = '0123456789abcdefghijklmnopqrstuvwxyz';
 const bs36 = baseX(BASE36);
@@ -14,6 +16,14 @@ function fromBase36(data) {
     return bs36.decode(data);
 }
 
+function bufferRemoveZeroes(buf) {
+    const i = buf.indexOf(0);
+    if (i >= 0) {
+        return buf.slice(0, i);
+    }
+    return buf;
+}
+
 function getFileHash(filename, hashName, enc) {
     return new Promise((resolve, reject) => {
         const hash = crypto.createHash(hashName);
@@ -37,10 +47,11 @@ async function touchFile(filename) {
 }
 
 function spawnProcess(cmd, opts) {
-    let {args, killAfter, onData, abort} = opts;
+    let {args, killAfter, onData, onUsage, onUsageInterval, abort} = opts;
     killAfter = (killAfter ? killAfter : 120);//seconds
     onData = (onData ? onData : () => {});
     args = (args ? args : []);
+    onUsageInterval = (onUsageInterval ? onUsageInterval : 30);//seconds
 
     return new Promise((resolve, reject) => { (async() => {
         let resolved = false;
@@ -67,9 +78,19 @@ function spawnProcess(cmd, opts) {
             reject({status: 'error', error, stdout, stderr});
         });
 
+        //ждем процесс, контролируем его работу раз в секунду
+        let onUsageCounter = onUsageInterval;
         while (!resolved) {
             await sleep(1000);
-            killAfter -= 1;
+
+            onUsageCounter--;
+            if (onUsage && onUsageCounter <= 0) {
+                const stats = await pidusage(proc.pid);
+                onUsage(stats);
+                onUsageCounter = onUsageInterval;
+            }
+
+            killAfter--;
             if (killAfter <= 0 || (abort && abort())) {
                 process.kill(proc.pid);
                 if (killAfter <= 0) {
@@ -83,12 +104,30 @@ function spawnProcess(cmd, opts) {
     })().catch(reject); });
 }
 
+async function findFiles(callback, dir) {
+    if (!(callback && dir))
+        return;
+    let result = true;
+    const files = await fs.readdir(dir, { withFileTypes: true });
+
+    for (const file of files) {
+        const found = path.resolve(dir, file.name);
+        if (file.isDirectory())
+            result = await findFiles(callback, found);
+        else
+            await callback(found);
+    }
+    return result;
+}
+
 module.exports = {
     toBase36,
     fromBase36,
+    bufferRemoveZeroes,
     getFileHash,
     sleep,
     randomHexString,
     touchFile,
-    spawnProcess
+    spawnProcess,
+    findFiles
 };

server/index.js

@@ -72,7 +72,7 @@ async function main() {
                 maxAge: '30d',
                 setHeaders: (res, filePath) => {
                     if (path.basename(path.dirname(filePath)) == 'tmp') {
-                        res.set('Content-Type', 'text/xml');
+                        res.set('Content-Type', 'application/xml');
                         res.set('Content-Encoding', 'gzip');
                     }
                 }