lightnet 3.11.0 → 3.12.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # lightnet
 
+## 3.12.0
+
+### Minor Changes
+
+- [#351](https://github.com/LightNetDev/LightNet/pull/351) [`a1f63bf`](https://github.com/LightNetDev/LightNet/commit/a1f63bfa30448fdf58bfb1ff24007caa750349e0) Thanks [@smn-cds](https://github.com/smn-cds)! - Add an external fallback UI for audio content so non-mp3 URLs show a player-style link that opens in a new tab.
+
+- [#351](https://github.com/LightNetDev/LightNet/pull/351) [`a1f63bf`](https://github.com/LightNetDev/LightNet/commit/a1f63bfa30448fdf58bfb1ff24007caa750349e0) Thanks [@smn-cds](https://github.com/smn-cds)! - Add a fallback in the video player so any video URL can be used on the "video" details page. Unsupported providers now render a poster-style link that opens the video on the external site.
+
 ## 3.11.0
 
 ### Minor Changes

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

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.6_@types+node@25.0.3_jiti@2.4.2_lightningcss@1.29.1_rollup@4.54.0_terser@5.39.0_typescript@5.9.3_yaml@2.8.2/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.6_@types+node@25.0.3_jiti@2.4.2_lightningcss@1.29.1_rollup@4.54.0_terser@5.39.0_typescript@5.9.3_yaml@2.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.6_@types+node@25.0.3_jiti@2.4.2_lightningcss@1.29.1_rollup@4.55.1_terser@5.39.0_typescript@5.9.3_yaml@2.8.2/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.6_@types+node@25.0.3_jiti@2.4.2_lightningcss@1.29.1_rollup@4.55.1_terser@5.39.0_typescript@5.9.3_yaml@2.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.6_@types+node@25.0.3_jiti@2.4.2_lightningcss@1.29.1_rollup@4.54.0_terser@5.39.0_typescript@5.9.3_yaml@2.8.2/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.6_@types+node@25.0.3_jiti@2.4.2_lightningcss@1.29.1_rollup@4.54.0_terser@5.39.0_typescript@5.9.3_yaml@2.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.6_@types+node@25.0.3_jiti@2.4.2_lightningcss@1.29.1_rollup@4.55.1_terser@5.39.0_typescript@5.9.3_yaml@2.8.2/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.16.6_@types+node@25.0.3_jiti@2.4.2_lightningcss@1.29.1_rollup@4.55.1_terser@5.39.0_typescript@5.9.3_yaml@2.8.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../astro/astro.js" "$@"

package/__e2e__/fixtures/basics/package.json

@@ -8,7 +8,7 @@
     "@astrojs/tailwind": "^6.0.2",
     "@lightnet/decap-admin": "^3.1.4",
     "astro": "^5.16.6",
-    "lightnet": "^3.11.0",
+    "lightnet": "^3.12.0",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
     "sharp": "^0.34.5",

package/package.json

@@ -3,7 +3,7 @@
   "description": "LightNet makes it easy to run your own digital media library.",
   "type": "module",
   "license": "MIT",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -50,16 +50,16 @@
     "@hookform/resolvers": "^5.2.2",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/tailwind": "^1.2.0",
-    "@mdxeditor/editor": "^3.52.1",
+    "@mdxeditor/editor": "^3.52.3",
     "@tailwindcss/typography": "^0.5.19",
-    "@tanstack/react-virtual": "^3.13.13",
+    "@tanstack/react-virtual": "^3.13.17",
     "daisyui": "^4.12.24",
     "embla-carousel": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
     "fuse.js": "^7.1.0",
     "i18next": "^25.7.3",
     "marked": "^16.4.2",
-    "react-hook-form": "^7.69.0",
+    "react-hook-form": "^7.70.0",
     "yaml": "^2.8.2"
   },
   "devDependencies": {

package/src/admin/components/form/LazyLoadedMarkdownEditor.tsx

@@ -6,6 +6,8 @@ import {
   type CodeBlockEditorProps,
   codeBlockPlugin,
   CreateLink,
+  diffSourcePlugin,
+  DiffSourceToggleWrapper,
   headingsPlugin,
   linkDialogPlugin,
   linkPlugin,
@@ -22,6 +24,7 @@ import {
   type Control,
   Controller,
   type FieldValues,
+  get,
   type Path,
 } from "react-hook-form"
 
@@ -42,7 +45,10 @@ export default function LazyLoadedMarkdownEditor<
     <Controller
       control={control}
       name={name}
-      render={({ field: { onBlur, onChange, value, ref } }) => (
+      render={({
+        field: { onBlur, onChange, value, ref },
+        formState: { defaultValues },
+      }) => (
         <MDXEditor
           markdown={value ?? ""}
           onBlur={onBlur}
@@ -68,15 +74,16 @@ export default function LazyLoadedMarkdownEditor<
             linkDialogPlugin(),
             quotePlugin(),
             markdownShortcutPlugin(),
+            diffSourcePlugin({ diffMarkdown: get(defaultValues, name) }),
             toolbarPlugin({
               toolbarContents: () => (
-                <>
+                <DiffSourceToggleWrapper>
                   <UndoRedo />
                   <BoldItalicUnderlineToggles />
                   <BlockTypeSelect />
                   <ListsToggle options={["bullet", "number"]} />
                   <CreateLink />
-                </>
+                </DiffSourceToggleWrapper>
               ),
               toolbarClassName: "!rounded-none !bg-slate-200",
             }),

package/src/admin/components/form/atoms/Label.tsx

@@ -22,9 +22,9 @@ export default function Label({
       return "bg-rose-800 text-white"
     }
     if (isDirty) {
-      return "bg-slate-400 text-slate-950"
+      return "bg-slate-600 text-slate-50"
     }
-    return "bg-slate-300 text-slate-800"
+    return "bg-slate-300 text-slate-700"
   }
   return (
     <div

package/src/admin/components/form/utils/get-border-class.ts

@@ -16,7 +16,7 @@ export const getBorderClass = ({
     return "border border-rose-800 " + focusColors(focusWithin)
   }
   if (isDirty) {
-    return "border border-slate-400 " + focusColors(focusWithin)
+    return "border border-slate-600 " + focusColors(focusWithin)
   }
   return "border border-slate-300 " + focusColors(focusWithin)
 }

package/src/admin/pages/media/fields/Content.tsx

@@ -42,8 +42,8 @@ export default function Content({
           return <span></span>
         }
         return (
-          <span className="ms-1 flex items-center gap-1 rounded-lg bg-sky-700 px-2 py-1 text-xs uppercase text-slate-100">
-            <Icon className="text-sm mdi--star" ariaLabel="" />
+          <span className="ms-1 flex items-center gap-1 rounded-lg bg-slate-200 px-2 py-1 text-xs font-bold uppercase text-slate-600">
+            <Icon className="text-sm text-sky-700 mdi--star" ariaLabel="" />
             {t("ln.admin.primary-content")}
           </span>
         )

package/src/components/VideoPlayer.astro

@@ -1,6 +1,9 @@
 ---
 import type { ImageMetadata } from "astro"
 import { getImage } from "astro:assets"
+import { Image } from "astro:assets"
+
+import Icon from "./Icon"
 
 interface Props {
   /**
@@ -12,21 +15,43 @@ interface Props {
    */
   title?: string
   /**
-   * Poster image to use for the mp4 video player.
+   * Poster image to use for the mp4 video player or external fallback.
    */
   image?: ImageMetadata
 }
 
 const { url, title, image: imageMetadata } = Astro.props
 
-const { host, id, image } = await parseUrl(url)
+const { host, id, image, href } = await parseUrl(url, imageMetadata)
+const { t } = Astro.locals.i18n
 
-async function parseUrl(urlToParse: string): Promise<{
-  host: "youtube" | "vimeo" | "mp4"
+async function parseUrl(
+  urlToParse: string,
+  imageMetadata?: ImageMetadata,
+): Promise<{
+  host: "youtube" | "vimeo" | "mp4" | "external"
   id: string | null
   image?: string
+  href?: string
 }> {
-  const url = new URL(urlToParse)
+  const resolvedImage = async () => {
+    if (!imageMetadata) {
+      return undefined
+    }
+    return (await getImage({ src: imageMetadata, format: "webp" })).src
+  }
+
+  let url: URL
+  try {
+    url = new URL(urlToParse)
+  } catch {
+    return {
+      host: "external",
+      id: null,
+      href: urlToParse,
+      image: await resolvedImage(),
+    }
+  }
   // https://www.youtube.com/embed/ABC123abc
   // https://www.youtube.com/watch?v=ABC123abc
   if (url.hostname === "www.youtube.com") {
@@ -54,12 +79,15 @@ async function parseUrl(urlToParse: string): Promise<{
 
   // https://domain.com/video.mp4
   if (url.pathname.endsWith(".mp4")) {
-    const image =
-      imageMetadata &&
-      (await getImage({ src: imageMetadata, format: "webp" })).src
+    const image = await resolvedImage()
     return { host: "mp4", id: url.toString(), image }
   }
-  throw Error(`Unsupported video url: ${urlToParse}`)
+  return {
+    host: "external",
+    id: null,
+    href: url.toString(),
+    image: await resolvedImage(),
+  }
 }
 ---
 
@@ -86,6 +114,42 @@ async function parseUrl(urlToParse: string): Promise<{
       <video class="h-full w-full" controls preload="auto" poster={image}>
         <source src={id} type="video/mp4" />
       </video>
-    ) : null
+    ) : (
+      <a
+        class="group relative flex h-full w-full items-center justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-white/80 focus-visible:ring-offset-2 focus-visible:ring-offset-black"
+        href={href ?? url}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        {imageMetadata ? (
+          <Image
+            src={imageMetadata}
+            alt={title ?? ""}
+            class="h-full w-full object-cover"
+          />
+        ) : (
+          <div class="flex h-full w-full items-center justify-center bg-gray-900 text-gray-200">
+            <span class="text-sm font-medium">{t("ln.external-link")}</span>
+          </div>
+        )}
+        <div class="absolute inset-0 z-10 bg-black/35 transition group-hover:bg-black/50" />
+        <div class="absolute inset-0 z-20 flex items-center justify-center">
+          <span class="flex h-14 w-14 items-center justify-center rounded-full bg-white/90 text-black shadow-lg transition group-hover:scale-105">
+            <svg
+              class="h-7 w-7"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+              aria-hidden="true"
+            >
+              <path d="M8 5v14l11-7z" />
+            </svg>
+          </span>
+        </div>
+        <div class="absolute bottom-0 end-0 start-0 z-20 flex items-center gap-2 rounded bg-black/70 px-4 py-4 text-sm font-medium text-white backdrop-blur md:text-sm">
+          <Icon className="mdi--external-link" ariaLabel="" />
+          {t("ln.external-link")}
+        </div>
+      </a>
+    )
   }
 </div>

package/src/i18n/translations/en.yml

@@ -60,12 +60,11 @@ ln.previous: Previous
 # English: Next
 ln.next: Next
 
-# Accessibility label for an external link.
-# This is only "visible" to a screen-reader.
+# Hint for an external link.
 #
-# English: External link
+# English: External link - opens in a new tab
 # Used on: https://sk8-ministries.pages.dev/en/media/ollie-with-integrity--en/
-ln.external-link: External link
+ln.external-link: External link - opens in a new tab
 
 # Title for the search page.
 #

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

@@ -1,6 +1,4 @@
 ---
-import { AstroError } from "astro/errors"
-
 import { getMediaItem } from "../../../content/get-media-items"
 import { createContentMetadata } from "../utils/create-content-metadata"
 import AudioPlayer from "./AudioPlayer.astro"
@@ -15,16 +13,7 @@ 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`,
-  )
-}
+const content = item.data.content.map((c) => createContentMetadata(c))
 ---
 
 <ol

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

@@ -1,20 +1,52 @@
 ---
-import { AstroError } from "astro/errors"
+import Icon from "../../../components/Icon"
 
 type Props = {
   src: string
   className?: string
 }
 const { src, className } = Astro.props
-if (!src.toLowerCase().endsWith(".mp3")) {
-  throw new AstroError(
-    `Unsupported audio file ${src}`,
-    "To fix the issue, reference a mp3 file.",
-  )
-}
+const { t } = Astro.locals.i18n
+
+const normalizedSrc = src.trim()
+const audioExtension = normalizedSrc.split("?")[0].split("#")[0].toLowerCase()
+const isMp3 = audioExtension.endsWith(".mp3")
 ---
 
-<audio class="rounded-2xl" class:list={[className]} src={src} controls></audio>
+{
+  isMp3 ? (
+    <audio class="rounded-2xl" class:list={[className]} src={src} controls />
+  ) : (
+    <a
+      class="group flex w-full items-center gap-4 rounded-2xl border border-gray-200 bg-white px-4 py-4 shadow-sm transition hover:border-gray-300 hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-900/70"
+      class:list={[className]}
+      href={src}
+      target="_blank"
+      rel="noreferrer noopener"
+      aria-label={t("ln.external-link")}
+    >
+      <span class="flex h-12 w-12 items-center justify-center rounded-full border border-gray-700 text-gray-700 shadow-sm transition group-hover:scale-105">
+        <svg
+          class="h-6 w-6"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <path d="M8 5v14l11-7z" />
+        </svg>
+      </span>
+      <div class="flex h-full grow flex-col gap-3">
+        <span class="flex items-center gap-2 font-semibold text-gray-900">
+          <Icon className="mdi--external-link" ariaLabel="" />
+          {t("ln.external-link")}
+        </span>
+        <div class="h-2 w-full rounded-full bg-gray-200">
+          <div class="h-full w-2 rounded-full bg-gray-400" />
+        </div>
+      </div>
+    </a>
+  )
+}
 
 <style>
   audio::-webkit-media-controls-enclosure {