Fix user change (#508)

.github/workflows/dev-deploy.yml

@@ -1,4 +1,4 @@
-name: Deploy to dev
+name: Deploy to DEV
 
 on: workflow_dispatch
 

.github/workflows/prd-deploy.yml

@@ -0,0 +1,52 @@
+name: Deploy to PRD (Web only)
+
+on: workflow_dispatch
+
+env:
+  IMAGE_NAME: agnaistic
+  node-version: '18.4.0'
+  pnpm-version: 8.6.0
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Install Node and PNPM
+        uses: ./.github/actions/install-node-pnpm
+        with:
+          node-version: ${{  env.node-version  }}
+          pnpm-version: ${{  env.pnpm-version  }}
+
+      - name: Get cached dependencies
+        # cache is automatically saved after this job completes. jobs depending on this one will get the latest cached files
+        id: cache-step
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/pnpm-lock.yaml') }}
+
+      - name: Install project dependencies
+        if: steps.cache-step.outputs.cache-hit != 'true'
+        run: |
+          ls -la
+          echo $NODE_ENV
+          pnpm install --frozen-lockfile
+
+      - name: Build frontend
+        run: |
+          pnpm run build:prod
+          cp dist/index.html dist/original.html
+
+      - name: Publish to Dev
+        uses: BetaHuhn/do-spaces-action@v2
+        with:
+          access_key: ${{ secrets.S3_ACCESS_KEY}}
+          secret_key: ${{ secrets.S3_SECRET_KEY }}
+          space_name: ${{ secrets.S3_BUCKET }}
+          space_region: ${{ secrets.S3_REGION }}
+          permission: public-read
+          source: dist

.github/workflows/web-deploy.yml

@@ -39,12 +39,9 @@ jobs:
           pnpm install --frozen-lockfile
 
       - name: Build frontend
-        env:
-          INJECT_SCRIPT: ${{ secrets.INJECT_SCRIPT }}
         run: |
           pnpm run build:prod
           cp dist/index.html dist/original.html
-          node .github/inject.js
 
       - name: Publish - Live
         uses: BetaHuhn/do-spaces-action@v2

common/types/schema.ts

@@ -37,17 +37,6 @@ export namespace AppSchema {
     policies?: boolean
     flags?: string
 
-    /** @deprecated */
-    slots: {
-      enabled: boolean
-      menu: string
-      menuLg: string
-      banner: string
-      mobile: string
-      gtmMenu: string
-      gtmLeader: string
-      gtmContent: string
-    }
     authUrls: string[]
   }
 

srv/api/settings.ts

@@ -37,7 +37,6 @@ export async function getAppConfig() {
       maintenance: config.ui.maintenance,
       patreon: config.ui.patreon,
       policies: config.ui.policies,
-      slots: config.slots,
       authUrls: config.auth.urls,
     }
   }
@@ -57,7 +56,6 @@ async function update() {
 
     appConfig.maintenance = cfg.maintenance || appConfig.maintenance
     appConfig.patreon = cfg.patreon ?? appConfig.patreon
-    appConfig.slots.enabled = cfg.slots?.enabled ?? appConfig.slots.enabled
   } catch (ex) {}
 }
 

srv/config.ts

@@ -106,17 +106,6 @@ export const config = {
   inference: {
     flatChatCompletion: !!env('SIMPLE_COMPLETION', ''),
   },
-  slots: {
-    enabled: env('SLOTS_ENABLED', 'false') === 'true',
-    menu: env('MENU_SLOT', ''),
-    menuLg: env('MENU_LG_SLOT', ''),
-    banner: env('BANNER_SLOT', ''),
-    mobile: env('MOBILE_SLOT', ''),
-
-    gtmMenu: env('GTM_MENU', ''),
-    gtmLeader: env('GTM_LEADER', ''),
-    gtmContent: env('GTM_CONTENT', ''),
-  },
   keys: {
     REPLICATE: env('REPLICATE_KEY', ''),
   },

web/app.css

@@ -64,5 +64,4 @@
 .slot-sticky {
   position: sticky;
   top: 0;
-  z-index: 10;
 }

web/pages/Chat/ChatDetail.tsx

@@ -460,6 +460,14 @@ const ChatDetail: Component = () => {
               style={contentStyles()}
             >
               <section class="flex h-full w-full flex-col justify-end gap-2">
+                <div ref={slotContainer!} class="sticky top-0 flex h-fit w-full justify-center">
+                  <Switch>
+                    <Match when={slots.size().w === 0}>{null}</Match>
+                    <Match when={slotContainer!}>
+                      <Slot sticky="always" slot="content" parent={slotContainer!} />
+                    </Match>
+                  </Switch>
+                </div>
                 <Show when={user.ui.viewMode === 'split'}>
                   <section
                     data-avatar-container
@@ -499,14 +507,7 @@ const ChatDetail: Component = () => {
                         <Button onClick={generateFirst}>Generate Message</Button>
                       </div>
                     </Show>
-                    <div ref={slotContainer!} class="flex w-full justify-center">
-                      <Switch>
-                        <Match when={slots.size().w === 0}>{null}</Match>
-                        <Match when={slotContainer!}>
-                          <Slot sticky slot="content" parent={slotContainer!} />
-                        </Match>
-                      </Switch>
-                    </div>
+                    {/* Original Slot location */}
                     <InfiniteScroll />
                     <For each={chatMsgs()}>
                       {(msg, i) => (

web/shared/Slot.tsx

@@ -1,5 +1,5 @@
 import { Component, JSX, Match, Switch, createEffect, createMemo, createSignal, onCleanup } from 'solid-js'
-import { SettingState, settingStore, userStore } from '../store'
+import { settingStore, userStore } from '../store'
 import { v4 } from 'uuid'
 import { getPagePlatform, getWidthPlatform, useEffect, useResizeObserver } from './hooks'
 import { wait } from '/common/util'
@@ -9,7 +9,7 @@ window.googletag = window.googletag || { cmd: [] }
 export type SlotKind = 'menu' | 'leaderboard' | 'content'
 export type SlotSize = 'sm' | 'lg' | 'xl'
 
-type SlotId = Exclude<keyof SettingState['slots'], 'publisherId'>
+type SlotId = 'agn-menu-sm' | 'agn-menu-lg' | 'agn-leaderboard-sm' | 'agn-leaderboard-lg' | 'agn-leaderboard-xl'
 
 type SlotSpec = { size: string; id: SlotId }
 type SlotDef = {
@@ -20,7 +20,11 @@ type SlotDef = {
   xl?: SlotSpec
 }
 
-const Slot: Component<{ slot: SlotKind; sticky?: boolean; parent: HTMLElement; size?: SlotSize }> = (props) => {
+const MIN_AGE = 60000
+
+const Slot: Component<{ slot: SlotKind; sticky?: boolean | 'always'; parent: HTMLElement; size?: SlotSize }> = (
+  props
+) => {
   let ref: HTMLDivElement | undefined = undefined
   const user = userStore()
 
@@ -29,7 +33,7 @@ const Slot: Component<{ slot: SlotKind; sticky?: boolean; parent: HTMLElement; s
   const [id] = createSignal(`${props.slot}-${v4().slice(0, 8)}`)
   const [done, setDone] = createSignal(false)
   const [adslot, setSlot] = createSignal<googletag.Slot>()
-  const [viewed, setViewed] = createSignal<number>()
+  const [viewable, setViewed] = createSignal<number>()
   const [visible, setVisible] = createSignal(false)
   const [slotId, setSlotId] = createSignal<string>()
 
@@ -44,7 +48,7 @@ const Slot: Component<{ slot: SlotKind; sticky?: boolean; parent: HTMLElement; s
   const log = (...args: any[]) => {
     if (!cfg.publisherId) return
     if (!user.user?.admin && !cfg.flags.reporting) return
-    console.log.apply(null, [`[${id()}]`, ...args, { show: show(), done: done() }])
+    console.log.apply(null, [`[${id()}]`, ...args, `| show=${show()} done=${done()}`])
   }
 
   const resize = useResizeObserver()
@@ -55,22 +59,34 @@ const Slot: Component<{ slot: SlotKind; sticky?: boolean; parent: HTMLElement; s
     log('Parent loaded')
   }
 
+  const specs = createMemo(() => {
+    props.parent?.clientWidth
+    parentSize.size()
+    const spec = getSpec(props.slot, props.parent, log)
+    return spec
+  })
+
+  const tryRefresh = () => {
+    const slot = adslot()
+    const viewed = viewable()
+    if (!slot || typeof viewed !== 'number') return
+    const diff = Date.now() - viewed
+
+    log('Trying', Math.round(diff / 1000))
+    const canRefresh = visible() && diff >= MIN_AGE
+
+    if (canRefresh) {
+      setViewed()
+      googletag.cmd.push(() => {
+        googletag.pubads().refresh([slot])
+      })
+      log('Refreshed')
+    }
+  }
+
   useEffect(() => {
     const refresher = setInterval(() => {
-      const slot = adslot()
-      const last = viewed()
-      if (!slot || typeof last !== 'number') return
-
-      const diff = Date.now() - last
-      const canRefresh = visible() && diff >= 60000
-
-      if (canRefresh) {
-        setViewed()
-        googletag.cmd.push(() => {
-          googletag.pubads().refresh([slot])
-        })
-        log('Refreshed')
-      }
+      tryRefresh()
     }, 15000)
 
     const onLoaded = (evt: googletag.events.SlotOnloadEvent) => {
@@ -87,8 +103,13 @@ const Slot: Component<{ slot: SlotKind; sticky?: boolean; parent: HTMLElement; s
 
     const onVisChange = (evt: googletag.events.SlotVisibilityChangedEvent) => {
       if (evt.slot.getSlotElementId() !== id()) return
-      log('Visibility', evt.inViewPercentage)
-      setVisible(evt.inViewPercentage > 0)
+      setVisible((prev) => {
+        const next = evt.inViewPercentage >= 50
+        if (!prev && next) {
+          tryRefresh()
+        }
+        return next
+      })
     }
 
     const onRequested = (evt: googletag.events.SlotRequestedEvent) => {
@@ -130,16 +151,15 @@ const Slot: Component<{ slot: SlotKind; sticky?: boolean; parent: HTMLElement; s
     googletag.destroySlots([remove])
   })
 
-  const specs = createMemo(() => {
-    const spec = getSpec(props.slot, props.parent, log)
-    return spec
-  })
-
   createEffect(async () => {
     if (!cfg.ready || !cfg.slotsLoaded || !cfg.publisherId) return
 
+    resize.size()
+
     if (ref && !resize.loaded()) {
       resize.load(ref)
+      log('Not loaded')
+      return
     }
 
     setShow(true)
@@ -161,6 +181,7 @@ const Slot: Component<{ slot: SlotKind; sticky?: boolean; parent: HTMLElement; s
         }
 
         slot.addService(googletag.pubads())
+        googletag.pubads().collapseEmptyDivs()
         if (!user.user?.admin) {
         }
 
@@ -185,6 +206,7 @@ const Slot: Component<{ slot: SlotKind; sticky?: boolean; parent: HTMLElement; s
     log('Rendered')
 
     setTimeout(() => {
+      if (props.sticky === 'always') return
       setStick(false)
 
       if (props.parent) {
@@ -196,7 +218,7 @@ const Slot: Component<{ slot: SlotKind; sticky?: boolean; parent: HTMLElement; s
   const style = createMemo<JSX.CSSProperties>(() => {
     if (!stick()) return {}
 
-    return { position: 'sticky', top: '0', 'z-index': 10 }
+    return { position: 'sticky', top: '0' }
   })
 
   return (
@@ -257,10 +279,11 @@ function toSize(size: string): [number, number] {
 }
 
 function toPixels(size: string) {
+  // const [w, h] = size.split('x')
+  // return { width: `${+w + 2}px`, height: `${+h + 2}px` }
   return {}
-  const [w, h] = size.split('x')
-  return { width: `${+w + 2}px`, height: `${+h + 2}px` }
 }
+
 const win: any = window
 win.getSlotById = getSlotById
 

web/shared/hooks.ts

@@ -38,7 +38,7 @@ export function useWindowSize(): {
 
 export function usePane() {
   const windowSize = useWindowSize()
-  const isSmallScreen = createMemo(() => windowSize.width() < 768)
+  const isSmallScreen = createMemo(() => windowSize.width() < 800)
   const paneDisplay = createMemo(() => (isSmallScreen() ? 'popup' : 'pane'))
   return paneDisplay
 }

web/store/data/storage.ts

@@ -18,7 +18,6 @@ const emptyCfg: AppSchema.AppConfig = {
   imagesSaved: false,
   selfhosting: false,
   registered: [],
-  slots: { banner: '', menu: '', mobile: '', menuLg: '', gtmContent: '', gtmLeader: '', gtmMenu: '', enabled: false },
   authUrls: [],
 }