Skip to content

Releases: gfazioli/mantine-video

1.1.4

23 Jun 05:51

Choose a tag to compare

⚡ Improvements

Mantine 9.3.1 → 9.4.0

@mantine/core and @mantine/hooks are aligned to 9.4.0 (latest 9.x minor) in the docs site. The package continues to satisfy its existing >=9.0.0 peer range — Mantine 9.4 is an additive minor (new ComboboxPopover, DataList, EmptyState and Menubar components), with no API or behavior changes for consumers of this package.

🛠️ Other

  • Dependency refresh (within existing semver ranges, no major upgrades):
    • @mantine/core, @mantine/hooks 9.3.1 → 9.4.0 (root); @mantine/code-highlight, @mantine/core, @mantine/hooks 9.3.1 → 9.4.0 (docs)
    • @storybook/* + storybook 10.4.5 → 10.4.6
    • oxfmt ^0.55.0 → ^0.56.0
    • oxlint ^1.70.0 → ^1.71.0
    • rollup ^4.62.0 → ^4.62.2
    • yargs ^17.7.2 → ^17.7.3
    • @types/node ^22.19.21 → ^22.20.0

📝 Summary

Maintenance patch — no API or behavior changes for @gfazioli/mantine-video. Aligns the docs site to Mantine 9.4.0 and refreshes dev tooling (Storybook 10.4.6, oxfmt 0.56, oxlint 1.71, Rollup 4.62.2) plus a minor @types/node bump.


What's Changed

  • chore(deps): update dependencies to latest minor (Mantine 9.4.0) by @gfazioli in #6

Full Changelog: 1.1.3...1.1.4

1.1.3

16 Jun 10:53

Choose a tag to compare

⚡ Improvements

Mantine 9.3.0 → 9.3.1

@mantine/core and @mantine/hooks are aligned to 9.3.1 (latest 9.x patch) in the docs site. The package continues to satisfy its existing >=9.0.0 peer range — no API or behavior changes for consumers.

🛠️ Other

  • Dependency refresh (within existing semver ranges, no major upgrades):
    • @mantine/code-highlight, @mantine/core, @mantine/hooks 9.3.0 → 9.3.1 (docs)
    • @storybook/* 10.4.2 → 10.4.5
    • oxlint ^1.68.0 → ^1.70.0
    • rollup ^4.61.0 → ^4.62.0
    • esbuild ^0.28.0 → ^0.28.1
    • next, @next/mdx 16.2.7 → 16.2.9 (docs)
    • @types/node ^22.19.19 → ^22.19.21, @types/react ^19.2.16 → ^19.2.17

📝 Summary

Maintenance patch — no API or behavior changes for @gfazioli/mantine-video. Aligns the docs site to Mantine 9.3.1 and refreshes dev tooling (Storybook 10.4.5, oxlint 1.70, Rollup 4.62) plus minor Next/type bumps.


What's Changed

  • chore(deps): update dependencies to latest minor (Mantine 9.3.1) by @gfazioli in #5

Full Changelog: 1.1.2...1.1.3

1.1.2

03 Jun 08:57

Choose a tag to compare

⚡ Improvements

Mantine 9.2.2 → 9.3.0

@mantine/core and @mantine/hooks are aligned to 9.3.0 (latest 9.x minor) in the docs site. The package continues to satisfy its existing >=9.0.0 peer range — no API or behavior changes for consumers.

🛠️ Other

  • Dependency refresh (within existing semver ranges, no major upgrades):
    • @mantine/code-highlight, @mantine/core, @mantine/hooks 9.2.2 → 9.3.0 (docs)
    • @storybook/* 10.4.1 → 10.4.2
    • oxlint ^1.67.0 → ^1.68.0
    • rollup ^4.60.4 → ^4.61.0
    • react, react-dom 19.2.6 → 19.2.7
    • next 16.2.6 → 16.2.7 (docs)
    • tsx ^4.22.3 → ^4.22.4
    • vite ^6.4.2 → ^6.4.3
    • @types/react ^19.2.15 → ^19.2.16
  • Yarn 4.15.0 → 4.16.0

📝 Summary

Maintenance patch — no API or behavior changes for @gfazioli/mantine-video. Aligns the docs site to Mantine 9.3.0 and refreshes dev tooling (Storybook 10.4.2, oxlint 1.68, Rollup 4.61) plus minor React/Next/type bumps.


What's Changed

  • chore(deps): update dependencies to latest minor (Mantine 9.3.0) by @gfazioli in #4

Full Changelog: 1.1.1...1.1.2

1.1.1

28 May 10:30

Choose a tag to compare

⚡ Improvements

Mantine 9.2.1 → 9.2.2

@mantine/core and @mantine/hooks are aligned to 9.2.2 (latest 9.2 patch) in the docs site. The package continues to satisfy its existing >=9.0.0 peer range — no API or behavior changes for consumers.

🛠️ Other

  • Dependency refresh (within existing semver ranges, no major upgrades):
    • @mantine/code-highlight, @mantine/core, @mantine/hooks 9.2.1 → 9.2.2 (docs)
    • @storybook/* 10.4.0 → 10.4.1
    • oxfmt ^0.50.0 → ^0.52.0
    • oxlint ^1.65.0 → ^1.67.0
    • postcss ^8.5.14 → ^8.5.15
    • tsx ^4.22.1 → ^4.22.3
    • @types/react ^19.2.14 → ^19.2.15
  • Yarn 4.14.1 → 4.15.0
  • Apply oxfmt 0.52 formatting

📝 Summary

Maintenance patch — no API or behavior changes for @gfazioli/mantine-video. Aligns to Mantine 9.2.2 and refreshes dev tooling (oxfmt 0.52, oxlint 1.67, Storybook 10.4.1) plus minor type/PostCSS/tsx bumps.


What's Changed

  • chore(deps): update dependencies to latest minor (Mantine 9.2.2) by @gfazioli in #3

Full Changelog: 1.1.0...1.1.1

1.1.0

27 May 15:02

Choose a tag to compare

✨ Features

Multiple sources

  • New sources prop accepts an array of { src, type?, media? } entries, rendered as native <source> children so the browser plays the first format it can decode — the standard cross‑browser / adaptive‑delivery mechanism (e.g. VP9/WebM with an H.264/MP4 fallback).
  • Each entry supports an optional type (MIME, lets the browser skip formats it can't decode) and media (a media query for resolution‑based selection).
  • New fallbackSrc prop (mirrors Mantine Image) is loaded once if every sources entry fails at runtime (404, decode error).
  • sources takes precedence over src when non‑empty; passing a single src keeps working exactly as before.

⚡ Improvements

none in this release.

🐛 Bug Fixes

none in this release.

💥 Breaking changes

none. sources / fallbackSrc are additive; existing src usage is unchanged.

🛠️ Other

  • Raised the @mantine/core / @mantine/hooks peer‑dependency floor to >=9.0.0 to match the Mantine 9 baseline.
  • Added a self‑hosted manta.webm (VP9) sample alongside the existing MP4 so the new “Multiple sources” demo shows real codec negotiation.

📝 Summary

@gfazioli/mantine-video v1.1.0 adds first‑class support for multiple media sources. Pass a sources array to ship several formats/codecs and let the browser pick the first it can play (each entry takes an optional type and media), with fallbackSrc loaded if every source fails at runtime — the same pattern Mantine Image uses. Single‑src usage is unaffected.


What's Changed

  • feat: support multiple elements + fallbackSrc by @gfazioli in #2

New Contributors

Full Changelog: 1.0.0...1.1.0

1.0.0 — Mantine Video

18 May 13:23

Choose a tag to compare

1.0.0

First public release of @gfazioli/mantine-video — a Mantine‑native video player component for React.

✨ Features

Core component

  • <Video /> — a polymorphic factory component built on top of the native HTML <video> element, fully integrated with Mantine's useProps, useStyles, createVarsResolver and Styles API. Supports src, poster, autoPlay, muted, loop, playsInline, preload, aspectRatio, radius, color and size props.
  • Four built‑in variants: overlay (default, YouTube‑style), minimal, floating, bordered.
  • Both controlled and uncontrolled modes for playing, currentTime, volume, playbackRate.

Headless useVideo hook

  • Full state (playing, paused, ended, currentTime, duration, buffered, volume, muted, playbackRate, fullscreen, pip, isLoading, error, canPlay, canFullscreen, canPiP) and actions (play, pause, toggle, seek, seekBy, setVolume, mute, unmute, toggleMute, setPlaybackRate, requestFullscreen, exitFullscreen, toggleFullscreen, requestPiP, exitPiP, togglePiP).
  • Defensive sync on mount: catches loadedmetadata even if it fires before the listener attaches.

Compound sub‑components (9)

  • Video.Controls — composable control bar with auto‑hide on idle
  • Video.PlayButton, Video.SkipButton — play / pause + skip ±N seconds
  • Video.Timeline — Mantine Slider with live scrub (the underlying <video> seeks in real time while dragging, YouTube‑style) and a buffered‑range overlay
  • Video.TimeDisplaycurrent/duration/remaining/current-remaining formats
  • Video.MuteButton — speaker icon adapts to current volume level
  • Video.FullscreenButton, Video.PiPButton — auto‑hide where the standard browser API is missing (e.g. Firefox)
  • Video.CaptionsButton — auto‑hides when there are no <track> elements

Background video usage

  • New asBackground prop turns the player into an absolute‑positioned, cover‑cropped element ready to drop inside any positioned parent — for hero sections, section backdrops, landing pages.
  • New backgroundMuteButton prop renders a discreet floating mute toggle in the bottom‑right corner when asBackground is on.
  • New fit prop maps to CSS object-fit (cover | contain | fill | none | scale-down).

Picture‑in‑Picture

  • Built‑in PiP support with capability detection.
  • onEnterPictureInPicture / onLeavePictureInPicture lifecycle callbacks.
  • Keyboard shortcut P (when shortcuts is enabled).

Accessibility & UX

  • Full keyboard shortcuts: Space / K (play / pause), J / L (±10 s), ←/→ (±5 s), ↑/↓ (volume), M (mute), F (fullscreen), P (PiP).
  • ARIA labels, aria-pressed on toggles, focus‑visible outlines, capability‑aware buttons that self‑hide.

Styling

  • Full Mantine Styles API (classNames, styles, vars, unstyled) on every sub‑part: root, video, controls, controlBar, playButton, timeline, timelineBuffered, timeDisplay, muteButton, fullscreenButton, pipButton, captionsButton, skipButton, backgroundMuteButton.
  • Theme‑aware CSS variables: --video-color, --video-radius, --video-bg, --video-controls-bg, --video-controls-height, --video-controls-text-color, --video-timeline-color, --video-timeline-thumb-color, --video-object-fit.

Docs site

  • 10 interactive demos covering basic, configurator, custom controls, headless usage, Picture‑in‑Picture, styles API, and one per variant.
  • Two standalone full‑bleed demo pages (/fullscreen and /homepage) showcasing asBackground in real landing‑page scenarios with three different background videos.
  • Sample videos self‑hosted in docs/public/videos/ (re‑encoded with ffmpeg to keep the repo lightweight) for stable demos that don't depend on external CDNs.
  • Redesigned footer split into Tier 1 (About / HIGHLIGHTS / MANTINE / APPS) and Tier 2 ("OTHER MANTINE EXTENSIONS" categorized into Layout / Data display / Inputs & Navigation / Effects & Animations) — same structure rolled out to the rest of the ecosystem.

⚡ Improvements

first release, nothing to improve yet.

🐛 Bug Fixes

first release, nothing to fix yet.

💥 Breaking changes

first release, no API to break.

🛠️ Other

  • Mantine 9.x and React 19 baseline.
  • TypeScript 6 with full type exports for every prop, sub‑component, and the useVideo hook return shape.
  • Test suite with jest + @mantine-tests/core (7/7 passing).
  • Rollup build produces dual ESM + CJS bundles with 'use client' banner; CSS modules hashed with prefix me; layered styles.layer.css available.
  • @tabler/icons-react is an optional peer dependency (only used for the default icons; consumers using a different icon set are not forced to install it).

📝 Summary

@gfazioli/mantine-video ships a complete, Mantine‑native video player for React 19. Three layers in one package: a polished default <Video /> with four variants, a fully composable compound API (Video.Controls, Video.PlayButton, Video.Timeline, …) so you can rebuild the control bar your way, and a headless useVideo hook for fully custom UI. Fullscreen, Picture‑in‑Picture, captions, keyboard shortcuts and live timeline scrubbing are wired in out of the box, and the new asBackground mode turns the same player into a hero background video with one prop.