This repository has been archived by the owner on Sep 1, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
TabWebview.vue
102 lines (90 loc) · 2.43 KB
/
TabWebview.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<template>
<webview
ref="webview"
:src="item.url"
:useragent="userAgent"
:preload="$options.preloadScript"
:class="$style.webview"
/>
</template>
<script>
import path from 'path';
import url from 'url';
export default {
preloadScript: `file://${path.join(__static, 'webview.js')}`, // eslint-disable-line no-undef
props: {
item: {
type: Object,
default: () => ({}),
},
},
computed: {
muteOnWindowBlur() {
return this.$store.getters['Settings/muteOnWindowBlur'];
},
notificationsPreventOnBlur() {
return this.$store.getters['Notifications/preventOnBlur'];
},
userAgent() {
return this.item.userAgent || navigator.userAgent;
},
windowHasFocus() {
return this.$store.getters['Window/hasFocus'];
},
webview() {
return this.$refs.webview;
},
},
watch: {
windowHasFocus(value) {
if (!this.muteOnWindowBlur) return;
this.webview.setAudioMuted(!value);
},
},
mounted() {
this.webview.addEventListener('ipc-message', (event) => {
if (event.channel !== 'notification') return;
const [notification] = event.args;
this.$store.commit('Notifications/add', {
notification,
tabId: this.item.id,
});
if (!this.notificationsPreventOnBlur || this.windowHasFocus) {
new Notification(notification.title, notification.options); // eslint-disable-line no-new
}
});
this.webview.addEventListener('page-title-updated', ({ title }) => {
this.$store.commit('Pages/setState', {
tabId: this.item.id,
data: { title },
});
});
this.webview.addEventListener('page-favicon-updated', ({ favicons }) => {
const [favicon] = favicons;
this.$store.commit('Pages/setState', {
tabId: this.item.id,
data: { favicon },
});
});
this.webview.addEventListener('dom-ready', (view) => {
if ('customCss' in this.item) {
view.target.insertCSS(this.item.customCss);
}
if ('customJs' in this.item) {
view.target.executeJavaScript(this.item.customJs);
}
});
this.webview.addEventListener('new-window', (e) => {
const { protocol } = url.parse(e.url);
if (protocol === 'http:' || protocol === 'https:') {
this.$electron.remote.shell.openExternal(e.url);
}
});
},
};
</script>
<style lang="postcss" module>
.webview {
@apply flex-grow;
}
</style>