+
+ {modalOptions?.overflow &&
+
+
+ {modalOptions.overflow}
+
+
}
{modalStack.length > 0 ?
: null}
-
X
+
X
@@ -159,8 +108,12 @@ export default memo(function Text ({ topLevel, noFragments, nofollow, fetchOnlyI
return <>{children}
}
- if (urlCache[href] === CACHE_STATES.IS_LOADED) {
- return
+ if (imgUrlCache[href] === IMG_CACHE_STATES.LOADED) {
+ const url = IMGPROXY_URL_REGEXP.test(href) ? decodeOriginalUrl(href) : href
+ // if `srcSet` is undefined, it means the image was not processed by worker yet
+ // if `srcSet` is null, image was processed but this specific url was not detected as an image by the worker
+ const srcSet = imgproxyUrls ? (imgproxyUrls[url] || null) : undefined
+ return
}
// map: fix any highlighted links
@@ -183,8 +136,12 @@ export default memo(function Text ({ topLevel, noFragments, nofollow, fetchOnlyI
)
},
- img: ({ node, ...props }) => {
- return
+ img: ({ node, src, ...props }) => {
+ const url = IMGPROXY_URL_REGEXP.test(src) ? decodeOriginalUrl(src) : src
+ // if `srcSet` is undefined, it means the image was not processed by worker yet
+ // if `srcSet` is null, image was processed but this specific url was not detected as an image by the worker
+ const srcSet = imgproxyUrls ? (imgproxyUrls[url] || null) : undefined
+ return
}
}}
remarkPlugins={[gfm, mention, sub, remarkDirective, searchHighlighter]}
@@ -194,76 +151,3 @@ export default memo(function Text ({ topLevel, noFragments, nofollow, fetchOnlyI
)
})
-
-function ClickToLoad ({ children }) {
- const [clicked, setClicked] = useState(false)
- return clicked ? children : setClicked(true)}>click to load image
-}
-
-export function ZoomableImage ({ src, topLevel, useClickToLoad, ...props }) {
- const me = useMe()
- const [err, setErr] = useState()
- const [imgSrc, setImgSrc] = useState(src)
- const [isImgProxy, setIsImgProxy] = useState(IMGPROXY_URL_REGEXP.test(src))
- const defaultMediaStyle = {
- maxHeight: topLevel ? '75vh' : '25vh',
- cursor: 'zoom-in'
- }
- useClickToLoad ??= true
-
- // if image changes we need to update state
- const [mediaStyle, setMediaStyle] = useState(defaultMediaStyle)
- useEffect(() => {
- setMediaStyle(defaultMediaStyle)
- setErr(null)
- }, [src])
-
- if (!src) return null
- if (err) {
- if (!isImgProxy) {
- return (
-
-
- image error
-
- )
- }
- try {
- const originalUrl = decodeOriginalUrl(src)
- setImgSrc(originalUrl)
- setErr(null)
- } catch (err) {
- console.error(err)
- setErr(err)
- }
- // always set to false since imgproxy returned error
- setIsImgProxy(false)
- }
-
- const img = (
- 
{
- if (mediaStyle.cursor === 'zoom-in') {
- setMediaStyle({
- width: '100%',
- cursor: 'zoom-out'
- })
- } else {
- setMediaStyle(defaultMediaStyle)
- }
- }}
- onError={() => setErr(true)}
- {...props}
- />
- )
-
- return (
- (!me || !me.clickToLoadImg || isImgProxy || !useClickToLoad)
- ? img
- : {img}
-
- )
-}
diff --git a/fragments/comments.js b/fragments/comments.js
index b33fe9c6..8e00f89e 100644
--- a/fragments/comments.js
+++ b/fragments/comments.js
@@ -30,6 +30,7 @@ export const COMMENT_FIELDS = gql`
mine
otsHash
ncomments
+ imgproxyUrls
}
`
diff --git a/fragments/items.js b/fragments/items.js
index 5345ca10..bb5d4f02 100644
--- a/fragments/items.js
+++ b/fragments/items.js
@@ -45,6 +45,7 @@ export const ITEM_FIELDS = gql`
status
uploadId
mine
+ imgproxyUrls
}`
export const ITEM_FULL_FIELDS = gql`
diff --git a/prisma/migrations/20230920192620_item_imgproxy_urls/migration.sql b/prisma/migrations/20230920192620_item_imgproxy_urls/migration.sql
new file mode 100644
index 00000000..38ca2f36
--- /dev/null
+++ b/prisma/migrations/20230920192620_item_imgproxy_urls/migration.sql
@@ -0,0 +1,175 @@
+-- AlterTable
+ALTER TABLE "Item" ADD COLUMN "imgproxyUrls" JSONB;
+
+-- schedule imgproxy job
+CREATE OR REPLACE FUNCTION create_item(
+ jitem JSONB, forward JSONB, poll_options JSONB, spam_within INTERVAL)
+RETURNS "Item"
+LANGUAGE plpgsql
+AS $$
+DECLARE
+ user_msats BIGINT;
+ cost_msats BIGINT;
+ freebie BOOLEAN;
+ item "Item";
+ med_votes FLOAT;
+ select_clause TEXT;
+BEGIN
+ PERFORM ASSERT_SERIALIZED();
+
+ -- access fields with appropriate types
+ item := jsonb_populate_record(NULL::"Item", jitem);
+
+ SELECT msats INTO user_msats FROM users WHERE id = item."userId";
+
+ IF item."maxBid" IS NOT NULL THEN
+ cost_msats := 1000000;
+ ELSE
+ cost_msats := 1000 * POWER(10, item_spam(item."parentId", item."userId", spam_within));
+ END IF;
+ -- it's only a freebie if it's a 1 sat cost, they have < 1 sat, and boost = 0
+ freebie := (cost_msats <= 1000) AND (user_msats < 1000) AND (item.boost = 0);
+
+ IF NOT freebie AND cost_msats > user_msats THEN
+ RAISE EXCEPTION 'SN_INSUFFICIENT_FUNDS';
+ END IF;
+
+ -- get this user's median item score
+ SELECT COALESCE(
+ percentile_cont(0.5) WITHIN GROUP(
+ ORDER BY "weightedVotes" - "weightedDownVotes"), 0)
+ INTO med_votes FROM "Item" WHERE "userId" = item."userId";
+
+ -- if their median votes are positive, start at 0
+ -- if the median votes are negative, start their post with that many down votes
+ -- basically: if their median post is bad, presume this post is too
+ -- addendum: if they're an anon poster, always start at 0
+ IF med_votes >= 0 OR item."userId" = 27 THEN
+ med_votes := 0;
+ ELSE
+ med_votes := ABS(med_votes);
+ END IF;
+
+ -- there's no great way to set default column values when using json_populate_record
+ -- so we need to only select fields with non-null values that way when func input
+ -- does not include a value, the default value is used instead of null
+ SELECT string_agg(quote_ident(key), ',') INTO select_clause
+ FROM jsonb_object_keys(jsonb_strip_nulls(jitem)) k(key);
+ -- insert the item
+ EXECUTE format($fmt$
+ INSERT INTO "Item" (%s, "weightedDownVotes")
+ SELECT %1$s, %L
+ FROM jsonb_populate_record(NULL::"Item", %L) RETURNING *
+ $fmt$, select_clause, med_votes, jitem) INTO item;
+
+ INSERT INTO "ItemForward" ("itemId", "userId", "pct")
+ SELECT item.id, "userId", "pct" FROM jsonb_populate_recordset(NULL::"ItemForward", forward);
+
+ -- Automatically subscribe forward recipients to the new post
+ INSERT INTO "ThreadSubscription" ("itemId", "userId")
+ SELECT item.id, "userId" FROM jsonb_populate_recordset(NULL::"ItemForward", forward);
+
+ INSERT INTO "PollOption" ("itemId", "option")
+ SELECT item.id, "option" FROM jsonb_array_elements_text(poll_options) o("option");
+
+ IF NOT freebie THEN
+ UPDATE users SET msats = msats - cost_msats WHERE id = item."userId";
+
+ INSERT INTO "ItemAct" (msats, "itemId", "userId", act)
+ VALUES (cost_msats, item.id, item."userId", 'FEE');
+ END IF;
+
+ -- if this item has boost
+ IF item.boost > 0 THEN
+ PERFORM item_act(item.id, item."userId", 'BOOST', item.boost);
+ END IF;
+
+ -- if this is a job
+ IF item."maxBid" IS NOT NULL THEN
+ PERFORM run_auction(item.id);
+ END IF;
+
+ -- if this is a bio
+ IF item.bio THEN
+ UPDATE users SET "bioId" = item.id WHERE id = item."userId";
+ END IF;
+
+ -- schedule imgproxy job
+ INSERT INTO pgboss.job (name, data, retrylimit, retrybackoff, startafter)
+ VALUES ('imgproxy', jsonb_build_object('id', item.id), 21, true, now() + interval '5 seconds');
+
+ RETURN item;
+END;
+$$;
+
+-- schedule imgproxy job
+CREATE OR REPLACE FUNCTION update_item(
+ jitem JSONB, forward JSONB, poll_options JSONB)
+RETURNS "Item"
+LANGUAGE plpgsql
+AS $$
+DECLARE
+ user_msats INTEGER;
+ item "Item";
+ select_clause TEXT;
+BEGIN
+ PERFORM ASSERT_SERIALIZED();
+
+ item := jsonb_populate_record(NULL::"Item", jitem);
+
+ IF item.boost > 0 THEN
+ UPDATE "Item" SET boost = boost + item.boost WHERE id = item.id;
+ PERFORM item_act(item.id, item."userId", 'BOOST', item.boost);
+ END IF;
+
+ IF item.status IS NOT NULL THEN
+ UPDATE "Item" SET "statusUpdatedAt" = now_utc()
+ WHERE id = item.id AND status <> item.status;
+ END IF;
+
+ SELECT string_agg(quote_ident(key), ',') INTO select_clause
+ FROM jsonb_object_keys(jsonb_strip_nulls(jitem)) k(key)
+ WHERE key <> 'boost';
+
+ EXECUTE format($fmt$
+ UPDATE "Item" SET (%s) = (
+ SELECT %1$s
+ FROM jsonb_populate_record(NULL::"Item", %L)
+ ) WHERE id = %L RETURNING *
+ $fmt$, select_clause, jitem, item.id) INTO item;
+
+ -- Delete any old thread subs if the user is no longer a fwd recipient
+ DELETE FROM "ThreadSubscription"
+ WHERE "itemId" = item.id
+ -- they aren't in the new forward list
+ AND NOT EXISTS (SELECT 1 FROM jsonb_populate_recordset(NULL::"ItemForward", forward) as nf WHERE "ThreadSubscription"."userId" = nf."userId")
+ -- and they are in the old forward list
+ AND EXISTS (SELECT 1 FROM "ItemForward" WHERE "ItemForward"."itemId" = item.id AND "ItemForward"."userId" = "ThreadSubscription"."userId" );
+
+ -- Automatically subscribe any new forward recipients to the post
+ INSERT INTO "ThreadSubscription" ("itemId", "userId")
+ SELECT item.id, "userId" FROM jsonb_populate_recordset(NULL::"ItemForward", forward)
+ EXCEPT
+ SELECT item.id, "userId" FROM "ItemForward" WHERE "itemId" = item.id;
+
+ -- Delete all old forward entries, to recreate in next command
+ DELETE FROM "ItemForward" WHERE "itemId" = item.id;
+
+ INSERT INTO "ItemForward" ("itemId", "userId", "pct")
+ SELECT item.id, "userId", "pct" FROM jsonb_populate_recordset(NULL::"ItemForward", forward);
+
+ INSERT INTO "PollOption" ("itemId", "option")
+ SELECT item.id, "option" FROM jsonb_array_elements_text(poll_options) o("option");
+
+ -- if this is a job
+ IF item."maxBid" IS NOT NULL THEN
+ PERFORM run_auction(item.id);
+ END IF;
+
+ -- schedule imgproxy job
+ INSERT INTO pgboss.job (name, data, retrylimit, retrybackoff, startafter)
+ VALUES ('imgproxy', jsonb_build_object('id', item.id), 21, true, now() + interval '5 seconds');
+
+ RETURN item;
+END;
+$$;
\ No newline at end of file
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index 3f9f9d0e..59970053 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -264,6 +264,7 @@ model Item {
deletedAt DateTime?
otsFile Bytes?
otsHash String?
+ imgproxyUrls Json?
bounty Int?
rootId Int?
bountyPaidTo Int[]
diff --git a/public/placeholder_click_to_load.png b/public/placeholder_click_to_load.png
new file mode 100644
index 00000000..1a297a9a
Binary files /dev/null and b/public/placeholder_click_to_load.png differ
diff --git a/public/placeholder_processing.png b/public/placeholder_processing.png
new file mode 100644
index 00000000..49487fbb
Binary files /dev/null and b/public/placeholder_processing.png differ
diff --git a/scripts/imgproxy.js b/scripts/imgproxy.js
new file mode 100644
index 00000000..2a34c495
--- /dev/null
+++ b/scripts/imgproxy.js
@@ -0,0 +1,71 @@
+const { PrismaClient, Prisma } = require('@prisma/client')
+
+const prisma = new PrismaClient()
+
+const imgProxyEnabled = process.env.NODE_ENV === 'production' ||
+ (process.env.NEXT_PUBLIC_IMGPROXY_URL && process.env.IMGPROXY_SALT && process.env.IMGPROXY_KEY)
+
+if (!imgProxyEnabled) {
+ console.warn('IMGPROXY_* env vars must be set')
+ process.exit(1)
+}
+
+// queue size determines how many items can be processed at the same time.
+// this is roughly equivalent to how many requests should be in flight.
+// if queue is too large, we might run out of memory and too many requests fail due to timeouts.
+const MAX_QUEUE = 1000
+
+async function main () {
+ console.log('starting imgproxy job', Prisma.AnyNull)
+ const { createImgproxyUrls } = await import('../worker/imgproxy.js')
+ let cursor = 1
+ try {
+ while (true) {
+ const r = await prisma.item.findMany({
+ take: MAX_QUEUE,
+ skip: 1, // Skip the cursor
+ cursor: {
+ id: cursor
+ },
+ where: {
+ imgproxyUrls: {
+ equals: Prisma.AnyNull
+ }
+ },
+ orderBy: {
+ id: 'asc'
+ }
+ })
+
+ if (r.length === 0) {
+ break
+ }
+
+ cursor = r[r.length - 1].id
+
+ for (const { id, ...item } of r) {
+ const isJob = typeof item.maxBid !== 'undefined'
+
+ let imgproxyUrls = {}
+ try {
+ if (item.text) {
+ imgproxyUrls = await createImgproxyUrls(id, item.text, {})
+ }
+ if (item.url && !isJob) {
+ imgproxyUrls = { ...imgproxyUrls, ...(await createImgproxyUrls(id, item.url, {})) }
+ }
+ } catch (err) {
+ console.log('[imgproxy] error:', err)
+ // rethrow for retry
+ throw err
+ }
+
+ console.log('[imgproxy] updating item', id, 'with urls', imgproxyUrls)
+ }
+ }
+ } catch (err) {
+ console.error(err)
+ }
+}
+
+main()
diff --git a/styles/globals.scss b/styles/globals.scss
index 624d2901..b24bd08e 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -193,6 +193,35 @@ $btn-close-bg: none;
margin-bottom: 0 !important;
}
+.modal.fullscreen {
+ padding-right: 0;
+ background-color: color-mix(in srgb, var(--theme-inputBg) 66%, transparent);
+}
+.modal-dialog.fullscreen {
+ margin: 0;
+ max-width: 100vw;
+ max-height: 100vh;
+ max-height: 100svh;
+ background-color: transparent;
+}
+.modal-content.fullscreen {
+ border: none;
+ background-color: transparent;
+}
+.modal-body.fullscreen {
+ width: 100%;
+ height: calc(100svh - 6rem);
+ padding: 0;
+ background-color: transparent;
+}
+.modal-close.fullscreen {
+ padding: 1.25rem;
+}
+.modal-overflow.fullscreen {
+ padding: 1.25rem;
+ margin-top: -10px;
+}
+
.modal-btn {
cursor: pointer;
display: flex;
diff --git a/worker/imgproxy.js b/worker/imgproxy.js
new file mode 100644
index 00000000..d4b249e6
--- /dev/null
+++ b/worker/imgproxy.js
@@ -0,0 +1,194 @@
+import { createHmac } from 'node:crypto'
+import { extractUrls } from '../lib/md.js'
+
+const imgProxyEnabled = process.env.NODE_ENV === 'production' ||
+ (process.env.NEXT_PUBLIC_IMGPROXY_URL && process.env.IMGPROXY_SALT && process.env.IMGPROXY_KEY)
+
+if (!imgProxyEnabled) {
+ console.warn('IMGPROXY_* env vars not set, imgproxy calls are no-ops now')
+}
+
+const IMGPROXY_URL = process.env.NEXT_PUBLIC_IMGPROXY_URL
+const IMGPROXY_SALT = process.env.IMGPROXY_SALT
+const IMGPROXY_KEY = process.env.IMGPROXY_KEY
+
+const cache = new Map()
+
+// based on heuristics. see https://stacker.news/items/266838
+const imageUrlMatchers = [
+ u => u.host === 'i.postimg.cc',
+ u => u.host === 'pbs.twimg.com',
+ u => u.host === 'i.ibb.co',
+ u => u.host === 'nostr.build' || u.host === 'cdn.nostr.build',
+ u => u.host === 'www.zapread.com' && u.pathname.startsWith('/i'),
+ u => u.host === 'i.imgflip.com',
+ u => u.host === 'i.redd.it',
+ u => u.host === 'media.tenor.com',
+ u => u.host === 'i.imgur.com'
+]
+const exclude = [
+ u => u.protocol === 'mailto:',
+ u => u.host.endsWith('.onion') || u.host.endsWith('.b32.ip') || u.host.endsWith('.loki'),
+ u => ['twitter.com', 'x.com', 'nitter.it', 'nitter.at'].some(h => h === u.host),
+ u => u.host === 'stacker.news',
+ u => u.host === 'news.ycombinator.com',
+ u => u.host === 'www.youtube.com' || u.host === 'youtu.be',
+ u => u.host === 'github.com'
+]
+
+function matchUrl (matchers, url) {
+ try {
+ return matchers.some(matcher => matcher(new URL(url)))
+ } catch (err) {
+ console.log(url, err)
+ return false
+ }
+}
+
+function decodeOriginalUrl (imgproxyUrl) {
+ const parts = imgproxyUrl.split('/')
+ const b64Url = parts[parts.length - 1]
+ const originalUrl = Buffer.from(b64Url, 'base64url').toString('utf-8')
+ return originalUrl
+}
+
+export function imgproxy ({ models }) {
+ return async function ({ data: { id, forceFetch = false } }) {
+ if (!imgProxyEnabled) return
+
+ console.log('running imgproxy job', id)
+
+ const item = await models.item.findUnique({ where: { id } })
+
+ const isJob = typeof item.maxBid !== 'undefined'
+
+ let imgproxyUrls = {}
+ try {
+ if (item.text) {
+ imgproxyUrls = await createImgproxyUrls(id, item.text, { forceFetch })
+ }
+ if (item.url && !isJob) {
+ imgproxyUrls = { ...imgproxyUrls, ...(await createImgproxyUrls(id, item.url, { forceFetch })) }
+ }
+ } catch (err) {
+ console.log('[imgproxy] error:', err)
+ // rethrow for retry
+ throw err
+ }
+
+ console.log('[imgproxy] updating item', id, 'with urls', imgproxyUrls)
+
+ await models.item.update({ where: { id }, data: { imgproxyUrls } })
+ }
+}
+
+export const createImgproxyUrls = async (id, text, { forceFetch }) => {
+ const urls = extractUrls(text)
+ console.log('[imgproxy] id:', id, '-- extracted urls:', urls)
+ // resolutions that we target:
+ // - nHD: 640x 360
+ // - qHD: 960x 540
+ // - HD: 1280x 720
+ // - HD+: 1600x 900
+ // - FHD: 1920x1080
+ // - QHD: 2560x1440
+ // reference:
+ // - https://en.wikipedia.org/wiki/Graphics_display_resolution#High-definition_(HD_and_derivatives)
+ // - https://www.browserstack.com/guide/ideal-screen-sizes-for-responsive-design
+ const resolutions = ['640x360', '960x540', '1280x720', '1600x900', '1920x1080', '2560x1440']
+ const imgproxyUrls = {}
+ for (let url of urls) {
+ if (!url) continue
+
+ console.log('[imgproxy] id:', id, '-- processing url:', url)
+ if (url.startsWith(IMGPROXY_URL)) {
+ console.log('[imgproxy] id:', id, '-- proxy url, decoding original url:', url)
+ // backwards compatibility: we used to replace image urls with imgproxy urls
+ url = decodeOriginalUrl(url)
+ console.log('[imgproxy] id:', id, '-- original url:', url)
+ }
+ if (!(await isImageURL(url, { forceFetch }))) {
+ console.log('[imgproxy] id:', id, '-- not image url:', url)
+ continue
+ }
+ imgproxyUrls[url] = {}
+ for (const res of resolutions) {
+ const [w, h] = res.split('x')
+ const processingOptions = `/rs:fill:${w}:${h}`
+ imgproxyUrls[url][`${w}w`] = createImgproxyUrl(url, processingOptions)
+ }
+ }
+ return imgproxyUrls
+}
+
+const createImgproxyUrl = (url, processingOptions) => {
+ const b64Url = Buffer.from(url, 'utf-8').toString('base64url')
+ const target = `${processingOptions}/${b64Url}`
+ const signature = sign(target)
+ return `${IMGPROXY_URL}${signature}${target}`
+}
+
+async function fetchWithTimeout (resource, { timeout = 1000, ...options } = {}) {
+ const controller = new AbortController()
+ const id = setTimeout(() => controller.abort(), timeout)
+
+ const response = await fetch(resource, {
+ ...options,
+ signal: controller.signal
+ })
+ clearTimeout(id)
+
+ return response
+}
+
+const isImageURL = async (url, { forceFetch }) => {
+ if (cache.has(url)) return cache.get(url)
+
+ if (!forceFetch && matchUrl(imageUrlMatchers, url)) {
+ return true
+ }
+ if (!forceFetch && matchUrl(exclude, url)) {
+ return false
+ }
+
+ let isImage
+
+ // first run HEAD with small timeout
+ try {
+ // https://stackoverflow.com/a/68118683
+ const res = await fetchWithTimeout(url, { timeout: 1000, method: 'HEAD' })
+ const buf = await res.blob()
+ isImage = buf.type.startsWith('image/')
+ } catch (err) {
+ console.log(url, err)
+ }
+
+ // For HEAD requests, positives are most likely true positives.
+ // However, negatives may be false negatives
+ if (isImage) {
+ cache.set(url, true)
+ return true
+ }
+
+ // if not known yet, run GET request with longer timeout
+ try {
+ const res = await fetchWithTimeout(url, { timeout: 10000 })
+ const buf = await res.blob()
+ isImage = buf.type.startsWith('image/')
+ } catch (err) {
+ console.log(url, err)
+ }
+
+ cache.set(url, isImage)
+ return isImage
+}
+
+const hexDecode = (hex) => Buffer.from(hex, 'hex')
+
+const sign = (target) => {
+ // https://github.com/imgproxy/imgproxy/blob/master/examples/signature.js
+ const hmac = createHmac('sha256', hexDecode(IMGPROXY_KEY))
+ hmac.update(hexDecode(IMGPROXY_SALT))
+ hmac.update(target)
+ return hmac.digest('base64url')
+}
diff --git a/worker/index.js b/worker/index.js
index 7651fab9..55f19a41 100644
--- a/worker/index.js
+++ b/worker/index.js
@@ -14,6 +14,7 @@ import { nip57 } from './nostr.js'
import fetch from 'cross-fetch'
import { authenticatedLndGrpc } from 'ln-service'
import { views, rankViews } from './views.js'
+import { imgproxy } from './imgproxy.js'
const { loadEnvConfig } = nextEnv
const { ApolloClient, HttpLink, InMemoryCache } = apolloClient
@@ -66,6 +67,7 @@ async function work () {
await boss.work('nip57', nip57(args))
await boss.work('views', views(args))
await boss.work('rankViews', rankViews(args))
+ await boss.work('imgproxy', imgproxy(args))
console.log('working jobs')
}
+ 
setOriginalUrlConsent(true)}
+ />
+ 
setOriginalUrlConsent(true)}
+ />
+