Skip to content

Commit d46acad

Browse files
PAXANDDOSPAXANDDOS
committed
Fixes and update button. See below.
- Added an 'update' object to store to remember new update - Added handler for parsing application information - Improved & renamed handler for parsing OS information - Added download icon - Moved footers to a different folder - Added function to rethrieve releases from GitHub and check for update - Added sleep function to imitate checking (it's too fast on practice) - Added function to compare two versions
1 parent 98ceb6a commit d46acad

File tree

12 files changed

+319
-70
lines changed

12 files changed

+319
-70
lines changed

‎packages/main/index.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@ import { app, BrowserWindow, globalShortcut, ipcMain } from 'electron'
22
import Store from 'electron-store'
33
import os from 'os'
44
import { join } from 'path'
5+
import './samples/app-info'
56
import './samples/input-sources'
7+
import './samples/os-info'
68
import './samples/save-recording'
7-
import './samples/system-info'
89

910
// @ts-ignore
1011
const isDev = import.meta.env.MODE === 'development'
@@ -103,6 +104,12 @@ const store = new Store({
103104
},
104105
},
105106
},
107+
update: {
108+
type: 'object',
109+
default: {
110+
available: false,
111+
},
112+
},
106113
},
107114
})
108115

‎packages/main/samples/app-info.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { app, ipcMain } from 'electron'
2+
3+
ipcMain.handle('get-app-info', () => {
4+
return {
5+
name: app.getName(),
6+
path: app.getAppPath(),
7+
version: app.getVersion(),
8+
locale: app.getLocale(),
9+
}
10+
})

‎packages/main/samples/system-info.ts‎ renamed to ‎packages/main/samples/os-info.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,17 @@ import { ipcMain } from 'electron'
22
import os from 'os'
33

44
ipcMain.handle('get-os-info', () => {
5+
let userOs = 'Windows'
6+
switch (os.type()) {
7+
case 'Darwin':
8+
userOs = 'MacOS'
9+
break
10+
case 'Linux':
11+
userOs = 'Linux'
12+
break
13+
}
514
return {
15+
os: userOs,
616
version: os.version(),
717
arch: os.arch(),
818
release: os.release(),

‎packages/renderer/src/assets/icons/Misc.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,3 +92,19 @@ export const Update = (props: SVGProps<SVGSVGElement>) => (
9292
<path d="M111.007 3.618a12.374 12.374 0 0 1 17.488 0l28.871 28.87a12.37 12.37 0 0 1 0 17.487l-28.871 28.87a12.375 12.375 0 0 1-20.807-8.834 12.369 12.369 0 0 1 3.319-8.653l7.094-7.094a74.242 74.242 0 0 0-61.452 53.033 74.231 74.231 0 0 0 23.837 77.59 12.372 12.372 0 0 1-6.814 21.826 12.38 12.38 0 0 1-9.04-2.822A98.979 98.979 0 0 1 119.14 29.255l-8.134-8.15a12.373 12.373 0 0 1 0-17.487Zm62.94 49.755a12.374 12.374 0 0 1 17.422-1.584 98.978 98.978 0 0 1-54.51 174.637l8.134 8.149a12.366 12.366 0 0 1 3.936 8.834 12.363 12.363 0 0 1-3.622 8.967 12.38 12.38 0 0 1-8.968 3.622 12.372 12.372 0 0 1-8.834-3.936l-28.871-28.87a12.37 12.37 0 0 1 0-17.486l28.871-28.87a12.376 12.376 0 0 1 20.807 8.834 12.37 12.37 0 0 1-3.319 8.653l-7.094 7.094a74.239 74.239 0 0 0 61.078-95.374 74.24 74.24 0 0 0-23.463-35.25 12.373 12.373 0 0 1-1.567-17.42Z" />
9393
</svg>
9494
)
95+
96+
export const Download = (props: SVGProps<SVGSVGElement>) => (
97+
<svg
98+
viewBox="0 0 24 24"
99+
fill="none"
100+
xmlns="http://www.w3.org/2000/svg"
101+
{...props}
102+
>
103+
<path
104+
d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"
105+
strokeWidth={2}
106+
strokeLinecap="round"
107+
strokeLinejoin="round"
108+
/>
109+
</svg>
110+
)

‎packages/renderer/src/components/Footers/InfoFooter.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { GitHub, Telegram } from '@/assets/icons/Social'
2+
import style from '@/styles/modal.module.scss'
3+
4+
const InfoFooter = () => {
5+
return (
6+
<div className={style.modalFooter}>
7+
<a href="https://github.com/PAXANDDOS">
8+
<GitHub />
9+
</a>
10+
<a href="https://t.me/PAXANDDOS">
11+
<Telegram />
12+
</a>
13+
<span>
14+
Copyright © 2022{' '}
15+
<a href="https://paxanddos.github.io/">Paul Litovka</a>. All
16+
rights reserved.
17+
</span>
18+
</div>
19+
)
20+
}
21+
22+
export default InfoFooter

‎packages/renderer/src/components/Footers/UpdateFooter.tsx‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
import { Download, Update } from '@/assets/icons/Misc'
2+
import style from '@/styles/modal.module.scss'
3+
import store from '@/utils/electron-store'
4+
import sleep from '@/utils/sleep'
5+
import versionCmp from '@/utils/version-cmp'
6+
import { useEffect, useRef, useState } from 'react'
7+
8+
type OsInfo = {
9+
os: string
10+
version: string
11+
arch: string
12+
release: string
13+
}
14+
15+
type AppInfo = {
16+
name: string
17+
path: string
18+
version: string
19+
locale: string
20+
}
21+
22+
type UpdateData = {
23+
available: boolean
24+
version: string
25+
path: string
26+
}
27+
28+
const UpdateBlock = () => {
29+
const [osInfo, setOsInfo] = useState<OsInfo>()
30+
const [appInfo, setAppInfo] = useState<AppInfo>()
31+
const [updateData, setUpdateData] = useState<UpdateData>()
32+
const updateRef = useRef<HTMLDivElement>(null)
33+
34+
useEffect(() => {
35+
store.get('update').then((res) => setUpdateData(res))
36+
window.ipcRenderer.invoke('get-os-info').then((res) => setOsInfo(res))
37+
window.ipcRenderer.invoke('get-app-info').then((res) => setAppInfo(res))
38+
}, [])
39+
40+
const checkUpdates = async () => {
41+
if (
42+
!updateRef.current ||
43+
!appInfo ||
44+
updateRef.current.className === style.spinAnimation
45+
)
46+
return
47+
updateRef.current.className = style.spinAnimation
48+
49+
const response = await fetch(
50+
'https://api.github.com/repos/daltonmenezes/electron-screen-recorder/releases/latest'
51+
)
52+
const release = await response.json()
53+
release.tag_name = release.tag_name.substring(1)
54+
await sleep(2000)
55+
56+
switch (versionCmp(release.tag_name, appInfo.version)) {
57+
case 1:
58+
break
59+
case 0:
60+
updateRef.current.className = ''
61+
return new Notification('You are already up-to-date!')
62+
case -1:
63+
updateRef.current.className = ''
64+
return new Notification('You are a cheater!')
65+
default:
66+
updateRef.current.className = ''
67+
return new Notification('An error occured.')
68+
}
69+
70+
const suffix = osInfo?.os === 'Windows' ? '-Setup' : ''
71+
let ext = 'exe'
72+
switch (osInfo?.os) {
73+
case 'MacOS':
74+
ext = 'dmg'
75+
break
76+
case 'Linux':
77+
ext = 'AppImage'
78+
break
79+
}
80+
const userAsset = `${appInfo.name}${suffix}-${release.tag_name}.${ext}`
81+
let path = 'link'
82+
83+
release.assets.forEach(function (asset: any) {
84+
if (asset.name === userAsset) path = asset.browser_download_url
85+
})
86+
87+
await store.set('update.available', true)
88+
await store.set('update.version', release.tag_name)
89+
await store.set('update.path', path)
90+
updateRef.current.className = ''
91+
setUpdateData({
92+
available: true,
93+
version: release.tag_name,
94+
path: path,
95+
})
96+
return new Notification('Update available!')
97+
}
98+
99+
const installUpdate = async () => {
100+
console.log('s')
101+
}
102+
103+
return (
104+
<div className={style.modalFooterSettings}>
105+
<div style={{ display: 'flex', flexDirection: 'column' }}>
106+
<span>Preview v{appInfo?.version}</span>
107+
<span>
108+
{osInfo?.version} {osInfo?.arch} ({osInfo?.release})
109+
</span>
110+
</div>
111+
{updateData?.available ? (
112+
<button
113+
className={style.checkForUpdatesBtn}
114+
onClick={installUpdate}
115+
>
116+
<div>
117+
<Download name="nofill" />
118+
</div>
119+
<span>Download update</span>
120+
</button>
121+
) : (
122+
<button
123+
className={style.checkForUpdatesBtn}
124+
onClick={checkUpdates}
125+
>
126+
<div ref={updateRef}>
127+
<Update />
128+
</div>
129+
<span>Check for update</span>
130+
</button>
131+
)}
132+
</div>
133+
)
134+
}
135+
136+
export default UpdateBlock

‎packages/renderer/src/components/Modals/InfoModal.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import style from '@/styles/modal.module.scss'
2+
import Footer from '../Footers/InfoFooter'
23
import Modal from './Modal'
34

45
interface InfoModalInterface {
@@ -7,7 +8,12 @@ interface InfoModalInterface {
78

89
const InfoModal = ({ onClose }: InfoModalInterface) => {
910
return (
10-
<Modal title="About Lucast" isOpen={true} onClose={onClose}>
11+
<Modal
12+
title="About Lucast"
13+
isOpen={true}
14+
onClose={onClose}
15+
Footer={<Footer />}
16+
>
1117
<div className={style.infoModal}>
1218
<div className={style.infoModalPreview}></div>
1319
<div className={style.infoModalContent}>

‎packages/renderer/src/components/Modals/Modal.tsx‎

Lines changed: 1 addition & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Cross } from '@/assets/icons/Misc'
2-
import { GitHub, Telegram } from '@/assets/icons/Social'
32
import style from '@/styles/modal.module.scss'
43
import type { ReactNode } from 'react'
54
import { useEffect, useRef, useState } from 'react'
@@ -50,25 +49,7 @@ const Modal = ({
5049
</button>
5150
</div>
5251
<div className={style.modalBody}>{children}</div>
53-
{Footer ? (
54-
Footer
55-
) : (
56-
<div className={style.modalFooter}>
57-
<a href="https://github.com/PAXANDDOS">
58-
<GitHub />
59-
</a>
60-
<a href="https://t.me/PAXANDDOS">
61-
<Telegram />
62-
</a>
63-
<span>
64-
Copyright © 2022{' '}
65-
<a href="https://paxanddos.github.io/">
66-
Paul Litovka
67-
</a>
68-
. All rights reserved.
69-
</span>
70-
</div>
71-
)}
52+
{Footer && Footer}
7253
</div>
7354
</div>
7455
),

0 commit comments

Comments
 (0)