Skip to content

Commit

Permalink
feat: allow visitors to opt-out of the thumbnailing proxy (#381)
Browse files Browse the repository at this point in the history
* feat: allow visitors to opt-out of the thumbnailing proxy and use fullsize ipfs images

* feat: 🎨 add title prop to checkboxes

---------

Co-authored-by: Mel Massadian <melmassadian@gmail.com>
Co-authored-by: melMass <mel@melmassadian.com>
  • Loading branch information
3 people authored Feb 25, 2024
1 parent c8d0907 commit 0bc7d0a
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 4 deletions.
6 changes: 5 additions & 1 deletion src/atoms/input/Checkbox.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ const Checkbox = forwardRef(
onCheck = () => null,
onBlur = () => null,
onWheel = () => null,
title = '',
disabled,
checked: checkedProp,
autoFocus = false,
Expand All @@ -51,7 +52,10 @@ const Checkbox = forwardRef(
})

return (
<label className={`${classes} ${className ? className : ''}`}>
<label
title={title}
className={`${classes} ${className ? className : ''}`}
>
{label}
<input
ref={ref}
Expand Down
4 changes: 3 additions & 1 deletion src/components/media-types/image/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useState } from 'react'
import { LazyLoadImage } from 'react-lazy-load-image-component'
import styles from '@style'
import { MediaTypeProps } from '@types'
import { useLocalSettings } from '@context/localSettingsStore'

export const ImageComponent = ({
artifactUri,
Expand All @@ -11,14 +12,15 @@ export const ImageComponent = ({
nft,
}: MediaTypeProps) => {
const [isSmol, setSmol] = useState(false)
const imgproxy = useLocalSettings((st) => st.imgproxy)

let src

if (previewUri) {
src = previewUri
} else if (displayView) {
src = artifactUri
} else if (import.meta.env.VITE_IMGPROXY && nft?.teia_meta?.preview_uri) {
} else if (imgproxy && import.meta.env.VITE_IMGPROXY && nft?.teia_meta?.preview_uri) {
src = `${import.meta.env.VITE_IMGPROXY}${nft.teia_meta.preview_uri}`
} else {
src = displayUri
Expand Down
4 changes: 4 additions & 0 deletions src/context/localSettingsStore.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,15 @@ interface LocalSettingsState {
setRpcNode: (rpcNode?: RPC_NODES) => Promise<void>
setTheme: (theme: Theme, apply?: boolean) => void
setTilted: (tilted: boolean) => void
setImgproxy: (imgproxy: boolean) => void
setViewMode: (mode: ViewMode) => void
setHasSeenBanner: (seen: boolean) => void
setZen: (zen: boolean) => void
theme: Theme
themeDark: Theme
themeLight: Theme
tilted: boolean
imgproxy: boolean
toggleTheme: () => void
toggleViewMode: () => void
toggleZen: () => void
Expand All @@ -69,6 +71,7 @@ const defaultValues = {
rpcNode: rpc_nodes[5],
customRpcNode: '',
tilted: false,
imgproxy: true,
has_seen_banner: false,
}
// TODO: replace all the "set" methods with one that merges the state with the provided partial object
Expand All @@ -79,6 +82,7 @@ export const useLocalSettings = create<LocalSettingsState>()(
...defaultValues,
setHasSeenBanner: (has_seen_banner) => set({ has_seen_banner }),
setTilted: (tilted) => set({ tilted }),
setImgproxy: (imgproxy) => set({ imgproxy }),
toggleViewMode: () =>
set((state) => ({
viewMode: state.viewMode === 'single' ? 'masonry' : 'single',
Expand Down
31 changes: 29 additions & 2 deletions src/pages/config/Settings.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ export const Settings = () => {
setCustomRpcNode,
tilted,
setTilted,
imgproxy,
setImgproxy,
has_seen_banner,
setHasSeenBanner,
] = useLocalSettings((st) => [
Expand All @@ -55,6 +57,8 @@ export const Settings = () => {
st.setCustomRpcNode,
st.tilted,
st.setTilted,
st.imgproxy,
st.setImgproxy,
st.has_seen_banner,
st.setHasSeenBanner,
])
Expand Down Expand Up @@ -129,15 +133,38 @@ export const Settings = () => {
)}
<Line />
<Checkbox
alt={`click to enable fool around (a throwback of the 2023 april fool)`}
alt={`click to ${
tilted ? 'disable' : 'enable'
} fool around (a throwback of the 2023 april fool)`}
title={`click to ${
tilted ? 'disable' : 'enable'
} fool around (a throwback of the 2023 april fool)`}
checked={tilted}
onCheck={setTilted}
className="no-fool"
label={'Fool Around'}
/>
<Line />
<Checkbox
alt={`click to ${
imgproxy ? 'disable' : 'enable'
} imgproxy thumbnails. Not using imgproxy will load fullsize images from ipfs directly instead (performance penalty)`}
title={`click to ${
imgproxy ? 'disable' : 'enable'
} imgproxy thumbnails. Not using imgproxy will load fullsize images from ipfs directly instead (performance penalty)`}
checked={imgproxy}
onCheck={setImgproxy}
initial={true}
label={'Use thumbnails to increase performance'}
/>
{bannerEnabled && (
<Checkbox
alt={`click to enable fool around (a throwback of the 2023 april fool)`}
alt={`click to ${
setHasSeenBanner ? 'disable' : 'enable'
} last event banner (this is automatically reset for you on new announcements)`}
title={`click to ${
setHasSeenBanner ? 'disable' : 'enable'
} last event banner (this is automatically reset for you on new announcements)`}
checked={has_seen_banner}
onCheck={setHasSeenBanner}
label={'Hide banner for last announcement'}
Expand Down

0 comments on commit 0bc7d0a

Please sign in to comment.