me/vytal-redux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Restructured location page

Browse source
This commit is contained in:
z0ccc 2022-12-29 19:12:12 -05:00
parent 0765375063
commit d6fff31a4f
4 changed files with 141 additions and 173 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/Popup/Components/DebouncedInput.tsx
View file

@ -1,5 +1,5 @@
import { Dispatch, SetStateAction, ChangeEvent, useMemo } from 'react' import { Dispatch, SetStateAction, ChangeEvent, useMemo } from 'react'
import { Label, Input } from 'theme-ui' import { Label, Input, Box } from 'theme-ui'
import detachDebugger from '../../utils/detachDebugger' import detachDebugger from '../../utils/detachDebugger'
import debounce from 'lodash.debounce' import debounce from 'lodash.debounce'
@ -36,10 +36,10 @@ const DebouncedInput = ({
} }
return ( return (
<> <Box>
<Label htmlFor={name}>{title}</Label> <Label htmlFor={name}>{title}</Label>
<Input name={name} value={value} onChange={changeInputText} mb={mb} /> <Input name={name} value={value} onChange={changeInputText} mb={mb} />
</> </Box>
) )
} }

215
src/Popup/Pages/LocationPage/index.tsx
View file

@ -1,6 +1,7 @@
import { useState, useEffect, ChangeEvent, useCallback } from 'react' import { useState, useEffect, ChangeEvent, useCallback } from 'react'
import { Box, Button, Flex, Label, Radio, Select } from 'theme-ui' import { Box, Button, Flex, Label, Radio, Select } from 'theme-ui'
import Page from '../../Components/Page' import Page from '../../Components/Page'
import Checkbox from '../../Components/CheckBox'
import DebouncedInput from '../../Components/DebouncedInput' import DebouncedInput from '../../Components/DebouncedInput'
import detachDebugger from '../../../utils/detachDebugger' import detachDebugger from '../../../utils/detachDebugger'
import countryLocales from '../../../utils/countryLocales' import countryLocales from '../../../utils/countryLocales'
@ -15,9 +16,9 @@ interface LocationPageProps {
} }
const LocationPage = ({ tab, setTab }: LocationPageProps) => { const LocationPage = ({ tab, setTab }: LocationPageProps) => {
const [browserDefault, setBrowserDefault] = useState(true)
const [ipData, setIpData] = useState<ipData>() const [ipData, setIpData] = useState<ipData>()
const [ipInfo, setIpInfo] = useState('loading...') const [ipInfo, setIpInfo] = useState('loading...')
const [locationType, setLocationType] = useState('')
const [timezone, setTimezone] = useState('') const [timezone, setTimezone] = useState('')
const [locale, setLocale] = useState('') const [locale, setLocale] = useState('')
const [lat, setLatitude] = useState('') const [lat, setLatitude] = useState('')
@ -42,9 +43,19 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
useEffect(() => { useEffect(() => {
chrome.storage.local.get( chrome.storage.local.get(
['locationType', 'configuration', 'timezone', 'locale', 'lat', 'lon'], [
'locationBrowserDefault',
'configuration',
'timezone',
'locale',
'lat',
'lon',
],
(storage) => { (storage) => {
if (storage.locationType === 'matchIp' && ipData) { storage.configuration && setConfiguration(storage.configuration)
storage.locationBrowserDefault !== undefined &&
setBrowserDefault(storage.locationBrowserDefault)
if (storage.configuration === 'matchIp' && ipData) {
setTimezone(ipData.timezone) setTimezone(ipData.timezone)
setLocale(countryLocales[ipData.countryCode].locale) setLocale(countryLocales[ipData.countryCode].locale)
setLatitude(`${ipData.lat}`) setLatitude(`${ipData.lat}`)
@ -55,37 +66,31 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
lat: ipData.lat, lat: ipData.lat,
lon: ipData.lon, lon: ipData.lon,
}) })
} else if (storage.locationType === 'custom') { } else {
storage.configuration && setConfiguration(storage.configuration)
storage.timezone && setTimezone(storage.timezone) storage.timezone && setTimezone(storage.timezone)
storage.locale && setLocale(storage.locale) storage.locale && setLocale(storage.locale)
storage.lat && setLatitude(storage.lat) storage.lat && setLatitude(storage.lat)
storage.lon && setLongitude(storage.lon) storage.lon && setLongitude(storage.lon)
} }
storage.locationType
? setLocationType(storage.locationType)
: setLocationType('default')
} }
) )
}, [ipData]) }, [ipData])
const changeType = (e: ChangeEvent<HTMLInputElement>) => { const changeBrowserDefault = () => {
detachDebugger() detachDebugger()
setLocationType(e.target.value) chrome.storage.local.set({
chrome.storage.local.set({ locationType: e.target.value }) locationBrowserDefault: !browserDefault,
})
setBrowserDefault(!browserDefault)
}
if (e.target.value === 'default') { const changeConfiguration = (e: ChangeEvent<HTMLSelectElement>) => {
setTimezone('') detachDebugger()
setLocale('') setConfiguration(e.target.value)
setLatitude('') chrome.storage.local.set({
setLongitude('') configuration: e.target.value,
chrome.storage.local.set({ })
timezone: '', if (e.target.value === 'matchIp') {
locale: '',
lat: '',
lon: '',
})
} else if (e.target.value === 'matchIp') {
if (ipData) { if (ipData) {
setTimezone(ipData.timezone) setTimezone(ipData.timezone)
setLocale(countryLocales[ipData.countryCode].locale) setLocale(countryLocales[ipData.countryCode].locale)
@ -99,28 +104,17 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
}) })
} }
} else if (e.target.value === 'custom') { } else if (e.target.value === 'custom') {
if (configuration !== 'custom') { setTimezone('')
setTimezone(configurations[configuration].timezone) setLocale('')
setLocale(configurations[configuration].locale) setLatitude('')
setLatitude(configurations[configuration].lat) setLongitude('')
setLongitude(configurations[configuration].lon) chrome.storage.local.set({
chrome.storage.local.set({ timezone: '',
timezone: configurations[configuration].timezone, locale: '',
locale: configurations[configuration].locale, lat: '',
lat: configurations[configuration].lat, lon: '',
lon: configurations[configuration].lon, })
}) } else {
}
}
}
const changeConfiguration = (e: ChangeEvent<HTMLSelectElement>) => {
detachDebugger()
setConfiguration(e.target.value)
chrome.storage.local.set({
configuration: e.target.value,
})
if (e.target.value !== 'custom') {
setTimezone(configurations[e.target.value].timezone) setTimezone(configurations[e.target.value].timezone)
setLocale(configurations[e.target.value].locale) setLocale(configurations[e.target.value].locale)
setLatitude(configurations[e.target.value].lat) setLatitude(configurations[e.target.value].lat)
@ -135,12 +129,10 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
} }
const changeInputText = () => { const changeInputText = () => {
if (locationType !== 'custom' || configuration !== 'custom') { if (configuration !== 'custom') {
setConfiguration('custom') setConfiguration('custom')
setLocationType('custom')
chrome.storage.local.set({ chrome.storage.local.set({
configuration: 'custom', configuration: 'custom',
locationType: 'custom',
}) })
} }
} }
@ -155,41 +147,17 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
return ( return (
<Page isCurrentTab={tab === 'location'} title={'Location Data'}> <Page isCurrentTab={tab === 'location'} title={'Location Data'}>
<Flex <Checkbox
title="Use browser default"
onChange={changeBrowserDefault}
checked={browserDefault}
/>
<Box
sx={{ sx={{
justifyContent: 'space-between', opacity: browserDefault ? '0.5' : '1',
mb: '8px', pointerEvents: browserDefault ? 'none' : 'auto',
}} }}
> >
<Label sx={{ cursor: 'pointer' }}>
<Radio
name="locationType"
value="default"
onChange={changeType}
checked={locationType === 'default'}
/>
Default
</Label>
<Label sx={{ cursor: 'pointer' }}>
<Radio
name="locationType"
value="matchIp"
onChange={changeType}
checked={locationType === 'matchIp'}
/>
Match IP
</Label>
<Label sx={{ cursor: 'pointer' }}>
<Radio
name="locationType"
value="custom"
onChange={changeType}
checked={locationType === 'custom'}
/>
Custom
</Label>
</Flex>
{locationType === 'matchIp' && (
<Flex <Flex
sx={{ sx={{
border: '1px solid', border: '1px solid',
@ -225,54 +193,55 @@ const LocationPage = ({ tab, setTab }: LocationPageProps) => {
}} }}
/> />
</Flex> </Flex>
)} <Label htmlFor="configuration">Configuration</Label>
{locationType === 'custom' && ( <Select
<> name="configuration"
<Label htmlFor="configuration">Configuration</Label> value={configuration}
<Select onChange={changeConfiguration}
name="configuration" mb={'8px'}
value={configuration} >
onChange={changeConfiguration} <option value="matchIp">Match IP Address</option>
mb={'8px'} <option value="custom">Custom</option>
> <optgroup label="Locations">
<option value="custom">Custom</option>
{Object.keys(configurations).map((key) => ( {Object.keys(configurations).map((key) => (
<option value={key} key={key}> <option value={key} key={key}>
{configurations[key].name} {configurations[key].name}
</option> </option>
))} ))}
</Select> </optgroup>
</> </Select>
)} <DebouncedInput
<DebouncedInput name="timezone"
name="timezone" title="Timezone"
title="Timezone" value={timezone}
value={timezone} setValue={setTimezone}
setValue={setTimezone} onChange={changeInputText}
onChange={changeInputText} />
/> <DebouncedInput
<DebouncedInput name="locale"
name="locale" title="Locale"
title="Locale" value={locale}
value={locale} setValue={setLocale}
setValue={setLocale} onChange={changeInputText}
onChange={changeInputText} />
/> <Flex sx={{ gap: '12px' }}>
<DebouncedInput <DebouncedInput
name="lat" name="lat"
title="Latitude" title="Latitude"
value={lat} value={lat}
setValue={setLatitude} setValue={setLatitude}
onChange={changeInputText} onChange={changeInputText}
/> />
<DebouncedInput <DebouncedInput
name="lon" name="lon"
title="Longitude" title="Longitude"
value={lon} value={lon}
setValue={setLongitude} setValue={setLongitude}
onChange={changeInputText} onChange={changeInputText}
mb="12px" mb="12px"
/> />
</Flex>
</Box>
<Box <Box
sx={{ sx={{
color: 'text', color: 'text',

6
src/Popup/Pages/UserAgentPage/index.tsx
View file

@ -30,10 +30,7 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
}, []) }, [])
const changeBrowserDefault = () => { const changeBrowserDefault = () => {
if (!browserDefault) { detachDebugger()
detachDebugger()
}
chrome.storage.local.set({ chrome.storage.local.set({
userAgentBrowserDefault: !browserDefault, userAgentBrowserDefault: !browserDefault,
}) })
@ -74,7 +71,6 @@ const UserAgentPage = ({ tab }: UserAgentPageProps) => {
onChange={changeBrowserDefault} onChange={changeBrowserDefault}
checked={browserDefault} checked={browserDefault}
/> />
<Box <Box
sx={{ sx={{
opacity: browserDefault ? '0.5' : '1', opacity: browserDefault ? '0.5' : '1',

87
src/utils/attachDebugger.ts
View file

@ -12,6 +12,7 @@ const attachDebugger = (tabId: number) => {
'localeMatchIP', 'localeMatchIP',
'userAgent', 'userAgent',
'platform', 'platform',
'locationBrowserDefault',
'userAgentBrowserDefault', 'userAgentBrowserDefault',
], ],
(storage) => { (storage) => {
@ -21,54 +22,56 @@ const attachDebugger = (tabId: number) => {
storage.lon || storage.lon ||
storage.locale || storage.locale ||
storage.userAgent) && storage.userAgent) &&
!storage.userAgentBrowserDefault (!storage.locationBrowserDefault || !storage.userAgentBrowserDefault)
) { ) {
chrome.debugger.attach({ tabId: tabId }, '1.3', () => { chrome.debugger.attach({ tabId: tabId }, '1.3', () => {
if (!chrome.runtime.lastError) { if (!chrome.runtime.lastError) {
if (storage.timezone) { if (!storage.locationBrowserDefault) {
chrome.debugger.sendCommand( if (storage.timezone) {
{ tabId: tabId }, chrome.debugger.sendCommand(
'Emulation.setTimezoneOverride', { tabId: tabId },
{ 'Emulation.setTimezoneOverride',
timezoneId: storage.timezone, {
}, timezoneId: storage.timezone,
() => { },
if ( () => {
chrome.runtime.lastError && if (
chrome.runtime.lastError.message?.includes( chrome.runtime.lastError &&
'Timezone override is already in effect' chrome.runtime.lastError.message?.includes(
) 'Timezone override is already in effect'
) { )
chrome.debugger.detach({ tabId }) ) {
chrome.debugger.detach({ tabId })
}
} }
} )
) }
}
if (storage.locale) { if (storage.locale) {
chrome.debugger.sendCommand( chrome.debugger.sendCommand(
{ tabId: tabId }, { tabId: tabId },
'Emulation.setLocaleOverride', 'Emulation.setLocaleOverride',
{ {
locale: storage.locale, locale: storage.locale,
} }
) )
} }
if (storage.lat || storage.lon) { if (storage.lat || storage.lon) {
chrome.debugger.sendCommand( chrome.debugger.sendCommand(
{ tabId: tabId }, { tabId: tabId },
'Emulation.setGeolocationOverride', 'Emulation.setGeolocationOverride',
{ {
latitude: storage.lat latitude: storage.lat
? parseFloat(storage.lat) ? parseFloat(storage.lat)
: storage.ipData.lat, : storage.ipData.lat,
longitude: storage.lon longitude: storage.lon
? parseFloat(storage.lon) ? parseFloat(storage.lon)
: storage.ipData.lon, : storage.ipData.lon,
accuracy: 1, accuracy: 1,
} }
) )
}
} }
if ( if (