Merge branch 'release/0.11.8'

0.11.7-6

client/api/reader.js

@@ -1,5 +1,6 @@
 import axios from 'axios';
 import * as utils from '../share/utils';
+import * as cryptoUtils from '../share/cryptoUtils';
 import wsc from './webSocketConnection';
 
 const api = axios.create({
@@ -174,11 +175,10 @@ class Reader {
         return await axios.get(url, options);
     }
 
-    async uploadFile(file, maxUploadFileSize, callback) {
-        if (!maxUploadFileSize)
-            maxUploadFileSize = 10*1024*1024;
+    async uploadFile(file, maxUploadFileSize = 10*1024*1024, callback) {
         if (file.size > maxUploadFileSize)
             throw new Error(`Размер файла превышает ${maxUploadFileSize} байт`);
+
         let formData = new FormData();
         formData.append('file', file, file.name);
 
@@ -225,6 +225,33 @@ class Reader {
 
         return response;
     }
+
+    async uploadFileBuf(buf, urlCallback) {
+        const key = utils.toHex(cryptoUtils.sha256(buf));
+        const url = `disk://${key}`;
+
+        if (urlCallback)
+            urlCallback(url);
+
+        let response;
+        try {
+            await axios.head(`/upload/${key}`, {headers: {'Cache-Control': 'no-cache'}});
+            response = await wsc.message(await wsc.send({action: 'upload-file-touch', url}));
+        } catch (e) {
+            response = await wsc.message(await wsc.send({action: 'upload-file-buf', buf}));
+        }
+
+        if (response.error)
+            throw new Error(response.error);
+
+        return response;
+    }
+
+    async getUploadedFileBuf(url) {
+        url = url.replace('disk://', '/upload/');
+        return (await axios.get(url)).data;
+    }
+
 }
 
 export default new Reader();

client/components/Reader/Reader.vue

@@ -194,6 +194,7 @@ import ReaderDialogs from './ReaderDialogs/ReaderDialogs.vue';
 
 import bookManager from './share/bookManager';
 import wallpaperStorage from './share/wallpaperStorage';
+import coversStorage from './share/coversStorage';
 import dynamicCss from '../../share/dynamicCss';
 
 import rstore from '../../store/modules/reader';
@@ -366,6 +367,8 @@ class Reader {
     mounted() {
         (async() => {
             await wallpaperStorage.init();
+            await coversStorage.init();
+            
             await bookManager.init(this.settings);
             bookManager.addEventListener(this.bookManagerEvent);
 
@@ -450,22 +453,47 @@ class Reader {
 
     //wallpaper css
     async loadWallpapers() {
-        const wallpaperDataLength = await wallpaperStorage.getLength();
-        if (wallpaperDataLength !== this.wallpaperDataLength) {//оптимизация
-            this.wallpaperDataLength = wallpaperDataLength;
+        if (!_.isEqual(this.userWallpapers, this.prevUserWallpapers)) {//оптимизация
+            this.prevUserWallpapers = _.cloneDeep(this.userWallpapers);
 
             let newCss = '';
+            let updated = false;
+            const wallpaperExists = new Set();
             for (const wp of this.userWallpapers) {
-                const data = await wallpaperStorage.getData(wp.cssClass);
+                wallpaperExists.add(wp.cssClass);
 
+                let data = await wallpaperStorage.getData(wp.cssClass);
                 if (!data) {
                     //здесь будем восстанавливать данные с сервера
+                    const url = `disk://${wp.cssClass.replace('user-paper', '')}`;
+                    try {
+                        data = await readerApi.getUploadedFileBuf(url);
+                        await wallpaperStorage.setData(wp.cssClass, data);
+                        updated = true;
+                    } catch (e) {
+                        console.error(e);
+                    }
                 }
 
                 if (data) {
                     newCss += `.${wp.cssClass} {background: url(${data}) center; background-size: 100% 100%;}`;                
                 }
             }
+
+            //почистим wallpaperStorage
+            for (const key of await wallpaperStorage.getKeys()) {
+                if (!wallpaperExists.has(key)) {
+                    await wallpaperStorage.removeData(key);
+                }
+            }
+
+            //обновим settings, если загружали обои из /upload/
+            if (updated) {
+                const newSettings = _.cloneDeep(this.settings);
+                newSettings.needUpdateSettingsView = (newSettings.needUpdateSettingsView < 10 ? newSettings.needUpdateSettingsView + 1 : 0);
+                this.commit('reader/setSettings', newSettings);
+            }
+
             dynamicCss.replace('wallpapers', newCss);
         }
     }
@@ -998,7 +1026,6 @@ class Reader {
                     classResult = classDisabled;
                     break;
                 case 'refresh':
-                case 'recentBooks':
                     if (!this.mostRecentBookReactive)
                         classResult = classDisabled;
                     break;
@@ -1108,6 +1135,7 @@ class Reader {
             wasOpened = (wasOpened ? _.cloneDeep(wasOpened) : {});
 
             wasOpened = Object.assign(wasOpened, {
+                url: (opts.url !== undefined ? opts.url : wasOpened.url),
                 path: (opts.path !== undefined ? opts.path : wasOpened.path),
                 bookPos: (opts.bookPos !== undefined ? opts.bookPos : wasOpened.bookPos),
                 bookPosSeen: (opts.bookPos !== undefined ? opts.bookPos : wasOpened.bookPosSeen),

client/components/Reader/RecentBooksPage/RecentBooksPage.vue

@@ -7,6 +7,20 @@
             </span>
         </template>
 
+        <template #buttons>
+            <div
+                class="row justify-center items-center"
+                :class="{'header-button': !archive, 'header-button-pressed': archive}" 
+                @mousedown.stop @click="archiveToggle"
+            >
+                <q-icon class="q-mr-xs" name="la la-archive" size="20px" />
+                <span style="font-size: 90%">Архив</span>
+                <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                    {{ (archive ? 'Скрыть архивные' : 'Показать архивные') }}
+                </q-tooltip>
+            </div>
+        </template>
+
         <a ref="download" style="display: none;" target="_blank"></a>
 
         <div id="vs-container" ref="vsContainer" class="recent-books-scroll col">
@@ -39,10 +53,25 @@
                     </q-tooltip>
                 </q-btn>
 
+                <q-input 
+                    ref="input"
+                    v-model="search"
+                    class="q-ml-sm q-mt-xs"
+                    outlined dense
+                    style="width: 185px"
+                    bg-color="white"
+                    placeholder="Найти"
+                    @click.stop
+                >
+                    <template #append>
+                        <q-icon v-if="search !== ''" name="la la-times" class="cursor-pointer" @click.stop="resetSearch" />
+                    </template>
+                </q-input>
+
                 <q-select
                     ref="sortMethod"
                     v-model="sortMethod"
-                    class="q-ml-md q-mt-xs"
+                    class="q-ml-sm q-mt-xs"
                     :options="sortMethodOptions"
                     style="width: 180px"
                     bg-color="white"
@@ -60,21 +89,6 @@
                         <div style="height: 28px; padding-top: 2px; overflow: hidden" v-html="scope.opt.label" />
                     </template>
                 </q-select>
-
-                <q-input 
-                    ref="input"
-                    v-model="search"
-                    class="q-ml-sm q-mt-xs"
-                    outlined dense
-                    style="width: 180px"
-                    bg-color="white"
-                    placeholder="Найти"
-                    @click.stop
-                >
-                    <template #append>
-                        <q-icon v-if="search !== ''" name="la la-times" class="cursor-pointer" @click.stop="resetSearch" />
-                    </template>
-                </q-input>
             </div>
 
             <q-virtual-scroll
@@ -86,13 +100,14 @@
                 @virtual-scroll="onScroll"
             >
                 <div class="table-row row" :class="{even: index % 2 > 0, 'active-book': item.active, 'active-parent-book': item.activeParent}">
-                    <div v-show="item.inGroup" class="row-part column justify-center items-center" style="width: 40px; border-right: 1px solid #cccccc">                        
+                    <div v-show="item.inGroup" class="row-part column justify-center items-center" style="width: 40px">
                         <q-icon name="la la-code-branch" size="24px" style="color: green" />
                     </div>
 
                     <div class="row-part column justify-center items-stretch" style="width: 80px">
-                        <div class="col row justify-center items-center clickable" @click="loadBook(item)">
-                            <q-icon name="la la-book" size="40px" style="color: #dddddd" />
+                        <div class="col row justify-center items-center clickable" style="padding: 4px" @click="loadBook(item)">
+                            <div v-show="isLoadedCover(item.coverPageUrl)" style="height: 80px" v-html="getCoverHtml(item.coverPageUrl)" />
+                            <q-icon v-show="!isLoadedCover(item.coverPageUrl)" name="la la-book" size="40px" style="color: #dddddd" />
                         </div>
 
                         <div v-show="!showSameBook && item.group && item.group.length > 0" class="row justify-center" style="font-size: 70%">
@@ -100,58 +115,86 @@
                         </div>
                     </div>
 
-                    <div class="row-part column items-stretch clickable break-word" :style="{ 'width': (350 - 40*(+item.inGroup)) + 'px' }" style="font-size: 75%" @click="loadBook(item)">
-                        <div class="row" style="font-size: 80%">
-                            <div class="row justify-center row-info-top" style="width: 30px">
-                                {{ item.num }}
-                            </div>
-                            <div class="row justify-center row-info-top" style="width: 130px">
-                                Читался: {{ item.touchTime }}
-                            </div>
-                            <div class="row justify-center row-info-top" style="width: 138px">
-                                Загружен: {{ item.loadTime }}
-                            </div>
-                            <div class="row justify-center row-info-top" style="width: 1px">
-                            </div>
-                        </div>
-
-                        <div class="col q-mt-xs" :style="{ 'width': (340 - 40*(+item.inGroup)) + 'px' }">
-                            <div class="text-green-10" style="font-size: 105%">
+                    <div class="row-part column items-stretch clickable break-word" @click="loadBook(item)">
+                        <div 
+                            class="col" style="border: 1px solid #cccccc; border-bottom: 0; padding: 4px; line-height: 140%;"
+                            :style="{ 'width': (380 - 40*(+item.inGroup)) + 'px' }"
+                        >
+                            <div class="text-green-10" style="font-size: 80%">
                                 {{ item.desc.author }}
                             </div>
-                            <div>{{ item.desc.title }}</div>
-                            <!--div>{{ item.path }}</div-->
+                            <div style="font-size: 75%">
+                                {{ item.desc.title }}
+                            </div>
                         </div>
 
-                        <div class="row q-mt-xs" style="font-size: 80%">
-                            <div class="row justify-center row-info-bottom" style="width: 60px">
+                        <div class="row" style="font-size: 10px">
+                            <div class="row justify-center items-center row-info-top" style="width: 60px">
                                 {{ item.desc.textLen }}
                             </div>
-                            <div class="row justify-center row-info-bottom" style="width: 60px">
+
+                            <div class="row items-center row-info-top" :style="`width: ${(260 - 40*(+item.inGroup))}px; padding: 1px`">
+                                <div class="read-bar" :style="`width: ${100*item.readPart}%`"></div>
+                            </div>
+
+                            <div class="row justify-center items-center row-info-top" style="width: 59px">
                                 {{ item.desc.perc }}
                             </div>
-                            <div class="row justify-center row-info-bottom" style="width: 1px">
+                            <div class="row-info-top" style="width: 1px">
                             </div>
                         </div>
 
-                        <div class="read-bar" :style="`width: ${(340 - 40*(+item.inGroup))*item.readPart}px`"></div>
-                    </div>
-
-                    <div class="row-part column justify-center" style="width: 80px; font-size: 75%">
-                        <div>
-                            <a v-show="isUrl(item.url)" :href="item.url" target="_blank">Оригинал</a><br><br>
-                            <a :href="item.path" @click.prevent="downloadBook(item.path, item.fullTitle)">Скачать FB2</a>
+                        <div class="row" style="font-size: 10px" :style="{ 'width': (380 - 40*(+item.inGroup)) + 'px' }">
+                            <div class="row justify-center items-center row-info-bottom" style="width: 30px">
+                                {{ item.num }}
+                            </div>
+                            <div class="col row">
+                                <div class="row justify-center items-center row-info-bottom time-info" style="width: 50%">
+                                    Загружен: {{ item.loadTime }}
+                                </div>
+                                <div class="row justify-center items-center row-info-bottom time-info" style="width: 50%">
+                                    Читался: {{ item.touchTime }}
+                                </div>
+                            </div>
+                            <div class="row-info-bottom" style="width: 1px">
+                            </div>
                         </div>
                     </div>
 
-                    <div class="row-part column justify-center">
-                        <q-btn
-                            dense
-                            style="width: 30px; height: 30px; padding: 7px 0 7px 0; margin-left: 4px"
+                    <div
+                        class="row-part column"
+                        style="width: 90px;"
+                    >
+                        <div
+                            class="col column justify-center" 
+                            style="font-size: 75%; padding-left: 6px; border: 1px solid #cccccc; border-left: 0;"
+                        >
+                            <div :style="`margin-top: ${(archive ? 20 : 0)}px`">
+                                <a v-show="isUrl(item.url)" :href="item.url" target="_blank">Оригинал</a><br><br>
+                                <a :href="item.path" @click.prevent="downloadBook(item.path, item.fullTitle)">Скачать FB2</a>
+                            </div>
+                        </div>
+
+                        <div
+                            class="del-button self-end row justify-center items-center clickable"
                             @click="handleDel(item.key)"
                         >
-                            <q-icon class="la la-times" size="14px" />
-                        </q-btn>
+                            <q-icon class="la la-times" size="12px" />
+                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                                {{ (archive ? 'Удалить окончательно' : 'Перенести в архив') }}
+                            </q-tooltip>
+                        </div>
+
+                        <div
+                            v-show="archive"
+                            class="restore-button self-start row justify-center items-center clickable"
+                            @click="handleRestore(item.key)"
+                        >
+                            <q-icon class="la la-arrow-left" size="14px" />
+                            <q-tooltip :delay="1500" anchor="bottom middle" content-style="font-size: 80%">
+                                Восстановить из архива
+                            </q-tooltip>
+                        </div>
                     </div>
                 </div>
             </q-virtual-scroll>
@@ -171,6 +214,7 @@ import LockQueue from '../../../share/LockQueue';
 import Window from '../../share/Window.vue';
 import bookManager from '../share/bookManager';
 import readerApi from '../../../api/reader';
+import coversStorage from '../share/coversStorage';
 
 const componentOptions = {
     components: {
@@ -196,6 +240,9 @@ class RecentBooksPage {
     tableData = [];
     sortMethod = '';
     showSameBook = false;
+    archive = false;
+
+    covers = {};
 
     created() {
         this.commit = this.$store.commit;
@@ -221,6 +268,7 @@ class RecentBooksPage {
             this.showBar();
             await this.updateTableData();
             await this.scrollToActiveBook();
+            //await this.scrollRefresh();
         })();
     }
 
@@ -247,7 +295,7 @@ class RecentBooksPage {
 
             //подготовка полей
             for (const book of sorted) {
-                if (book.deleted)
+                if ((!this.archive && book.deleted) || (this.archive && book.deleted != 1))
                     continue;
 
                 let d = new Date();
@@ -274,6 +322,11 @@ class RecentBooksPage {
                 const author = (bt.author ? bt.author : (bt.bookTitle ? bt.bookTitle : (book.uploadFileName ? book.uploadFileName : book.url)));
 
                 result.push({
+                    key: book.key,
+                    url: book.url,
+                    path: book.path,
+                    deleted: book.deleted,
+
                     touchTime,
                     loadTime,
                     desc: {
@@ -283,14 +336,12 @@ class RecentBooksPage {
                         textLen,
                     },
                     readPart,
-                    url: book.url,
-                    path: book.path,
                     fullTitle: bt.fullTitle,
-                    key: book.key,
                     sameBookKey: book.sameBookKey,
                     active: (activeBook.key == book.key),
                     activeParent: false,
                     inGroup: false,
+                    coverPageUrl: book.coverPageUrl,
 
                     //для сортировки
                     loadTimeRaw,
@@ -299,12 +350,11 @@ class RecentBooksPage {
             }
 
             //нумерация
-            let num = 0;
-
             result.sort((a, b) => b.loadTimeRaw - a.loadTimeRaw);
-            for (const book of result) {
+            let num = 0;
+            for (let i = result.length - 1; i >= 0; i--) {
                 num++;
-                book.num = num;
+                result[i].num = num;
             }
 
             //фильтрация
@@ -404,7 +454,8 @@ class RecentBooksPage {
     wordEnding(num, type = 0) {
         const endings = [
             ['ов', '', 'а', 'а', 'а', 'ов', 'ов', 'ов', 'ов', 'ов'],
-            ['й', 'я', 'и', 'и', 'и', 'й', 'й', 'й', 'й', 'й']
+            ['й', 'я', 'и', 'и', 'и', 'й', 'й', 'й', 'й', 'й'],
+            ['о', '', 'о', 'о', 'о', 'о', 'о', 'о', 'о', 'о']
         ];
         const deci = num % 100;
         if (deci > 10 && deci < 20) {
@@ -416,7 +467,7 @@ class RecentBooksPage {
 
     get header() {
         const len = (this.tableData ? this.tableData.length : 0);
-        return `${(this.search ? 'Найдено' : 'Всего')} ${len} файл${this.wordEnding(len)}`;
+        return `${(this.search ? `Найден${this.wordEnding(len, 2)}` : 'Всего')} ${len} файл${this.wordEnding(len)}${this.archive ? ' в архиве' : ''}`;
     }
 
     async downloadBook(fb2path, fullTitle) {
@@ -442,15 +493,30 @@ class RecentBooksPage {
     }
 
     async handleDel(key) {
-        await bookManager.delRecentBook({key});
-        //this.updateTableData();//обновление уже происходит Reader.bookManagerEvent
-
-        if (!bookManager.mostRecentBook())
-            this.close();
+        if (!this.archive) {
+            await bookManager.delRecentBook({key});
+            this.$root.notify.info('Перенесено в архив');
+        } else {
+            if (await this.$root.stdDialog.confirm('Подтвердите удаление из архива:', ' ')) {
+                await bookManager.delRecentBook({key}, 2);
+                this.$root.notify.info('Удалено безвозвратно');
+            }
+        }
     }
 
-    loadBook(row) {
-        this.$emit('load-book', {url: row.url, path: row.path});
+    async handleRestore(key) {
+        await bookManager.restoreRecentBook({key});
+        this.$root.notify.info('Восстановлено из архива');
+    }
+
+    async loadBook(item) {
+        //чтобы не обновлять лишний раз updateTableData
+        this.inited = false;
+
+        if (item.deleted)
+            await this.handleRestore(item.key);
+
+        this.$emit('load-book', {url: item.url, path: item.path});
         this.close();
     }
 
@@ -507,6 +573,8 @@ class RecentBooksPage {
     }
 
     async scrollToActiveBook() {
+        await this.$nextTick();
+
         this.lockScroll = true;
         try {
             let activeIndex = -1;
@@ -552,6 +620,16 @@ class RecentBooksPage {
         }
     }
 
+    async scrollRefresh() {
+        this.lockScroll = true;
+        await utils.sleep(100);
+        try {
+            this.$refs.virtualScroll.refresh();
+        } finally {
+            await utils.sleep(100);
+            this.lockScroll = false;
+        }
+    }
 
     get sortMethodOptions() {
         return [
@@ -566,6 +644,11 @@ class RecentBooksPage {
         ];
     }
 
+    archiveToggle() {
+        this.archive = !this.archive;
+        this.updateTableData();
+    }
+
     close() {
         this.$emit('recent-books-close');
     }
@@ -576,6 +659,43 @@ class RecentBooksPage {
         }
         return true;
     }
+
+    makeCoverHtml(data) {
+        return `<img src="${data}" style="height: 100%; width: 100%; object-fit: contain" />`;
+    }
+
+    isLoadedCover(coverPageUrl) {
+        if (!coverPageUrl)
+            return false;
+
+        let loadedCover = this.covers[coverPageUrl];
+        if (!loadedCover) {
+            (async() => {
+                //сначала заглянем в storage
+                let data = await coversStorage.getData(coverPageUrl);
+                if (data) {
+                   this.covers[coverPageUrl] = this.makeCoverHtml(data);
+                } else {//иначе идем на сервер
+                    try {
+                        data = await readerApi.getUploadedFileBuf(coverPageUrl);
+                        await coversStorage.setData(coverPageUrl, data);
+                        this.covers[coverPageUrl] = this.makeCoverHtml(data);
+                    } catch (e) {
+                        console.error(e);
+                    }
+                }
+            })();
+        }
+
+        return (loadedCover != undefined);
+    }
+
+    getCoverHtml(coverPageUrl) {
+        if (coverPageUrl && this.covers[coverPageUrl])
+            return this.covers[coverPageUrl];
+        else
+            return '';
+    }
 }
 
 export default vueComponent(RecentBooksPage);
@@ -600,11 +720,10 @@ export default vueComponent(RecentBooksPage);
 
 .table-row {
     min-height: 80px;
-    border-bottom: 1px solid #cccccc;
 }
 
 .row-part {
-    padding: 4px 4px 4px 4px;
+    padding: 4px 0px 4px 0px;
 }
 
 .clickable {
@@ -612,18 +731,11 @@ export default vueComponent(RecentBooksPage);
 }
 
 .break-word {
-    line-height: 180%;
     overflow-wrap: break-word;
     word-wrap: break-word;
     white-space: normal;
 }
 
-.read-bar {
-    height: 3px;
-    background-color: #aaaaaa;
-    margin-bottom: 2px;
-}
-
 .even {
     background-color: #f2f2f2;
 }
@@ -644,18 +756,6 @@ export default vueComponent(RecentBooksPage);
     transform: rotate(90deg);
 }
 
-.row-info-top {
-    line-height: 110%;
-    border-left: 1px solid #cccccc;
-    border-bottom: 1px solid #cccccc;
-}
-
-.row-info-bottom {
-    line-height: 110%;
-    border: 1px solid #cccccc;
-    border-right: 0;
-}
-
 .tool-button {
     min-width: 30px;
     width: 30px;
@@ -664,4 +764,78 @@ export default vueComponent(RecentBooksPage);
     margin: 10px 6px 0px 3px;
     background-color: white;
 }
+
+.row-info-bottom {
+    line-height: 110%;
+    border-left: 1px solid #cccccc;
+    border-bottom: 1px solid #cccccc;
+    height: 14px;
+}
+
+.row-info-top {
+    line-height: 110%;
+    border: 1px solid #cccccc;
+    border-right: 0;
+    height: 14px;
+}
+
+.time-info, .row-info-top {
+    color: #888888;
+}
+
+.read-bar {
+    height: 6px;
+    background-color: #b8b8b8;
+}
+
+.del-button {
+    width: 25px;
+    height: 20px;
+    position: absolute;
+    border-left: 1px solid #cccccc;
+    border-bottom: 1px solid #cccccc;
+    border-radius: 0 0 0 10px;
+    margin: 1px;
+}
+
+.del-button:hover {
+    color: white;
+    background-color: #FF3030;
+}
+
+.restore-button {
+    width: 25px;
+    height: 20px;
+    position: absolute;
+    border-right: 1px solid #cccccc;
+    border-bottom: 1px solid #cccccc;
+    border-radius: 0 0 10px 0;
+    margin: 1px;
+}
+
+.restore-button:hover {
+    color: white;
+    background-color: #00bb00;
+}
+
+.header-button, .header-button-pressed {
+    width: 80px;
+    height: 30px;
+    cursor: pointer;
+    color: #555555;
+}
+
+.header-button:hover {
+    color: white;
+    background-color: #39902F;
+}
+
+.header-button-pressed {
+    color: black;
+    background-color: yellow;
+}
+
+.header-button-pressed:hover {
+    color: black;
+}
 </style>

client/components/Reader/SettingsPage/SettingsPage.vue

@@ -124,6 +124,7 @@ import NumInput from '../../share/NumInput.vue';
 import UserHotKeys from './UserHotKeys/UserHotKeys.vue';
 import wallpaperStorage from '../share/wallpaperStorage';
 
+import readerApi from '../../../api/reader';
 import rstore from '../../../store/modules/reader';
 import defPalette from './defPalette';
 
@@ -636,8 +637,17 @@ class SettingsPage {
 
                     if (index < 0)
                         newUserWallpapers.push({label, cssClass});
-                    if (!wallpaperStorage.keyExists(cssClass))
+                    if (!wallpaperStorage.keyExists(cssClass)) {
                         await wallpaperStorage.setData(cssClass, data);
+                        //отправим data на сервер в файл `/upload/${key}`
+                        try {
+                            //const res = 
+                            await readerApi.uploadFileBuf(data);
+                            //console.log(res);
+                        } catch (e) {
+                            console.error(e);
+                        }
+                    }
 
                     this.userWallpapers = newUserWallpapers;
                     this.wallpaper = cssClass;

client/components/Reader/share/BookParser.js

@@ -3,6 +3,8 @@ import sax from '../../../../server/core/sax';
 import * as utils from '../../../share/utils';
 
 const maxImageLineCount = 100;
+const maxParaLength = 10000;
+const maxParaTextLength = 10000;
 
 // defaults
 const defaultSettings = {
@@ -83,6 +85,7 @@ export default class BookParser {
         let binaryId = '';
         let binaryType = '';
         let dimPromises = [];
+        this.coverPageId = '';
 
         //оглавление
         this.contents = [];
@@ -226,13 +229,26 @@ export default class BookParser {
             paraOffset += len;
         };
 
-        const growParagraph = (text, len) => {
+        const growParagraph = (text, len, textRaw) => {
+            //начальный параграф
             if (paraIndex < 0) {
                 newParagraph();
                 growParagraph(text, len);
                 return;
             }
 
+            //ограничение на размер куска текста в параграфе
+            if (textRaw && textRaw.length > maxParaTextLength) {
+                while (textRaw.length > 0) {
+                    const textPart = textRaw.substring(0, maxParaTextLength);
+                    textRaw = textRaw.substring(maxParaTextLength);
+
+                    newParagraph();
+                    growParagraph(textPart, textPart.length);
+                }
+                return;
+            }
+
             if (inSubtitle) {
                 curSubtitle.title += text;
             } else if (inTitle) {
@@ -240,6 +256,14 @@ export default class BookParser {
             }
 
             const p = para[paraIndex];
+
+            //ограничение на размер параграфа
+            if (p.length > maxParaLength) {
+                newParagraph();
+                growParagraph(text, len);
+                return;
+            }
+
             p.length += len;
             p.text += text;
             paraOffset += len;
@@ -266,7 +290,7 @@ export default class BookParser {
                     const href = attrs.href.value;
                     const alt = (attrs.alt && attrs.alt.value ? attrs.alt.value : '');
                     const {id, local} = this.imageHrefToId(href);
-                    if (href[0] == '#') {//local
+                    if (local) {//local
                         imageNum++;
 
                         if (inPara && !this.sets.showInlineImagesInCenter && !center)
@@ -278,6 +302,11 @@ export default class BookParser {
 
                         if (inPara && this.sets.showInlineImagesInCenter)
                             newParagraph();
+
+                        //coverpage
+                        if (path == '/fictionbook/description/title-info/coverpage/image') {
+                            this.coverPageId = id;
+                        }
                     } else {//external
                         imageNum++;
 
@@ -536,7 +565,7 @@ export default class BookParser {
                 tClose += (center ? '</center>' : '');
 
                 if (text != ' ')
-                    growParagraph(`${tOpen}${text}${tClose}`, text.length);
+                    growParagraph(`${tOpen}${text}${tClose}`, text.length, text);
                 else
                     growParagraph(' ', 1);
             }

client/components/Reader/share/bookManager.js

@@ -2,8 +2,10 @@ import localForage from 'localforage';
 import path from 'path-browserify';
 import _ from 'lodash';
 
-import * as utils from '../../../share/utils';
 import BookParser from './BookParser';
+import readerApi from '../../../api/reader';
+import coversStorage from './coversStorage';
+import * as utils from '../../../share/utils';
 
 const maxDataSize = 500*1024*1024;//compressed bytes
 const maxRecentLength = 5000;
@@ -345,9 +347,36 @@ class BookManager {
         const parsed = new BookParser(this.settings);
 
         const parsedMeta = await parsed.parse(data, callback);
+
+        //cover page
+        let coverPageUrl = '';
+        if (parsed.coverPageId && parsed.binary[parsed.coverPageId]) {
+            const bin = parsed.binary[parsed.coverPageId];
+            let dataUrl = `data:${bin.type};base64,${bin.data}`;
+            try {
+                dataUrl = await utils.resizeImage(dataUrl, 160, 160, 0.94);
+            } catch (e) {
+                console.error(e);
+            }
+
+            //отправим dataUrl на сервер в /upload
+            try {
+                await readerApi.uploadFileBuf(dataUrl, (url) => {
+                    coverPageUrl = url;
+                });
+            } catch (e) {
+                console.error(e);
+            }
+
+            //сохраним в storage
+            if (coverPageUrl)
+                await coversStorage.setData(coverPageUrl, dataUrl);
+        }
+
         const result = Object.assign({}, meta, parsedMeta, {
             length: data.length,
             textLength: parsed.textLength,
+            coverPageUrl,
             parsed
         });
 
@@ -433,9 +462,9 @@ class BookManager {
         return this.recent[value.key];
     }
 
-    async delRecentBook(value) {
+    async delRecentBook(value, delFlag = 1) {
         const item = this.recent[value.key];
-        item.deleted = 1;
+        item.deleted = delFlag;
 
         if (this.recentLastKey == value.key) {
             await this.recentSetLastKey(null);
@@ -445,6 +474,13 @@ class BookManager {
         this.emit('recent-deleted', value.key);
     }
 
+    async restoreRecentBook(value) {
+        const item = this.recent[value.key];
+        item.deleted = 0;
+
+        await this.recentSetItem(item);
+    }
+
     async cleanRecentBooks() {
         const sorted = this.getSortedRecent();
 

client/components/Reader/share/coversStorage.js

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

client/components/Reader/share/wallpaperStorage.js

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

client/components/Reader/versionHistory.js

@@ -1,4 +1,18 @@
 export const versionHistory = [
+{
+    version: '0.11.8',
+    releaseDate: '2022-07-14',
+    showUntil: '2022-07-13',
+    content:
+`
+<ul>
+    <li>добавлено отображение и синхронизация обложек в окне загруженных книг</li>
+    <li>добавлена синхронизация обоев</li>
+</ul>
+
+`
+},
+
 {
     version: '0.11.7',
     releaseDate: '2022-07-12',

client/share/utils.js

@@ -363,4 +363,50 @@ export function getBookTitle(fb2) {
     ]).join(' - ');
 
     return result;
+}
+
+export function resizeImage(dataUrl, toWidth, toHeight, quality = 0.9) {
+    return new Promise ((resolve, reject) => { (async() => {
+        const img = new Image();
+
+        let resolved = false;
+        img.onload = () => {
+            try {
+                let width = img.width;
+                let height = img.height;
+
+                if (width > height) {
+                    if (width > toWidth) {
+                        height = height * (toWidth / width);
+                        width = toWidth;
+                    }
+                } else {
+                    if (height > toHeight) {
+                        width = width * (toHeight / height);
+                        height = toHeight;
+                    }
+                }
+
+                const canvas = document.createElement('canvas');
+                canvas.width = width;
+                canvas.height = height;
+                const ctx = canvas.getContext('2d');
+                ctx.drawImage(img, 0, 0, width, height);
+                const result = canvas.toDataURL('image/jpeg', quality);
+                resolved = true;
+                resolve(result);
+            } catch (e) {
+                reject(e);
+                return;
+            }
+        };
+
+        img.onerror = reject;
+
+        img.src = dataUrl;
+
+        await sleep(1000);
+        if (!resolved)
+            reject('Не удалось изменить размер');
+    })().catch(reject); });
 }

client/store/modules/reader.js

@@ -191,6 +191,8 @@ const settingDefaults = {
 
     recentShowSameBook: false,
     recentSortMethod: '',
+
+    needUpdateSettingsView: 0,
 };
 
 for (const font of fonts)

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "Liberama",
-  "version": "0.11.7",
+  "version": "0.11.8",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "Liberama",
-      "version": "0.11.7",
+      "version": "0.11.8",
       "hasInstallScript": true,
       "license": "CC0-1.0",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Liberama",
-  "version": "0.11.7",
+  "version": "0.11.8",
   "author": "Book Pauk <bookpauk@gmail.com>",
   "license": "CC0-1.0",
   "repository": "bookpauk/liberama",

server/controllers/WebSocketController.js

@@ -25,6 +25,10 @@ class WebSocketController {
             ws.on('message', (message) => {
                 this.onMessage(ws, message.toString());
             });
+
+            ws.on('error', (err) => {
+                log(LM_ERR, err);
+            });
         });
 
         setTimeout(() => { this.periodicClean(); }, cleanPeriod);
@@ -70,6 +74,10 @@ class WebSocketController {
                     await this.readerRestoreCachedFile(req, ws); break;
                 case 'reader-storage':
                     await this.readerStorageDo(req, ws); break;
+                case 'upload-file-buf':
+                    await this.uploadFileBuf(req, ws); break;
+                case 'upload-file-touch':
+                    await this.uploadFileTouch(req, ws); break;
 
                 default:
                     throw new Error(`Action not found: ${req.action}`);
@@ -168,6 +176,20 @@ class WebSocketController {
 
         this.send(await this.readerStorage.doAction(req.body), req, ws);
     }
+
+    async uploadFileBuf(req, ws) {
+        if (!req.buf)
+            throw new Error(`key 'buf' is empty`);
+        
+        this.send({url: await this.readerWorker.saveFileBuf(req.buf)}, req, ws);
+    }
+
+    async uploadFileTouch(req, ws) {
+        if (!req.url)
+            throw new Error(`key 'url' is empty`);
+        
+        this.send({url: await this.readerWorker.uploadFileTouch(req.url)}, req, ws);
+    }
 }
 
 module.exports = WebSocketController;

server/core/Reader/ReaderWorker.js

@@ -219,6 +219,27 @@ class ReaderWorker {
         return `disk://${hash}`;
     }
 
+    async saveFileBuf(buf) {
+        const hash = await utils.getBufHash(buf, 'sha256', 'hex');
+        const outFilename = `${this.config.uploadDir}/${hash}`;
+
+        if (!await fs.pathExists(outFilename)) {
+            await fs.writeFile(outFilename, buf);
+        } else {
+            await utils.touchFile(outFilename);
+        }
+
+        return `disk://${hash}`;
+    }
+
+    async uploadFileTouch(url) {
+        const outFilename = `${this.config.uploadDir}/${url.replace('disk://', '')}`;
+
+        await utils.touchFile(outFilename);
+
+        return url;
+    }
+
     async restoreRemoteFile(filename) {
         const basename = path.basename(filename);
         const targetName = `${this.config.tempPublicDir}/${basename}`;

server/core/WebSocketConnection.js

@@ -94,7 +94,7 @@ class WebSocketConnection {
                     this.ws = new this.WebSocket(this.url);
                 }
 
-                const onopen = (e) => {
+                const onopen = () => {
                     this.connecting = false;
                     resolve(this.ws);
                 };

server/core/utils.js

@@ -34,6 +34,12 @@ function getFileHash(filename, hashName, enc) {
     });
 }
 
+function getBufHash(buf, hashName, enc) {
+    const hash = crypto.createHash(hashName);
+    hash.update(buf);
+    return hash.digest(enc);
+}
+
 function sleep(ms) {
     return new Promise(resolve => setTimeout(resolve, ms));
 }
@@ -129,6 +135,7 @@ module.exports = {
     fromBase36,
     bufferRemoveZeroes,
     getFileHash,
+    getBufHash,
     sleep,
     toUnixTime,
     randomHexString,

server/index.js

@@ -11,6 +11,8 @@ const ayncExit = new (require('./core/AsyncExit'))();
 
 let log = null;
 
+const maxPayloadSize = 50;//in MB
+
 async function init() {
     //config
     const configManager = new (require('./config'))();//singleton
@@ -63,7 +65,7 @@ async function main() {
         if (serverCfg.mode !== 'none') {
             const app = express();
             const server = http.createServer(app);
-            const wss = new WebSocket.Server({ server, maxPayload: 10*1024*1024 });
+            const wss = new WebSocket.Server({ server, maxPayload: maxPayloadSize*1024*1024 });
 
             const serverConfig = Object.assign({}, config, serverCfg);
 
@@ -75,7 +77,7 @@ async function main() {
             }
 
             app.use(compression({ level: 1 }));
-            app.use(express.json({limit: '10mb'}));
+            app.use(express.json({limit: `${maxPayloadSize}mb`}));
             if (devModule)
                 devModule.logQueries(app);