Skip to content

Commit

Permalink
Images v2 (#513)
Browse files Browse the repository at this point in the history
  • Loading branch information
ekzyis authored Oct 1, 2023
1 parent 1f0a4e0 commit b2b38d8
Show file tree
Hide file tree
Showing 20 changed files with 747 additions and 222 deletions.
6 changes: 4 additions & 2 deletions .env.sample
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,10 @@ OPENSEARCH_PASSWORD=

# imgproxy options
IMGPROXY_ENABLE_WEBP_DETECTION=1
IMGPROXY_MAX_ANIMATION_FRAMES=100
IMGPROXY_MAX_SRC_RESOLUTION=200
IMGPROXY_ENABLE_AVIF_DETECTION=1
IMGPROXY_MAX_ANIMATION_FRAMES=2000
IMGPROXY_MAX_SRC_RESOLUTION=50
IMGPROXY_MAX_ANIMATION_FRAME_RESOLUTION=200
IMGPROXY_READ_TIMEOUT=10
IMGPROXY_WRITE_TIMEOUT=10
IMGPROXY_DOWNLOAD_TIMEOUT=9
Expand Down
69 changes: 0 additions & 69 deletions api/resolvers/imgproxy/index.js

This file was deleted.

11 changes: 1 addition & 10 deletions api/resolvers/item.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import { parse } from 'tldts'
import uu from 'url-unshort'
import { advSchema, amountSchema, bountySchema, commentSchema, discussionSchema, jobSchema, linkSchema, pollSchema, ssValidate } from '../../lib/validate'
import { sendUserNotification } from '../webPush'
import { proxyImages } from './imgproxy'
import { defaultCommentSort } from '../../lib/item'
import { notifyItemParents, notifyUserSubscribers, notifyZapped } from '../../lib/push-notifications'

Expand Down Expand Up @@ -1019,13 +1018,9 @@ export const updateItem = async (parent, { sub: subName, forward, options, ...it
throw new GraphQLError('item can no longer be editted', { extensions: { code: 'BAD_INPUT' } })
}

if (item.text) {
item.text = await proxyImages(item.text)
}
if (item.url && typeof item.maxBid === 'undefined') {
item.url = ensureProtocol(item.url)
item.url = removeTracking(item.url)
item.url = await proxyImages(item.url)
}
// only update item with the boost delta ... this is a bit of hack given the way
// boost used to work
Expand Down Expand Up @@ -1063,13 +1058,9 @@ export const createItem = async (parent, { forward, options, ...item }, { me, mo
item.userId = me ? Number(me.id) : ANON_USER_ID

const fwdUsers = await getForwardUsers(models, forward)
if (item.text) {
item.text = await proxyImages(item.text)
}
if (item.url && typeof item.maxBid === 'undefined') {
item.url = ensureProtocol(item.url)
item.url = removeTracking(item.url)
item.url = await proxyImages(item.url)
}

const enforceFee = me ? undefined : (item.parentId ? ANON_COMMENT_FEE : (ANON_POST_FEE + (item.boost || 0)))
Expand Down Expand Up @@ -1113,7 +1104,7 @@ export const SELECT =
"Item"."subName", "Item".status, "Item"."uploadId", "Item"."pollCost", "Item".boost, "Item".msats,
"Item".ncomments, "Item"."commentMsats", "Item"."lastCommentAt", "Item"."weightedVotes",
"Item"."weightedDownVotes", "Item".freebie, "Item"."otsHash", "Item"."bountyPaidTo",
ltree2text("Item"."path") AS "path", "Item"."weightedComments"`
ltree2text("Item"."path") AS "path", "Item"."weightedComments", "Item"."imgproxyUrls"`

async function topOrderByWeightedSats (me, models) {
return `ORDER BY ${await orderByNumerator(me, models)} DESC NULLS LAST, "Item".id DESC`
Expand Down
1 change: 1 addition & 0 deletions api/typeDefs/item.js
Original file line number Diff line number Diff line change
Expand Up @@ -114,6 +114,7 @@ export default gql`
otsHash: String
parentOtsHash: String
forwards: [ItemForward]
imgproxyUrls: JSONObject
}
input ItemForwardInput {
Expand Down
2 changes: 1 addition & 1 deletion components/comment.js
Original file line number Diff line number Diff line change
Expand Up @@ -208,7 +208,7 @@ export default function Comment ({
)
: (
<div className={styles.text}>
<Text topLevel={topLevel} nofollow={item.sats + item.boost < NOFOLLOW_LIMIT}>
<Text topLevel={topLevel} nofollow={item.sats + item.boost < NOFOLLOW_LIMIT} imgproxyUrls={item.imgproxyUrls}>
{truncate ? truncateString(item.text) : item.searchText || item.text}
</Text>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/form.js
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,7 @@ export function MarkdownInput ({ label, topLevel, groupClassName, onChange, setH
: (
<div className='form-group'>
<div className={`${styles.text} form-control`}>
<Text topLevel={topLevel} noFragments fetchOnlyImgProxy={false}>{meta.value}</Text>
<Text topLevel={topLevel} noFragments>{meta.value}</Text>
</div>
</div>
)}
Expand Down
221 changes: 221 additions & 0 deletions components/image.js

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion components/item-full.js
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ function TopLevelItem ({ item, noReply, ...props }) {
}

function ItemText ({ item }) {
return <Text topLevel nofollow={item.sats + item.boost < NOFOLLOW_LIMIT}>{item.searchText || item.text}</Text>
return <Text topLevel nofollow={item.sats + item.boost < NOFOLLOW_LIMIT} imgproxyUrls={item.imgproxyUrls}>{item.searchText || item.text}</Text>
}

export default function ItemFull ({ item, bio, rank, ...props }) {
Expand Down
31 changes: 26 additions & 5 deletions components/modal.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { createContext, useCallback, useContext, useMemo, useState } from 'react'
import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react'
import Modal from 'react-bootstrap/Modal'
import BackArrow from '../svgs/arrow-left-line.svg'
import { useRouter } from 'next/router'
import ActionDropdown from './action-dropdown'

export const ShowModalContext = createContext(() => null)

Expand Down Expand Up @@ -37,19 +39,38 @@ export default function useModal () {
const onClose = useCallback(() => {
setModalContent(null)
setModalStack([])
}, [])
modalOptions?.onClose?.()
}, [modalOptions?.onClose])

const router = useRouter()
useEffect(() => {
router.events.on('routeChangeStart', onClose)
return () => router.events.off('routeChangeStart', onClose)
}, [router, onClose])

const modal = useMemo(() => {
if (modalContent === null) {
return null
}
const className = modalOptions?.fullScreen ? 'fullscreen' : ''
return (
<Modal onHide={modalOptions?.keepOpen ? null : onClose} show={!!modalContent}>
<Modal
onHide={modalOptions?.keepOpen ? null : onClose} show={!!modalContent}
className={className}
dialogClassName={className}
contentClassName={className}
>
<div className='d-flex flex-row'>
{modalOptions?.overflow &&
<div className={'modal-btn modal-overflow ' + className}>
<ActionDropdown>
{modalOptions.overflow}
</ActionDropdown>
</div>}
{modalStack.length > 0 ? <div className='modal-btn modal-back' onClick={onBack}><BackArrow width={18} height={18} className='fill-white' /></div> : null}
<div className='modal-btn modal-close' onClick={onClose}>X</div>
<div className={'modal-btn modal-close ' + className} onClick={onClose}>X</div>
</div>
<Modal.Body>
<Modal.Body className={className}>
{modalContent}
</Modal.Body>
</Modal>
Expand Down
Loading

0 comments on commit b2b38d8

Please sign in to comment.