[#142] distorted coverimage in global player

src/components/ContentBlock/ImageBlock.tsx

@@ -25,9 +25,11 @@ const ImageBlock = (props: Props) => {
         type={BlockType.IMAGE}
         date={document?.modifiedAt ? new Date(document?.modifiedAt) : null}
       />
+      {data.alt.length > 0 && (
         <Typography variant={'body2'} component={'p'}>
           {data.alt}
         </Typography>
+      )}
       <ContentBlockFooter data={document} order={order} />
     </Container>
   )
@@ -40,6 +42,10 @@ const Container = styled.div`
   padding: 0 0;
   position: relative;
 
+  > a {
+    margin-bottom: 8px;
+  }
+
   figure {
     margin: 0;
     padding: 0;

src/components/Episode/Header/Episode.Player.tsx

@@ -108,6 +108,7 @@ const EpisodePlayer = ({
       podcast: showTitle,
       url: url as string,
       coverImage: coverImage ?? null,
+      path: router.asPath,
     })
   }, [title, showTitle, coverImage])
 

src/components/GlobalAudioPlayer/GlobalAudioPlayer.tsx

@@ -3,6 +3,7 @@ import { CloseIcon, Typography } from '@acid-info/lsd-react'
 import styled from '@emotion/styled'
 import { useHookstate } from '@hookstate/core'
 import Image from 'next/image'
+import Link from 'next/link'
 import React, { useEffect, useRef } from 'react'
 import ReactPlayer from 'react-player'
 import { PlayerType } from '../LpePlayer/Controls/Controls'
@@ -158,12 +159,17 @@ export default function GlobalAudioPlayer() {
           <Thumbnail
             src={epState.value.coverImage.url}
             alt={epState.value.coverImage.alt}
-            width={48}
             height={48}
+            width={
+              48 *
+              (epState.value.coverImage.width / epState.value.coverImage.height)
+            }
           />
         )}
-        <EpisodeData>
-          <Typography variant="body2">{epState.value.title}</Typography>
+        <EpisodeData href={epState.value.path} title={epState.value.title}>
+          <Typography variant="body2" genericFontFamily={'serif'}>
+            {epState.value.title}
+          </Typography>
           <Typography variant="body3">{epState.value.podcast}</Typography>
         </EpisodeData>
         <CloseIconContainer>
@@ -219,7 +225,6 @@ const Container = styled.div<{ visible: boolean }>`
 
 const RightMenu = styled.div`
   display: flex;
-  width: 40%;
   align-items: center;
   justify-content: flex-end;
   margin-left: 32px;
@@ -230,10 +235,17 @@ const RightMenu = styled.div`
   }
 `
 
-const EpisodeData = styled.div`
+const EpisodeData = styled(Link)`
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  text-decoration: none;
+
+  > :first-child {
+    width: 85%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
 
   @media (max-width: 768px) {
     display: none !important;

src/components/GlobalAudioPlayer/episode.state.ts

@@ -6,6 +6,7 @@ export type EpisodeState = {
   podcast: string
   url: string
   coverImage: LPE.Post.ImageBlock | null
+  path: string
 }
 
 export const defaultEpisodeState: EpisodeState = {
@@ -13,6 +14,7 @@ export const defaultEpisodeState: EpisodeState = {
   podcast: '',
   url: '',
   coverImage: null,
+  path: '',
 }
 
 export const episodeState =

src/configs/ui.configs.ts

@@ -11,7 +11,7 @@ export const uiConfigs = {
     smallColumn: 2,
   },
   searchResult: {
-    numberOfParagraphsShowInTopResult: 4,
+    numberOfParagraphsShowInTopResult: 3,
     numberOfImagesShowInTopResult: 3,
     numberOfTotalBlocksInListView: 20,
   },

src/pages/api/og.tsx

@@ -1,8 +1,8 @@
+import { siteConfigs } from '@/configs/site.configs'
 import { LPE } from '@/types/lpe.types'
 import { ImageResponse } from '@vercel/og'
 import { handleMethodNotAllowedResponse } from 'next/dist/server/future/route-modules/helpers/response-handlers'
 import { NextRequest } from 'next/server'
-import { siteConfigs } from '@/configs/site.configs'
 
 export const config = {
   runtime: 'edge',
@@ -24,7 +24,9 @@ export default async function handler(request: NextRequest) {
   const searchParams = new URL(href).searchParams
   const contentType = searchParams.get('contentType')
   const title =
-    contentType == null ? 'LOGOS→PRESS ENGINE' : searchParams.get('title')
+    contentType == null
+      ? siteConfigs.heroTitle.join('')
+      : searchParams.get('title')
   const image = searchParams.get('image') || ''
   const alt = searchParams.get('alt') || ''
   const pagePath = searchParams.get('pagePath') || 'press.logos.co'