create-bearminion 1.4.0 → 1.6.0

package/template/src/components/sections/video/VideoFrame.astro

@@ -1,60 +0,0 @@
----
-import type { Image } from 'bearminion'
-import { imageUrl } from '../../../lib/image-url'
-import { cn } from '../../../lib/cn'
-
-interface Props {
-  /** A video file URL, or `placeholder` for an empty frame. */
-  src: string
-  poster?: Image
-  label?: string
-  loop: boolean
-  roundedClass?: string
-  class?: string
-}
-
-const { src, poster, label, loop, roundedClass = 'rounded-card-lg', class: className } = Astro.props
-const placeholder = src === 'placeholder'
-
-const posterSrc = await imageUrl(poster)
-// A looping video starts muted and without controls once the page script sees it on screen. Until then, and without
-// JavaScript or with reduced motion, it keeps its controls so it can still be played.
-const playback = loop ? { muted: true, loop: true, controls: true, 'data-video-loop': '' } : { controls: true }
----
-
-<div class={cn('relative overflow-hidden bg-surface', placeholder && 'placeholder-stripes aspect-video', roundedClass, className)}>
-  {
-    placeholder ? (
-      <div class="absolute inset-0 flex flex-col items-center justify-center gap-3 p-6 text-center">
-        <span class="flex size-14 items-center justify-center rounded-full bg-fg text-bg" aria-hidden="true">
-          <svg viewBox="0 0 16 16" class="ms-0.5 size-5" fill="currentColor"><path d="M4 2.5v11l9-5.5z" /></svg>
-        </span>
-        <span class="font-mono text-[0.6875rem] tracking-[0.04em] text-muted">Add a video link in the section settings</span>
-      </div>
-    ) : (
-      <video class="block h-auto w-full" src={src} poster={posterSrc} preload="metadata" playsinline aria-label={label} {...playback} />
-    )
-  }
-</div>
-
-<script>
-  /** Looping videos play while at least a quarter of them is on screen, and not at all with reduced motion. */
-  function bindLoopingVideos() {
-    const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches
-    for (const video of document.querySelectorAll<HTMLVideoElement>('video[data-video-loop]')) {
-      if (video.dataset.bound === 'true') continue
-      video.dataset.bound = 'true'
-      if (reduced) continue
-      video.controls = false
-      new IntersectionObserver(
-        ([entry]) => {
-          if (entry?.isIntersecting) void video.play().catch(() => (video.controls = true))
-          else video.pause()
-        },
-        { threshold: 0.25 },
-      ).observe(video)
-    }
-  }
-  bindLoopingVideos()
-  document.addEventListener('bearminion:preview', bindLoopingVideos)
-</script>

package/template/src/components/sections/video/definition.ts

@@ -1,58 +0,0 @@
-import { z } from 'zod'
-import { defineSection, imageSchema, richTextSchema, textSchema, withEmphasis } from 'bearminion'
-import { VIDEO_FILE } from '../media/source'
-import { accent, eyebrow, heading } from '../shared'
-import { videoWireframe } from './wireframe'
-
-export const videoVariants = ['framed', 'wide', 'split'] as const
-
-/** `controls`: the visitor presses play. `loop`: plays silently and on repeat while it is on screen, like a moving image. */
-export const videoPlayback = ['controls', 'loop'] as const
-
-/**
- * A video file the browser can play: a path in the site's `public/` folder (`/videos/demo.webm`) or an `https://` link
- * to the file. `placeholder` shows an empty frame. A page link such as YouTube does not play in a video element.
- */
-export const videoSourceSchema = z
-  .string()
-  .min(1)
-  .refine((value) => value === 'placeholder' || VIDEO_FILE.test(value), {
-    message:
-      'Use a link to a video file ending in .mp4 or .webm, or a path in public/ such as /videos/demo.webm. YouTube and similar page links do not play here.',
-  })
-
-export const videoSchema = withEmphasis({
-  eyebrow,
-  heading,
-  intro: richTextSchema.optional(),
-  video: videoSourceSchema,
-  /** What the video shows, read out by screen readers. */
-  label: textSchema.optional(),
-  /** Shown before the video plays and while it loads. */
-  poster: imageSchema.optional(),
-  caption: textSchema.optional(),
-  playback: z.enum(videoPlayback).default('controls'),
-})
-
-export type VideoProps = z.infer<typeof videoSchema>
-
-export const video = defineSection({
-  type: 'video',
-  label: 'Video',
-  description: 'A video with a heading, a poster image and a caption.',
-  schema: videoSchema,
-  defaults: {
-    eyebrow: 'Watch',
-    heading: 'See it in action.',
-    marks: accent('See it in action.', 'in action.'),
-    intro: 'A short video says more than a page of text. Link an .mp4 or .webm file and add a poster image to show before it plays.',
-    video: 'placeholder',
-    label: 'Product walkthrough',
-    playback: 'controls',
-  },
-  variants: videoVariants,
-  defaultVariant: 'framed',
-  options: [{ name: 'playback', label: 'Playback', type: 'enum', choices: videoPlayback, default: 'controls' }],
-  optional: { props: ['eyebrow', 'heading', 'intro', 'label', 'poster', 'caption'] },
-  wireframe: videoWireframe,
-})

package/template/src/components/sections/video/wireframe.ts

@@ -1,9 +0,0 @@
-import { defineWireframe } from 'bearminion'
-
-/** Add section picker thumbnail: [left %, top %, width %, height %, kind]. */
-export const videoWireframe = defineWireframe([
-  [30, 10, 40, 8, 'title'],
-  [24, 22, 52, 4, 'text'],
-  [12, 32, 76, 58, 'dark'],
-  [45, 54, 10, 14, 'light'],
-])