lightnet 3.6.1 → 3.8.0

package/src/pages/details-page/components/{main-details/AudioPlayer.astro → AudioPlayer.astro}

@@ -6,7 +6,7 @@ type Props = {
   className?: string
 }
 const { src, className } = Astro.props
-if (!src.endsWith(".mp3")) {
+if (!src.toLowerCase().endsWith(".mp3")) {
   throw new AstroError(
     `Unsupported audio file ${src}`,
     "To fix the issue, reference a mp3 file.",

package/src/pages/details-page/components/ContentSection.astro

@@ -8,11 +8,14 @@ import {
 
 interface Props {
   mediaId: string
+  minimumItems?: number
 }
 
-const item = await getMediaItem(Astro.props.mediaId)
+const { mediaId, minimumItems = 2 } = Astro.props
 
-if (item.data.content.length < 2) {
+const item = await getMediaItem(mediaId)
+
+if (item.data.content.length < minimumItems) {
   return
 }
 

package/src/pages/details-page/components/DescriptionSection.astro

@@ -17,7 +17,7 @@ const { direction, code: lang } = resolveLanguage(language)
   description && (
     <div
       dir={direction}
-      class="prose prose-gray mx-auto mt-16 max-w-screen-md px-4 md:mt-20 md:px-8"
+      class="prose prose-gray mx-auto mt-8 max-w-screen-md px-4 md:mt-12 md:px-8"
       set:html={await markdownToHtml(description)}
       lang={lang}
       id="description"

package/src/pages/details-page/components/MainDetailsSection.astro

@@ -1,23 +1,26 @@
 ---
 import Authors from "./main-details/Authors.astro"
-import Cover from "./main-details/Cover.astro"
+import ShareButton from "./main-details/ShareButton.astro"
+import Thumbnail from "./main-details/Thumbnail.astro"
 import Title from "./main-details/Title.astro"
 
 export type Props = {
   mediaId: string
-  coverStyle?: "default" | "book"
+  thumbnailStyle?: "default" | "book"
+  thumbnailSize?: "md" | "lg"
 }
 
-const { mediaId, coverStyle = "default" } = Astro.props
+const { mediaId, thumbnailStyle, thumbnailSize } = Astro.props
 ---
 
 <div
   class="mx-auto mt-10 flex max-w-screen-md flex-col items-center gap-8 px-4 sm:mt-20 sm:flex-row sm:items-start sm:gap-14 md:px-8"
 >
-  <Cover mediaId={mediaId} style={coverStyle} />
+  <Thumbnail size={thumbnailSize} mediaId={mediaId} style={thumbnailStyle} />
   <div class="flex w-full grow flex-col items-center sm:items-start">
     <Title className="text-center sm:text-start" mediaId={mediaId} />
-    <Authors className="text-center sm:text-start" mediaId={mediaId} />
+    <Authors className="mt-2" mediaId={mediaId} />
+    <ShareButton className="mt-3" />
     <slot />
   </div>
 </div>

package/src/pages/details-page/components/VideoDetailsSection.astro

@@ -26,5 +26,5 @@ const item = await getMediaItem(mediaId)
 >
   <Title mediaId={mediaId} />
   <Authors mediaId={mediaId} />
-  <ShareButton className="mt-6 md:mt-10" />
+  <ShareButton className="mt-3" />
 </div>

package/src/pages/details-page/components/main-details/Authors.astro

@@ -12,8 +12,8 @@ const authors = item.data.authors?.join(", ")
 
 {
   authors && (
-    <p class="mt-2 text-xl sm:text-2xl" class:list={Astro.props.className}>
+    <div class="text-xl sm:text-2xl" class:list={Astro.props.className}>
       {authors}
-    </p>
+    </div>
   )
 }

package/src/pages/details-page/components/main-details/OpenButton.astro

@@ -6,8 +6,9 @@ import { createContentMetadata } from "../../utils/create-content-metadata"
 interface Props {
   mediaId: string
   openActionLabel: string
+  className?: string
 }
-const { mediaId, openActionLabel } = Astro.props
+const { mediaId, openActionLabel, className } = Astro.props
 const item = await getMediaItem(mediaId)
 const content = createContentMetadata(item.data.content[0])
 ---
@@ -17,6 +18,7 @@ const content = createContentMetadata(item.data.content[0])
   href={content.url}
   target={content.target}
   hreflang={item.data.language}
+  class:list={[className]}
 >
   {
     content.isExternal && (

package/src/pages/details-page/components/main-details/ShareButton.astro

@@ -7,7 +7,7 @@ interface Props {
 ---
 
 <button
-  class="flex cursor-pointer items-center justify-center gap-2 rounded-2xl bg-gray-200 px-6 py-3 font-bold uppercase text-gray-600 shadow-sm hover:bg-gray-300"
+  class="flex cursor-pointer items-center gap-2 font-bold text-gray-700 underline"
   class:list={[Astro.props.className]}
   id="share-btn"
   ><Icon className="mdi--share" ariaLabel="" />
@@ -22,37 +22,25 @@ interface Props {
   </div>
 </div>
 <script>
-  document.addEventListener("astro:after-swap", () => {
-    initShareButton()
-  })
-  initShareButton()
-
-  function initShareButton() {
-    const btn = document.querySelector("#share-btn")
-    if (!btn) {
-      return
+  const btn = document.querySelector("#share-btn")
+  btn?.addEventListener("click", () => {
+    if (navigator.share) {
+      navigator
+        .share({
+          url: window.location.href,
+        })
+        .catch((e) => console.debug("Could not share", e))
+    } else {
+      navigator.clipboard
+        .writeText(window.location.href)
+        .then(() => {
+          const toast = document.querySelector<HTMLElement>("#share-success")!
+          toast.style.opacity = "100%"
+          setTimeout(() => {
+            toast.style.opacity = "0%"
+          }, 3000)
+        })
+        .catch((error) => console.log("Error copying URL to clipboard:", error))
     }
-    btn?.addEventListener("click", () => {
-      if (navigator.share) {
-        navigator
-          .share({
-            url: window.location.href,
-          })
-          .catch((e) => console.debug("Could not share", e))
-      } else {
-        navigator.clipboard
-          .writeText(window.location.href)
-          .then(() => {
-            const toast = document.querySelector<HTMLElement>("#share-success")!
-            toast.style.opacity = "100%"
-            setTimeout(() => {
-              toast.style.opacity = "0%"
-            }, 3000)
-          })
-          .catch((error) =>
-            console.log("Error copying URL to clipboard:", error),
-          )
-      }
-    })
-  }
+  })
 </script>

package/src/pages/details-page/components/main-details/{Cover.astro → Thumbnail.astro}

@@ -6,12 +6,23 @@ import { getMediaItem } from "../../../../content/get-media-items"
 interface Props {
   mediaId: string
   style?: "default" | "book"
+  size?: "md" | "lg"
 }
-const { mediaId, style = "default" } = Astro.props
+const { mediaId, style = "default", size = "lg" } = Astro.props
 
 const item = await getMediaItem(mediaId)
 const image = item.data.image
 const isPortraitImage = image.height > image.width
+const imageSizes = {
+  md: {
+    css: isPortraitImage ? "h-52 w-auto" : "h-auto w-52",
+    query: "13rem",
+  },
+  lg: {
+    css: isPortraitImage ? "h-52 w-auto sm:h-72" : "h-auto w-52 sm:w-72",
+    query: "(max-width: 640px) 13rem, 18rem",
+  },
+}
 ---
 
 <div
@@ -19,10 +30,10 @@ const isPortraitImage = image.height > image.width
   class:list={style === "book" ? "rounded-sm" : "rounded-md"}
 >
   <Image
-    class:list={isPortraitImage ? "h-52 w-auto sm:h-72" : "h-auto w-52 sm:w-72"}
+    class:list={imageSizes[size].css}
     alt=""
     widths={[256, 512, 768, 1024]}
-    sizes="(max-width: 640px) 13rem, 18rem"
+    sizes={imageSizes[size].query}
     src={image}
     quality="high"
     loading="eager"

package/src/pages/search-page/components/SearchList.tsx

@@ -33,7 +33,6 @@ export default function SearchList({
   const listRef = useRef<HTMLDivElement | null>(null)
   const [rowHeight, setRowHeight] = useState(256)
   const { results, isLoading } = useSearch({
-    currentLocale,
     categories,
     languages,
     mediaTypes,

package/src/pages/search-page/hooks/use-search.ts

@@ -4,29 +4,13 @@ import { useEffect, useMemo, useRef, useState } from "react"
 import type { SearchItem, SearchResponse } from "../../api/search-response"
 import { observeSearchQuery, type SearchQuery } from "../utils/search-query"
 
-declare global {
-  interface Window {
-    lnSearchState?: {
-      fuse: Fuse<SearchItem>
-      items: SearchItem[]
-      locale?: string
-    }
-  }
-}
-
 interface Context {
   categories: Record<string, string>
   mediaTypes: Record<string, { name: string }>
   languages: Record<string, { name: string }>
-  currentLocale?: string
 }
 
-export function useSearch({
-  currentLocale,
-  categories,
-  mediaTypes,
-  languages,
-}: Context) {
+export function useSearch({ categories, mediaTypes, languages }: Context) {
   const fuse = useRef<Fuse<SearchItem>>(undefined)
   const [allItems, setAllItems] = useState<SearchItem[]>([])
   const [isLoading, setIsLoading] = useState(true)
@@ -83,27 +67,12 @@ export function useSearch({
           ignoreLocation: true,
         })
         setAllItems(items)
-        window.lnSearchState = {
-          locale: currentLocale,
-          items,
-          fuse: fuse.current,
-        }
       } catch (error) {
         console.error(error)
       }
       setIsLoading(false)
     }
-    // try restore old search index only if
-    // locale is still the same because we add translated values to the
-    // search index
-    const { lnSearchState } = window
-    if (lnSearchState && lnSearchState.locale === currentLocale) {
-      fuse.current = lnSearchState.fuse
-      setAllItems(lnSearchState.items)
-      setIsLoading(false)
-    } else {
-      fetchData()
-    }
+    fetchData()
     return removeSearchQueryObserver
   }, [])
 

package/src/utils/paths.ts

@@ -21,12 +21,26 @@ export function detailsPagePath(
  */
 export function searchPagePath(
   locale: string | undefined,
-  filter?: { category: string },
+  filter?: {
+    category?: string
+    language?: string
+    search?: string
+    type?: string
+  },
 ) {
   const searchParams = new URLSearchParams()
   if (filter?.category) {
     searchParams.append("category", filter.category)
   }
+  if (filter?.language) {
+    searchParams.append("language", filter.language)
+  }
+  if (filter?.search) {
+    searchParams.append("search", filter.search)
+  }
+  if (filter?.type) {
+    searchParams.append("type", filter.type)
+  }
   const query = searchParams.size ? `?${searchParams.toString()}` : ""
   return `/${locale}/media${query}`
 }