Loading animation

This commit is contained in:
Mr. Stallion 2020-04-04 15:22:42 -05:00
parent cfc9f89aa1
commit a191d32105
6 changed files with 110 additions and 51 deletions

View File

@ -25,7 +25,7 @@
<div v-else-if="results" class="results">
<h4>
{{l('characterSearch.results')}}
<i class="fa fa-spinner search-spinner" v-if="!resultsComplete"></i>
<i class="fas fa-circle-notch fa-spin search-spinner" v-if="!resultsComplete"></i>
</h4>
<div v-for="character in results" :key="character.name" class="search-result" :class="'status-' + character.status">
@ -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);
}
}
</style>

View File

@ -26,6 +26,9 @@
:style="localPreviewStyle"
>
</div>
<i id="preview-spinner" class="fas fa-circle-notch fa-spin" v-show="shouldShowSpinner"></i>
<i id="preview-error" class="fas fa-times" v-show="shouldShowError"></i>
</div>
</template>
@ -79,6 +82,11 @@
externalPreviewStyle: Record<string, any> = {};
localPreviewStyle: Record<string, any> = {};
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()));
}
}
</script>
@ -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;
}
}
</style>

View File

@ -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);

View File

@ -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;
}

View File

@ -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

View File

@ -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'),