Merge branch 'master' into 489-account-switching

api/paidAction/itemCreate.js

@@ -227,7 +227,7 @@ export async function onPaid ({ invoice, id }, context) {
   for (const { refereeItem } of item.itemReferrers) {
     notifyItemMention({ models, referrerItem: item, refereeItem }).catch(console.error)
   }
-  notifyUserSubscribers({ models, item }).catch(console.error)
+  notifyUserSubscribers({ models: tx, item }).catch(console.error)
   notifyTerritorySubscribers({ models, item }).catch(console.error)
 }
 

components/text.js

@@ -22,6 +22,7 @@ import { UNKNOWN_LINK_REL } from '@/lib/constants'
 import isEqual from 'lodash/isEqual'
 import UserPopover from './user-popover'
 import ItemPopover from './item-popover'
+import classNames from 'classnames'
 
 // Explicitely defined start/end tags & which CSS class from text.module.css to apply
 export const rehypeSuperscript = () => rehypeStyler('<sup>', '</sup>', styles.superscript)
@@ -264,7 +265,7 @@ export default memo(function Text ({ rel, imgproxyUrls, children, tab, itemId, o
   const rehypePlugins = useMemo(() => [rehypeInlineCodeProperty, rehypeSuperscript, rehypeSubscript], [])
 
   return (
-    <div className={`${styles.text} ${show ? styles.textUncontained : overflowing ? styles.textContained : ''}`} ref={containerRef}>
+    <div className={classNames(styles.text, topLevel && styles.topLevel, show ? styles.textUncontained : overflowing && styles.textContained)} ref={containerRef}>
       <ReactMarkdown
         components={components}
         remarkPlugins={remarkPlugins}

components/text.module.css

@@ -106,6 +106,12 @@
     margin-bottom: .5rem;
     white-space: pre-wrap;
     word-break: break-word;
+    --grid-gap: 0.5rem;
+}
+
+.text.topLevel .p {
+    margin-bottom: 0.75rem;
+    --grid-gap: 0.75rem;
 }
 
 .text pre {
@@ -128,24 +134,63 @@
     margin-bottom: .5rem;
 }
 
-.text .mediaContainer {
+.mediaContainer {
     display: block;
-    margin-top: .5rem;
     margin-bottom: .5rem;
-    width: 100%;
+    width: calc(100% - var(--grid-gap));
+    max-width: calc(100% - var(--grid-gap));
     height: auto;
     overflow: hidden;
     max-height: 25vh;
     aspect-ratio: var(--aspect-ratio);
 }
 
+.p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) {
+    display: inline-block;
+    width: min-content;
+    max-width: calc(100% - var(--grid-gap));
+    margin-bottom: 0;
+}
+
+.mediaContainer ~ .mediaContainer {
+    display: inline-block;
+    width: min-content;
+    margin-right: var(--grid-gap);
+}
+
+.p:has(> .mediaContainer:only-child) ~ .p:has(> .mediaContainer:only-child) > .mediaContainer:only-child {
+    margin-right: var(--grid-gap);
+}
+
+.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) {
+    display: inline-block;
+    width: min-content;
+    max-width: calc(100% - var(--grid-gap));
+    margin-bottom: 0;
+}
+
+.p:has(> .mediaContainer:only-child):has(+ .p > .mediaContainer:only-child) > .mediaContainer:only-child {
+    margin-right: var(--grid-gap);
+}
+
+.mediaContainer:has(+ .mediaContainer) {
+    display: inline-block;
+    width: min-content;
+    margin-right: var(--grid-gap);
+}
+
+.mediaContainer:first-child:has(+ .mediaContainer) {
+    margin-top: var(--grid-gap);
+}
+
 .mediaContainer img, .mediaContainer video {
     display: block;
     object-fit: contain;
     width: auto;
     max-height: inherit;
     height: 100%;
     aspect-ratio: var(--aspect-ratio);
+    block-size: stretch;
 }
 
 .mediaContainer img {
@@ -155,7 +200,6 @@
 }
 
 .mediaContainer.topLevel {
-    margin-top: .75rem;
     margin-bottom: .75rem;
     max-height: 35vh;
 }
@@ -190,7 +234,7 @@ img.fullScreen {
     margin-bottom: 0;
 }
 
-.text li+li {
+.text li {
     margin-top: .25rem;
 }
 
@@ -260,12 +304,12 @@ img.fullScreen {
 
 .videoWrapper {
     max-width: 320px;
-    padding-right: 15px;
-    margin: '0.5rem 0',
+    margin: 0.5rem 0;
 }
 
 .videoWrapper.topLevel {
     max-width: 640px;
+    margin: 0.75rem 0;
 }
 
 .videoContainer {

lib/url.js

@@ -119,7 +119,7 @@ export function parseEmbedUrl (href) {
       }
     }
 
-    if (hostname.endsWith('spotify.com') && pathname.startsWith('/track')) {
+    if (hostname.endsWith('spotify.com') && (pathname.startsWith('/track') || pathname.startsWith('/episode'))) {
       return {
         provider: 'spotify'
       }

lib/webPush.js

@@ -129,7 +129,15 @@ export const notifyUserSubscribers = async ({ models, item }) => {
     INNER JOIN users ON users.id = "UserSubscription"."followeeId"
     WHERE "followeeId" = $1 AND ${isPost ? '"postsSubscribedAt"' : '"commentsSubscribedAt"'} IS NOT NULL
     AND NOT EXISTS (SELECT 1 FROM "Mute" WHERE "Mute"."muterId" = "UserSubscription"."followerId" AND "Mute"."mutedId" = $1)
-    `, Number(item.userId))
+    -- ignore subscription if user was already notified of item as a reply
+    AND NOT EXISTS (
+      SELECT 1 FROM "Reply"
+      INNER JOIN users follower ON follower.id = "UserSubscription"."followerId"
+      WHERE "Reply"."itemId" = $2
+      AND "Reply"."ancestorUserId" = follower.id
+      AND follower."noteAllDescendants"
+    )
+    `, Number(item.userId), Number(item.id))
     const subType = isPost ? 'POST' : 'COMMENT'
     const tag = `FOLLOW-${item.userId}-${subType}`
     await Promise.allSettled(userSubsExcludingMutes.map(({ followerId, followeeName }) => sendUserNotification(followerId, {

pages/settings/index.js

@@ -108,8 +108,8 @@ export default function Settings ({ ssrData }) {
   return (
     <Layout>
       <div className='pb-3 w-100 mt-2' style={{ maxWidth: '600px' }}>
-        {hasOnlyOneAuthMethod(settings?.authMethods) && <AuthBanner />}
         <SettingsHeader />
+        {hasOnlyOneAuthMethod(settings?.authMethods) && <AuthBanner />}
         <Form
           enableReinitialize
           initial={{

styles/item.module.css

@@ -17,6 +17,7 @@
 
 .fullItemContainer {
     margin-bottom: .5rem;
+    padding-right: 15px;
 }
 
 .fullItemContainer:empty {