lightnet 3.10.8 → 3.12.0

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

@@ -0,0 +1,150 @@
+import { type Control, useWatch } from "react-hook-form"
+
+import Icon from "../../../../components/Icon"
+import { useI18n } from "../../../../i18n/react/use-i18n"
+import { createContentMetadata } from "../../../../pages/details-page/utils/create-content-metadata"
+import Button from "../../../components/form/atoms/Button"
+import FileUpload from "../../../components/form/atoms/FileUpload"
+import DynamicArray from "../../../components/form/DynamicArray"
+import Input from "../../../components/form/Input"
+import type { MediaItem } from "../../../types/media-item"
+
+export default function Content({
+  control,
+  defaultValue,
+}: {
+  control: Control<MediaItem>
+  defaultValue: MediaItem["content"]
+}) {
+  const { t } = useI18n()
+  return (
+    <DynamicArray
+      control={control}
+      name="content"
+      required
+      label="ln.admin.content"
+      renderElement={(index) => (
+        <div className="flex w-full flex-col gap-6">
+          <URLInput
+            control={control}
+            defaultValue={defaultValue[index]?.url}
+            index={index}
+          />
+          <LabelInput
+            control={control}
+            defaultValue={defaultValue[index]?.label}
+            index={index}
+          />
+        </div>
+      )}
+      renderElementMeta={(index) => {
+        if (index !== 0) {
+          return <span></span>
+        }
+        return (
+          <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>
+        )
+      }}
+      renderAddButton={({ addElement, index }) => (
+        <div className="flex w-2/3 flex-col items-center gap-2 pb-2 pt-4">
+          <Button
+            variant="secondary"
+            onClick={() =>
+              addElement({ url: "" }, { focusName: `content.${index}.url` })
+            }
+          >
+            <Icon className="mdi--link-variant" ariaLabel="" />
+            {t("ln.admin.add-link")}
+          </Button>
+          <span className="text-sm font-bold uppercase text-slate-500">
+            {t("ln.admin.or")}
+          </span>
+          <FileUpload
+            title="ln.admin.files-upload-title"
+            description="ln.admin.files-upload-description"
+            icon="mdi--file-upload-outline"
+            multiple
+            onUpload={(...files: File[]) =>
+              files.forEach((file, i) => {
+                addElement(
+                  { url: `/files/${file.name}`, file },
+                  { focusName: `content.${index + i}.url` },
+                )
+              })
+            }
+          />
+        </div>
+      )}
+    />
+  )
+}
+
+function URLInput({
+  control,
+  defaultValue,
+  index,
+}: {
+  defaultValue?: string
+  index: number
+  control: Control<MediaItem>
+}) {
+  const { url, file } = useWatch({ control, name: `content.${index}` })
+  const { t } = useI18n()
+  const isFile = url.startsWith("/files/")
+
+  const label = () => {
+    if (!isFile) {
+      return "ln.admin.link"
+    }
+    if (!file) {
+      return "ln.admin.file"
+    }
+    return t("ln.admin.file-upload", {
+      fileSize: (file.size / 1024 / 1024).toFixed(1),
+    })
+  }
+
+  return (
+    <Input
+      control={control}
+      label={label()}
+      disabled={isFile}
+      labelSize="small"
+      required
+      preserveHintSpace={false}
+      defaultValue={defaultValue}
+      name={`content.${index}.url`}
+    />
+  )
+}
+
+function LabelInput({
+  control,
+  defaultValue,
+  index,
+}: {
+  control: Control<MediaItem>
+  defaultValue?: string
+  index: number
+}) {
+  const url = useWatch({ control, name: `content.${index}.url` })
+  const { label: defaultLabel } = createContentMetadata({ url })
+
+  return (
+    <Input
+      name={`content.${index}.label`}
+      control={control}
+      label="ln.admin.label"
+      labelSize="small"
+      placeholder={defaultLabel}
+      preserveHintSpace={false}
+      defaultValue={defaultValue}
+      registerOptions={{
+        setValueAs: (value) => value?.trim() || undefined,
+      }}
+    />
+  )
+}

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

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react"
-import { type Control } from "react-hook-form"
+import { type Control, useController } from "react-hook-form"
 
 import ErrorMessage from "../../../components/form/atoms/ErrorMessage"
 import FileUpload from "../../../components/form/atoms/FileUpload"
@@ -11,6 +11,30 @@ import type { MediaItem } from "../../../types/media-item"
 
 const acceptedFileTypes = ["image/jpeg", "image/png", "image/webp"] as const
 
+const sanitizeImageUrl = (url?: string) => {
+  if (!url) {
+    return undefined
+  }
+  const trimmed = url.trim()
+  if (!trimmed) {
+    return undefined
+  }
+  if (
+    trimmed.startsWith("/") ||
+    trimmed.startsWith("./") ||
+    trimmed.startsWith("blob:")
+  ) {
+    return trimmed
+  }
+  if (/^https?:\/\//i.test(trimmed)) {
+    return trimmed
+  }
+  if (/^data:image\/(png|jpe?g|webp);/i.test(trimmed)) {
+    return trimmed
+  }
+  return undefined
+}
+
 export default function Image({
   control,
   defaultValue,
@@ -20,6 +44,7 @@ export default function Image({
   defaultValue: MediaItem["image"]
   mediaId: string
 }) {
+  const { field } = useController({ control, name: "image" })
   const objectUrlRef = useRef<string | null>(null)
   const [previewSrc, setPreviewSrc] = useState<string | undefined>(
     defaultValue.previewSrc,
@@ -48,7 +73,15 @@ export default function Image({
     }
     const objectUrl = URL.createObjectURL(file)
     objectUrlRef.current = objectUrl
+
+    const nameParts = file.name.split(".")
+    const extension = nameParts.pop()
     setPreviewSrc(objectUrl)
+    field.onChange({
+      ...field.value,
+      path: `./images/${mediaId}.${extension}`,
+      file,
+    })
   }
 
   return (
@@ -57,30 +90,30 @@ export default function Image({
         <Label
           label="ln.admin.image"
           isDirty={isDirty}
+          required
           isInvalid={!!errorMessage}
         />
       </label>
       <div
-        className={`flex w-full items-stretch gap-4 rounded-lg rounded-ss-none border bg-gray-50 px-4 py-3 shadow-inner outline-none transition-colors ${isDirty && !errorMessage ? "border-gray-700" : "border-gray-300"} ${errorMessage ? "border-rose-800" : ""} `}
+        className={`flex w-full items-stretch gap-4 rounded-xl rounded-ss-none border bg-slate-50 px-4 py-3 shadow-inner outline-none transition-colors focus-within:border-sky-700 focus-within:ring-1 focus-within:ring-sky-700 ${isDirty && !errorMessage ? "border-slate-700" : "border-slate-300"} ${errorMessage ? "border-rose-800" : ""} `}
       >
-        <div className="flex h-32 w-32 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-gray-200 p-1">
+        <div className="flex h-32 w-32 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-slate-200 p-1">
           <img
-            src={previewSrc}
+            src={sanitizeImageUrl(previewSrc)}
             alt=""
             className="h-full w-full object-contain"
           />
         </div>
         <FileUpload
-          name="image"
-          control={control}
-          onFileChange={updateImage}
-          destinationPath="./images"
+          title="ln.admin.image-upload-title"
+          description="ln.admin.image-upload-description"
+          onUpload={updateImage}
+          onBlur={field.onBlur}
           acceptedFileTypes={acceptedFileTypes}
-          fileName={mediaId}
         />
       </div>
       <ErrorMessage message={errorMessage} />
-      <Hint preserveSpace={true} label="ln.admin.image-hint" />
+      <Hint preserveSpace={true} />
     </div>
   )
 }

package/src/admin/pages/media/media-item-store.ts

@@ -3,13 +3,14 @@ import { writeFile, writeJson } from "./file-system"
 
 export const updateMediaItem = async (id: string, item: MediaItem) => {
   const imagePath = await saveImage(item.image)
+  await Promise.all(item.content.map(saveContentFile))
   return writeJson(
     `/src/content/media/${id}.json`,
     mapToContentSchema(item, imagePath),
   )
 }
 
-const ensureRelativeImagePath = (path: string) => {
+const ensureRelativePath = (path: string) => {
   const trimmed = path.trim()
   if (!trimmed) {
     return ""
@@ -21,7 +22,7 @@ const ensureRelativeImagePath = (path: string) => {
 }
 
 const saveImage = async (image: MediaItem["image"]) => {
-  const relativePath = ensureRelativeImagePath(image?.path ?? "")
+  const relativePath = ensureRelativePath(image?.path ?? "")
   if (!relativePath || !image?.file) {
     return relativePath
   }
@@ -33,11 +34,24 @@ const saveImage = async (image: MediaItem["image"]) => {
   return relativePath
 }
 
+const saveContentFile = async ({ url, file }: MediaItem["content"][number]) => {
+  if (!file) {
+    return
+  }
+  const path = `/public/${url.replace(/^\//, "")}`
+  return writeFile(
+    path,
+    await file.arrayBuffer(),
+    file.type || "application/octet-stream",
+  )
+}
+
 const mapToContentSchema = (item: MediaItem, imagePath: string) => {
   return {
     ...item,
     image: imagePath,
     authors: flatten(item.authors),
+    content: item.content.map(({ file: _, ...content }) => content),
     categories: flatten(item.categories),
   }
 }

package/src/admin/types/media-item.ts

@@ -8,6 +8,7 @@ const GTE_0 = "ln.admin.errors.gte-0"
 const INTEGER = "ln.admin.errors.integer"
 const UNIQUE_ELEMENTS = "ln.admin.errors.unique-elements"
 const FILE_SIZE_EXCEEDED = "ln.admin.error.file-size-exceeded"
+const NON_EMPTY_LIST = "ln.admin.errors.non-empty-list"
 
 const unique = <TArrayItem>(path: Extract<keyof TArrayItem, string>) => {
   return (values: TArrayItem[], ctx: RefinementCtx) => {
@@ -67,6 +68,14 @@ export const mediaItemSchema = z.object({
     previewSrc: z.string(),
     file: fileShape,
   }),
+  content: z
+    .object({
+      url: z.string().nonempty(NON_EMPTY_STRING),
+      file: fileShape,
+      label: z.string().optional(),
+    })
+    .array()
+    .min(1, NON_EMPTY_LIST),
 })
 
 export type MediaItem = z.input<typeof mediaItemSchema>

package/src/components/SearchInput.astro

@@ -12,11 +12,11 @@ const { t } = Astro.locals.i18n
   action={`/${Astro.currentLocale}/media`}
   method="get"
   role="search"
-  class="group dy-join w-full rounded-2xl shadow-sm outline-2 outline-offset-2 outline-gray-400 group-focus-within:outline"
+  class="group flex w-full rounded-2xl shadow-sm outline outline-2 outline-offset-2 outline-transparent transition-all ease-in-out group-focus-within:outline-gray-400"
   class:list={[Astro.props.className]}
 >
   <input
-    class="dy-input dy-join-item grow rounded-2xl bg-gray-100/95 text-gray-900 placeholder-gray-500 shadow-inner focus:outline-none"
+    class="grow rounded-s-2xl bg-gray-100/95 px-4 py-3 text-gray-900 placeholder-gray-500 shadow-inner focus:outline-none"
     enterkeyhint="search"
     type="search"
     name="search"
@@ -24,7 +24,7 @@ const { t } = Astro.locals.i18n
   />
   <button
     type="submit"
-    class="dy-btn dy-join-item rounded-2xl border-gray-100/95 bg-gray-800 text-gray-50 hover:bg-gray-950 hover:text-gray-300"
+    class="flex items-center rounded-e-2xl border border-gray-100/95 bg-gray-800 px-4 py-3 text-gray-50 hover:bg-gray-950 hover:text-gray-300"
   >
     <Icon className="mdi--magnify" ariaLabel={t("ln.search.title")} />
   </button>

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/react/prepare-i18n-config.ts

@@ -1,5 +1,5 @@
 /**
- * Prepares the configuration object passed from an Astro page to the React i18n context.
+ * Prepares the configuration object passed from an Astro page to the react i18n context.
  * Resolves every requested translation key (supporting wildcard suffixes like `ln.dashboard.*`)
  * so the React island receives only the strings it needs.
  *

package/src/i18n/react/use-i18n.ts

@@ -4,7 +4,7 @@ import { I18nContext } from "./i18n-context"
 
 /**
  * Retrieves the current i18n helpers from context.
- * Must be called inside a React tree wrapped with `I18nContext.Provider`, otherwise throws.
+ * Must be called inside a react tree wrapped with `I18nContext.Provider`, otherwise throws.
  */
 export const useI18n = () => {
   const i18n = useContext(I18nContext)

package/src/i18n/translations/TRANSLATION-STATUS.md

@@ -53,6 +53,10 @@ All keys have been translated. ✅
 
 All keys have been translated. ✅
 
+## **UR** ([ur.yml](./ur.yml))
+
+All keys have been translated. ✅
+
 ## **ZH** ([zh.yml](./zh.yml))
 
 All keys have been translated. ✅

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/i18n/translations/ur.yml

@@ -0,0 +1,25 @@
+ln.header.open-main-menu: مرکزی مینو کھولیں
+ln.header.select-language: زبان منتخب کریں
+ln.home.title: ہوم
+ln.category: زمرہ
+ln.categories: زمروں
+ln.language: زبان
+ln.languages: زبانیں
+ln.type: قسم
+ln.previous: پچھلا
+ln.next: اگلا
+ln.external-link: بیرونی لنک
+ln.search.title: تلاش
+ln.search.placeholder: میڈیا تلاش کریں
+ln.search.all-languages: تمام زبانیں
+ln.search.all-types: تمام اقسام
+ln.search.all-categories: تمام زمرے
+ln.search.no-results: کوئی نتیجہ نہیں ملا
+ln.details.open: کھولیں
+ln.details.share: شیئر کریں
+ln.details.part-of-collection: مجموعے کا حصہ
+ln.details.download: ڈاؤن لوڈ کریں
+ln.share.url-copied-to-clipboard: لنک کاپی ہو گیا
+ln.404.page-not-found: صفحہ نہیں ملا
+ln.404.go-to-the-home-page: ہوم پیج پر جائیں
+ln.footer.powered-by-lightnet: لائٹ نیٹ کے ذریعے چلایا گیا

package/src/i18n/translations.ts

@@ -18,6 +18,7 @@ const builtInTranslations = {
   pt: () => import("./translations/pt.yml?raw"),
   ru: () => import("./translations/ru.yml?raw"),
   uk: () => import("./translations/uk.yml?raw"),
+  ur: () => import("./translations/ur.yml?raw"),
   zh: () => import("./translations/zh.yml?raw"),
 } as const
 

package/src/layouts/Page.astro

@@ -7,7 +7,6 @@ import { resolveLanguage } from "../i18n/resolve-language"
 import Favicon from "./components/Favicon.astro"
 import Footer from "./components/Footer.astro"
 import Header from "./components/Header.astro"
-import PreloadReact from "./components/PreloadReact"
 import ViewTransition from "./components/ViewTransition.astro"
 
 interface Props {
@@ -45,6 +44,5 @@ const { direction } = resolveLanguage(currentLocale)
       <slot />
     </main>
     {CustomFooter ? <CustomFooter /> : <Footer />}
-    <PreloadReact client:idle />
   </body>
 </html>

package/src/layouts/components/Menu.astro

@@ -24,7 +24,7 @@ const { icon, label, disabled } = Astro.props
     data-menu-panel
     aria-hidden="true"
     inert
-    class="pointer-events-none absolute right-3 top-full mt-px flex w-48 origin-top scale-y-90 flex-col overflow-hidden rounded-b-md bg-white py-3 opacity-0 shadow-lg transition-all duration-100 ease-out"
+    class="pointer-events-none absolute end-3 top-full mt-px flex w-48 origin-top scale-y-90 flex-col overflow-hidden rounded-b-md bg-white py-3 opacity-0 shadow-lg transition-all duration-100 ease-out"
   >
     <slot />
   </ul>

package/src/pages/404Route.astro

@@ -7,7 +7,9 @@ import Page from "../layouts/Page.astro"
     <p class="pb-8 pt-20 text-center text-3xl opacity-80">
       {Astro.locals.i18n.t("ln.404.page-not-found")}
     </p>
-    <a href={`/${Astro.locals.i18n.defaultLocale}`} class="dy-btn"
+    <a
+      href={`/${Astro.locals.i18n.defaultLocale}`}
+      class="rounded-2xl bg-gray-200 px-8 py-4 text-sm font-bold transition-colors ease-in-out hover:bg-gray-400"
       >{Astro.locals.i18n.t("ln.404.go-to-the-home-page")}</a
     >
   </div>

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 {