Loading animation
This commit is contained in:
Mr. Stallion
parent
cfc9f89aa1
commit
a191d32105
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
|
|
|
|||
Loading…
Reference in New Issue