From a191d321051ddf7bb2ae03b3572134253f1b754e Mon Sep 17 00:00:00 2001 From: "Mr. Stallion" Date: Sat, 4 Apr 2020 15:22:42 -0500 Subject: [PATCH] Loading animation --- chat/CharacterSearch.vue | 15 +---- chat/preview/ImagePreview.vue | 88 +++++++++++++++++++++++++++--- chat/preview/assets/browser.pre.js | 3 + chat/preview/helper/external.ts | 16 +++--- chat/preview/test-urls.txt | 25 +-------- electron/main.ts | 14 +++++ 6 files changed, 110 insertions(+), 51 deletions(-) diff --git a/chat/CharacterSearch.vue b/chat/CharacterSearch.vue index cd328ac..8612e90 100644 --- a/chat/CharacterSearch.vue +++ b/chat/CharacterSearch.vue @@ -25,7 +25,7 @@

{{l('characterSearch.results')}} - +

@@ -322,19 +322,6 @@ .search-spinner { float: right; - animation: search-spin 0.75s linear infinite; } } - - - @keyframes search-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - - } - diff --git a/chat/preview/ImagePreview.vue b/chat/preview/ImagePreview.vue index 83b1603..1146342 100644 --- a/chat/preview/ImagePreview.vue +++ b/chat/preview/ImagePreview.vue @@ -26,6 +26,9 @@ :style="localPreviewStyle" >
+ + +
@@ -79,6 +82,11 @@ externalPreviewStyle: Record = {}; localPreviewStyle: Record = {}; + state = 'hidden'; + + shouldShowSpinner = false; + shouldShowError = true; + private interval: Timer | null = null; @@ -150,6 +158,8 @@ // tslint:disable-next-line this.executeJavaScript(js, 'dom-ready', event); + + this.setState('loaded'); } ); @@ -157,8 +167,14 @@ webview.addEventListener( 'did-fail-load', (event: Event) => { + const e = event as DidFailLoadEvent; + if (e.errorCode !== -3) { + this.setState('error'); // -3 is a weird error code, not sure why it occurs + } + + if (e.errorCode < 0) { const url = webview.getURL(); @@ -234,12 +250,14 @@ ); - /* webview.getWebContents().session.on( - 'will-download', - (e: Event) => { - e.preventDefault(); - } - );*/ + // const webContentsId = webview.getWebContentsId(); + // + // remote.webContents.fromId(webContentsId).session.on( + // 'will-download', + // (e: Event) => { + // e.preventDefault(); + // } + // ); _.each( @@ -265,6 +283,9 @@ this.hide(); } + + this.shouldShowSpinner = this.testSpinner(); + this.shouldShowError = this.testError(); }, 50 ); @@ -317,6 +338,8 @@ this.sticky = false; + this.setState('hidden'); + this.reRenderStyles(); } @@ -401,7 +424,9 @@ () => { this.debugLog('ImagePreview: show.timeout', this.url); - this.localPreviewHelper.match(this.domain as string) + const isLocal = this.localPreviewHelper.match(this.domain as string); + + isLocal ? this.localPreviewHelper.show(this.url as string) : this.localPreviewHelper.hide(); @@ -416,8 +441,9 @@ this.initialCursorPosition = screen.getCursorScreenPoint(); - this.reRenderStyles(); + + this.setState(isLocal ? 'loaded' : 'loading'); }, due ) as Timer; @@ -556,9 +582,33 @@ this.initialCursorPosition = null; this.shouldDismiss = false; this.visibleSince = 0; + this.shouldShowSpinner = false; + this.shouldShowError = false; + + this.setState('hidden'); this.reRenderStyles(); } + + + setState(state: string): void { + this.debugLog('ImagePreview set-state', state, (this.visibleSince > 0) ? `${(Date.now() - this.visibleSince) / 1000}s` : ''); + + this.state = state; + this.shouldShowSpinner = this.testSpinner(); + this.shouldShowError = this.testError(); + } + + + testSpinner(): boolean { + return (this.visibleSince > 0) + ? ((this.state === 'loading') && (Date.now() - this.visibleSince > 1000)) + : false; + } + + testError(): boolean { + return ((this.state === 'error') && (this.externalPreviewHelper.isVisible())); + } } @@ -663,5 +713,27 @@ box-shadow: 0 0 1px 0px rgba(255, 255, 255, 0.6); } } + + #preview-spinner { + color: white; + opacity: 0.5; + transition: visibility 0.25s, opacity 0.25s; + font-size: 30pt; + position: absolute; + left: 1rem; + top: 1rem; + transform: translateX(-50%), translateY(-50%); + text-shadow: 0 0 2px #b3b3b3; + } + + #preview-error { + color: red; + transition: all 0.25s; + font-size: 180pt; + position: absolute; + left: 2rem; + top: 0; + opacity: 0.8; + } } diff --git a/chat/preview/assets/browser.pre.js b/chat/preview/assets/browser.pre.js index 2198e3a..390ea31 100644 --- a/chat/preview/assets/browser.pre.js +++ b/chat/preview/assets/browser.pre.js @@ -79,6 +79,9 @@ window.addEventListener('DOMContentLoaded', (event) => { console.log('DOM fully loaded and parsed', Date.now()); clear(); + + // const ipcRenderer = require('electron').ipcRenderer; + // ipcRenderer.sendToHost('state.dom-loaded'); }); } catch(e) { console.error('browser.pre', e); diff --git a/chat/preview/helper/external.ts b/chat/preview/helper/external.ts index 0a046ac..fe85a7a 100644 --- a/chat/preview/helper/external.ts +++ b/chat/preview/helper/external.ts @@ -20,13 +20,15 @@ export class ExternalImagePreviewHelper extends ImagePreviewHelper { if (wasVisible) { const webview = this.parent.getWebview(); - if (this.allowCachedUrl) { - // tslint:disable-next-line:no-floating-promises - webview.executeJavaScript(this.parent.jsMutator.getHideMutator()); - } else { - // tslint:disable-next-line:no-floating-promises - webview.loadURL('about:blank'); - } + // if (this.allowCachedUrl) { + // // tslint:disable-next-line:no-floating-promises + // webview.executeJavaScript(this.parent.jsMutator.getHideMutator()); + // } else { + + // tslint:disable-next-line:no-floating-promises + webview.loadURL('about:blank'); + + //} this.visible = false; } diff --git a/chat/preview/test-urls.txt b/chat/preview/test-urls.txt index 4b827d9..6ad3789 100644 --- a/chat/preview/test-urls.txt +++ b/chat/preview/test-urls.txt @@ -65,29 +65,10 @@ [url=https://www.derpibooru.org/images/2313962]Derpibooru suggestive[/url] + [url=https://cl.phncdn.com/pics/gifs/017/408/111/17408111a.webm]URL attempts to force a download[/url] + + Broken - -https://wwebm.rule34.xxx//images/1727/43fe58fd8d576246510cb94c6d8353b2.webm (not resizing) - -https://giant.gfycat.com/PessimisticGargantuanCaribou.webm (not resizing) - -https://e621.net/posts/1766079 (not loading, has a popup) - -https://www.pornhub.com/gif/12174171 (doesn't play) - -https://www.youtube.com/watch?v=fk6JtDhA7WI (audio on, video doesn't show, audio stays in the background) - - - -Slow https://giphy.com/gifs/arianagrande-ariana-grande-thank-u-next-you-uldtLAK6tSOKP5PWw3 -http://gfycatporn.com/deepthroat.php - -Derpibooru - -https://hypnohub.net/post/show/79257/arms_above_head-bat_wings-black_hair-bondage-botto - - -https://ibb.co/BqJswjf diff --git a/electron/main.ts b/electron/main.ts index 60ad19a..d4f6112 100644 --- a/electron/main.ts +++ b/electron/main.ts @@ -49,6 +49,7 @@ import { ElectronBlocker } from '@cliqz/adblocker-electron'; import fetch from 'node-fetch'; import MenuItemConstructorOptions = Electron.MenuItemConstructorOptions; import * as _ from 'lodash'; +import DownloadItem = Electron.DownloadItem; // Module to control application life. const app = electron.app; @@ -231,6 +232,19 @@ function createWindow(): Electron.BrowserWindow | undefined { } ); + + // This prevents automatic download prompts on certain webview URLs without + // stopping conversation logs from being downloaded + electron.session.defaultSession.on( + 'will-download', + (e: Event, item: DownloadItem) => { + if (!item.getURL().match(/^blob:file:/)) { + e.preventDefault(); + } + } + ); + + // tslint:disable-next-line:no-floating-promises window.loadFile( path.join(__dirname, 'window.html'),