lightnet 3.6.1 → 3.7.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # lightnet
 
+## 3.7.0
+
+### Minor Changes
+
+- [#288](https://github.com/LightNetDev/LightNet/pull/288) [`008553f`](https://github.com/LightNetDev/LightNet/commit/008553f7c016931b617ba2c632e0b473e32bad8d) Thanks [@smn-cds](https://github.com/smn-cds)! - Improves support for media items with more than one audio file
+  - Audio details page shows embedded player for each mp3 inside the media item's content array
+  - Audio player stops playing a mp3 when the next is started
+  - Audio player resumes with next mp3 when one mp3 ends
+
+### Patch Changes
+
+- [#288](https://github.com/LightNetDev/LightNet/pull/288) [`008553f`](https://github.com/LightNetDev/LightNet/commit/008553f7c016931b617ba2c632e0b473e32bad8d) Thanks [@smn-cds](https://github.com/smn-cds)! - Reorganized dependencies
+
+  If you are using npm as the package manager, you can remove these
+  dependencies from your `package.json`.
+  - sharp
+  - @astrojs/react
+  - @astrojs/tailwind
+
+- [#288](https://github.com/LightNetDev/LightNet/pull/288) [`008553f`](https://github.com/LightNetDev/LightNet/commit/008553f7c016931b617ba2c632e0b473e32bad8d) Thanks [@smn-cds](https://github.com/smn-cds)! - ‼️ Breaking changes on experimental custom details page components
+  - Design of `ShareButton` has changed from a gray button to a underlined text
+  - `MainDetailsSection` now already contains the `ShareButton`
+
 ## 3.6.1
 
 ### Patch Changes

package/__e2e__/fixtures/basics/node_modules/.bin/astro

@@ -2,7 +2,11 @@
 basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
 
 case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
 esac
 
 if [ -z "$NODE_PATH" ]; then

package/__e2e__/fixtures/basics/node_modules/.bin/tailwind

@@ -2,7 +2,11 @@
 basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
 
 case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
 esac
 
 if [ -z "$NODE_PATH" ]; then

package/__e2e__/fixtures/basics/node_modules/.bin/tailwindcss

@@ -2,7 +2,11 @@
 basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
 
 case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
 esac
 
 if [ -z "$NODE_PATH" ]; then

package/__e2e__/fixtures/basics/node_modules/.bin/tsc

@@ -2,7 +2,11 @@
 basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
 
 case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
 esac
 
 if [ -z "$NODE_PATH" ]; then

package/__e2e__/fixtures/basics/node_modules/.bin/tsserver

@@ -2,7 +2,11 @@
 basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
 
 case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
 esac
 
 if [ -z "$NODE_PATH" ]; then

package/__e2e__/fixtures/basics/package.json

@@ -8,7 +8,7 @@
     "@astrojs/tailwind": "^6.0.2",
     "@lightnet/decap-admin": "^3.1.1",
     "astro": "^5.11.0",
-    "lightnet": "^3.6.0",
+    "lightnet": "^3.7.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sharp": "^0.33.5",

package/package.json

@@ -2,7 +2,7 @@
   "name": "lightnet",
   "type": "module",
   "license": "MIT",
-  "version": "3.6.1",
+  "version": "3.7.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -32,21 +32,18 @@
     "./pages/api/search.ts": "./src/pages/api/search.ts"
   },
   "peerDependencies": {
-    "@astrojs/react": "^4.1.0",
-    "@astrojs/tailwind": "^6.0.0",
     "astro": "^5.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "sharp": "^0.33.4",
-    "tailwindcss": "^3.4.17",
-    "typescript": "^5.5.3"
+    "tailwindcss": ">=3.4.0 <4.0.0"
   },
   "dependencies": {
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/tailwind": "^1.2.0",
+    "@astrojs/react": "^4.1.0",
+    "@astrojs/tailwind": "^6.0.0",
     "@tailwindcss/typography": "^0.5.16",
     "@tanstack/react-virtual": "^3.13.12",
-    "@types/react": "^19.1.8",
     "daisyui": "^4.12.24",
     "fuse.js": "^7.1.0",
     "i18next": "^25.3.2",
@@ -54,6 +51,8 @@
     "yaml": "^2.8.0"
   },
   "devDependencies": {
+    "typescript": "^5.5.3",
+    "@types/react": "^19.1.8",
     "@playwright/test": "^1.53.2",
     "@types/node": "^22.16.2",
     "vitest": "^3.2.4"

package/src/pages/details-page/AudioDetailsPage.astro

@@ -1,10 +1,8 @@
 ---
-import { getMediaItem } from "../../content/get-media-items"
+import AudioPanel from "./components/AudioPanel.astro"
 import ContentSection from "./components/ContentSection.astro"
 import DescriptionSection from "./components/DescriptionSection.astro"
 import DetailsPage from "./components/DetailsPage.astro"
-import AudioPlayer from "./components/main-details/AudioPlayer.astro"
-import ShareButton from "./components/main-details/ShareButton.astro"
 import MainDetailsSection from "./components/MainDetailsSection.astro"
 import MediaCollectionsSection from "./components/MediaCollectionsSection.astro"
 import MoreDetailsSection from "./components/MoreDetailsSection.astro"
@@ -14,16 +12,13 @@ export type Props = {
 }
 
 const { mediaId } = Astro.props
-const audioSrc = (await getMediaItem(mediaId)).data.content[0].url
 ---
 
 <DetailsPage mediaId={mediaId}>
-  <MainDetailsSection mediaId={mediaId}>
-    <AudioPlayer src={audioSrc} className="mt-10 w-full" />
-    <ShareButton className="mt-4 min-w-40" />
-  </MainDetailsSection>
+  <MainDetailsSection thumbnailSize="md" mediaId={mediaId} />
+  <AudioPanel mediaId={mediaId} className="mt-10" />
   <DescriptionSection mediaId={mediaId} />
-  <ContentSection mediaId={mediaId} />
+  <ContentSection mediaId={mediaId} minimumItems={1} />
   <MediaCollectionsSection mediaId={mediaId} />
   <MoreDetailsSection mediaId={mediaId} />
 </DetailsPage>

package/src/pages/details-page/DefaultDetailsPage.astro

@@ -3,7 +3,6 @@ import ContentSection from "./components/ContentSection.astro"
 import DescriptionSection from "./components/DescriptionSection.astro"
 import DetailsPage from "./components/DetailsPage.astro"
 import OpenButton from "./components/main-details/OpenButton.astro"
-import ShareButton from "./components/main-details/ShareButton.astro"
 import MainDetailsSection from "./components/MainDetailsSection.astro"
 import MediaCollectionsSection from "./components/MediaCollectionsSection.astro"
 import MoreDetailsSection from "./components/MoreDetailsSection.astro"
@@ -18,11 +17,12 @@ const { mediaId, coverStyle, openActionLabel = "ln.details.open" } = Astro.props
 ---
 
 <DetailsPage mediaId={mediaId}>
-  <MainDetailsSection mediaId={mediaId} coverStyle={coverStyle}>
-    <div class="mt-10 flex flex-col justify-center gap-4 sm:justify-start">
-      <OpenButton mediaId={mediaId} openActionLabel={openActionLabel} />
-      <ShareButton />
-    </div>
+  <MainDetailsSection mediaId={mediaId} thumbnailStyle={coverStyle}>
+    <OpenButton
+      className="mt-8"
+      mediaId={mediaId}
+      openActionLabel={openActionLabel}
+    />
   </MainDetailsSection>
   <DescriptionSection mediaId={mediaId} />
   <ContentSection mediaId={mediaId} />

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

@@ -0,0 +1,73 @@
+---
+import { AstroError } from "astro/errors"
+
+import { getMediaItem } from "../../../content/get-media-items"
+import { createContentMetadata } from "../utils/create-content-metadata"
+import AudioPlayer from "./AudioPlayer.astro"
+
+interface Props {
+  mediaId: string
+  className?: string
+}
+
+const { mediaId, className } = Astro.props
+const { t } = Astro.locals.i18n
+
+const item = await getMediaItem(mediaId)
+
+const content = item.data.content
+  .map((c) => createContentMetadata(c))
+  .filter((c) => c.extension === "mp3")
+
+if (!content.length) {
+  throw new AstroError(
+    `Missing mp3 content for ${mediaId}`,
+    `Add at least one mp3 file to the content array of /src/media/${mediaId}.json`,
+  )
+}
+---
+
+<ol
+  class="mx-auto mt-10 flex max-w-screen-md flex-col gap-10 px-4 md:px-8"
+  class:list={[className]}
+  id="audio-panel"
+>
+  {
+    content.map((c) => (
+      <li>
+        {content.length > 1 && <div class="mb-3 font-bold">{t(c.label)}</div>}
+        <AudioPlayer className="w-full" src={c.url} />
+      </li>
+    ))
+  }
+</ol>
+<script>
+  document.addEventListener("astro:after-swap", () => {
+    initAudioPanel()
+  })
+  initAudioPanel()
+  function initAudioPanel() {
+    const audioPanel = document.getElementById("audio-panel")
+    if (!audioPanel) {
+      return
+    }
+    const audios = Array.from(audioPanel.querySelectorAll("audio"))
+
+    audios.forEach((audio, index) => {
+      audio.addEventListener("play", () => {
+        audios.forEach((otherAudio) => {
+          if (otherAudio !== audio) {
+            otherAudio.pause()
+          }
+        })
+      })
+
+      audio.addEventListener("ended", () => {
+        const nextAudio = audios[index + 1]
+        if (nextAudio) {
+          nextAudio.play()
+        }
+      })
+    })
+  }
+</script>

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="" />

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"