@videts/vide 0.8.0 → 0.9.3

package/dist/svelte/components/MuteButton.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+import { getContext } from "svelte";
+import type { Snippet } from "svelte";
+import { type PlayerGetter, VIDE_PLAYER_KEY } from "../context.js";
+import IconVolumeHigh from "../icons/IconVolumeHigh.svelte";
+import IconVolumeLow from "../icons/IconVolumeLow.svelte";
+import IconVolumeMute from "../icons/IconVolumeMute.svelte";
+
+interface Props {
+	class?: string;
+	children?: Snippet;
+}
+
+const { class: className, children }: Props = $props();
+
+const getPlayer = getContext<PlayerGetter>(VIDE_PLAYER_KEY);
+let muted = $state(false);
+let volume = $state(1);
+
+$effect(() => {
+	const p = getPlayer();
+	if (!p) return;
+	const sync = () => {
+		muted = p.muted || p.volume === 0;
+		volume = p.volume;
+	};
+	p.el.addEventListener("volumechange", sync);
+	sync();
+	return () => {
+		p.el.removeEventListener("volumechange", sync);
+	};
+});
+
+function onClick() {
+	const p = getPlayer();
+	if (!p) return;
+	p.muted = !p.muted;
+}
+</script>
+
+<button
+	type="button"
+	class={["vide-mute", className].filter(Boolean).join(" ")}
+	aria-label={muted ? "Unmute" : "Mute"}
+	data-muted={muted || undefined}
+	onclick={onClick}
+>
+	{#if children}
+		{@render children()}
+	{:else if muted}
+		<IconVolumeMute />
+	{:else if volume < 0.5}
+		<IconVolumeLow />
+	{:else}
+		<IconVolumeHigh />
+	{/if}
+</button>

package/dist/svelte/components/MuteButton.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const MuteButton: import("svelte").Component<Props, {}, "">;
+type MuteButton = ReturnType<typeof MuteButton>;
+export default MuteButton;

package/dist/svelte/components/PlayButton.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+import { getContext } from "svelte";
+import type { Snippet } from "svelte";
+import { type PlayerGetter, VIDE_PLAYER_KEY } from "../context.js";
+import type { PlayerState } from "../helpers.js";
+import IconPause from "../icons/IconPause.svelte";
+import IconPlay from "../icons/IconPlay.svelte";
+
+interface Props {
+	class?: string;
+	children?: Snippet;
+}
+
+const { class: className, children }: Props = $props();
+
+const getPlayer = getContext<PlayerGetter>(VIDE_PLAYER_KEY);
+let playing = $state(false);
+
+$effect(() => {
+	const p = getPlayer();
+	if (!p) return;
+	const handler = ({ to }: { from: PlayerState; to: PlayerState }) => {
+		if (to === "playing" || to === "ad:playing") {
+			playing = true;
+		} else if (
+			to === "paused" ||
+			to === "ready" ||
+			to === "ended" ||
+			to === "ad:paused"
+		) {
+			playing = false;
+		}
+	};
+	p.on("statechange", handler);
+	return () => p.off("statechange", handler);
+});
+
+function onClick() {
+	const p = getPlayer();
+	if (!p) return;
+	if (p.state === "playing" || p.state === "ad:playing") {
+		p.pause();
+	} else {
+		p.play().catch(() => {});
+	}
+}
+</script>
+
+<button
+	type="button"
+	class={["vide-play", className].filter(Boolean).join(" ")}
+	aria-label={playing ? "Pause" : "Play"}
+	data-playing={playing || undefined}
+	onclick={onClick}
+>
+	{#if children}
+		{@render children()}
+	{:else if playing}
+		<IconPause />
+	{:else}
+		<IconPlay />
+	{/if}
+</button>

package/dist/svelte/components/PlayButton.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const PlayButton: import("svelte").Component<Props, {}, "">;
+type PlayButton = ReturnType<typeof PlayButton>;
+export default PlayButton;

package/dist/svelte/components/Poster.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+interface Props {
+	src: string;
+	alt?: string;
+	class?: string;
+}
+
+const { src, alt = "", class: className }: Props = $props();
+</script>
+
+<div class={["vide-poster", className].filter(Boolean).join(" ")}>
+	<img class="vide-poster__image" {src} {alt} />
+</div>

package/dist/svelte/components/Poster.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    src: string;
+    alt?: string;
+    class?: string;
+}
+declare const Poster: import("svelte").Component<Props, {}, "">;
+type Poster = ReturnType<typeof Poster>;
+export default Poster;

package/dist/svelte/components/Progress.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+import { getContext } from "svelte";
+import { type PlayerGetter, VIDE_PLAYER_KEY } from "../context.js";
+import type { PlayerState } from "../helpers.js";
+
+interface Props {
+	class?: string;
+}
+
+const { class: className }: Props = $props();
+
+const getPlayer = getContext<PlayerGetter>(VIDE_PLAYER_KEY);
+let progress = $state(0);
+let buffered = $state(0);
+let disabled = $state(false);
+let dragging = false;
+let rootEl: HTMLDivElement;
+
+$effect(() => {
+	const p = getPlayer();
+	if (!p) return;
+	const onTimeUpdate = ({
+		currentTime,
+		duration,
+	}: { currentTime: number; duration: number }) => {
+		if (!dragging && duration > 0) {
+			progress = currentTime / duration;
+		}
+		if (p.el.buffered.length > 0 && duration > 0) {
+			const end = p.el.buffered.end(p.el.buffered.length - 1);
+			buffered = Math.min(1, end / duration);
+		}
+	};
+	p.on("timeupdate", onTimeUpdate);
+	return () => p.off("timeupdate", onTimeUpdate);
+});
+
+$effect(() => {
+	const p = getPlayer();
+	if (!p) return;
+	const onStateChange = ({ to }: { from: PlayerState; to: PlayerState }) => {
+		const isAd =
+			to === "ad:loading" || to === "ad:playing" || to === "ad:paused";
+		disabled = isAd;
+	};
+	p.on("statechange", onStateChange);
+	return () => p.off("statechange", onStateChange);
+});
+
+function getRatio(e: PointerEvent): number {
+	if (!rootEl) return 0;
+	const rect = rootEl.getBoundingClientRect();
+	if (rect.width === 0) return 0;
+	return Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+}
+
+function onPointerDown(e: PointerEvent) {
+	const p = getPlayer();
+	if (!p || disabled) return;
+	dragging = true;
+	rootEl?.setPointerCapture(e.pointerId);
+	progress = getRatio(e);
+}
+
+function onPointerMove(e: PointerEvent) {
+	if (!dragging) return;
+	progress = getRatio(e);
+}
+
+function onPointerUp(e: PointerEvent) {
+	const p = getPlayer();
+	if (!dragging || !p) return;
+	dragging = false;
+	rootEl?.releasePointerCapture(e.pointerId);
+	const ratio = getRatio(e);
+	const duration = p.el.duration;
+	if (Number.isFinite(duration) && duration > 0) {
+		p.currentTime = ratio * duration;
+	}
+}
+</script>
+
+<div
+	bind:this={rootEl}
+	class={["vide-progress", className].filter(Boolean).join(" ")}
+	role="slider"
+	tabindex="0"
+	aria-label="Seek"
+	aria-valuemin="0"
+	aria-valuemax="100"
+	aria-valuenow={Math.round(progress * 100)}
+	data-disabled={disabled || undefined}
+	style="--vide-progress: {progress}; --vide-progress-buffered: {buffered}"
+	onpointerdown={onPointerDown}
+	onpointermove={onPointerMove}
+	onpointerup={onPointerUp}
+>
+	<div class="vide-progress__buffered"></div>
+	<div class="vide-progress__bar"></div>
+	<div class="vide-progress__handle"></div>
+</div>

package/dist/svelte/components/Progress.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    class?: string;
+}
+declare const Progress: import("svelte").Component<Props, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/svelte/components/TimeDisplay.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+import { getContext } from "svelte";
+import { type PlayerGetter, VIDE_PLAYER_KEY } from "../context.js";
+import { formatTime } from "../helpers.js";
+
+interface Props {
+	class?: string;
+	separator?: string;
+}
+
+const { class: className, separator = "/" }: Props = $props();
+
+const getPlayer = getContext<PlayerGetter>(VIDE_PLAYER_KEY);
+let currentTime = $state(0);
+let duration = $state(0);
+
+$effect(() => {
+	const p = getPlayer();
+	if (!p) return;
+	const handler = (data: { currentTime: number; duration: number }) => {
+		currentTime = data.currentTime;
+		duration = data.duration;
+	};
+	p.on("timeupdate", handler);
+	return () => p.off("timeupdate", handler);
+});
+</script>
+
+<div class={["vide-time", className].filter(Boolean).join(" ")} aria-label="Time">
+	<span>{formatTime(currentTime)}</span>
+	<span>{separator}</span>
+	<span>{formatTime(duration)}</span>
+</div>

package/dist/svelte/components/TimeDisplay.svelte.d.ts

@@ -0,0 +1,7 @@
+interface Props {
+    class?: string;
+    separator?: string;
+}
+declare const TimeDisplay: import("svelte").Component<Props, {}, "">;
+type TimeDisplay = ReturnType<typeof TimeDisplay>;
+export default TimeDisplay;

package/dist/svelte/components/Volume.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+import { getContext } from "svelte";
+import type { Snippet } from "svelte";
+import { type PlayerGetter, VIDE_PLAYER_KEY } from "../context.js";
+import IconVolumeHigh from "../icons/IconVolumeHigh.svelte";
+import IconVolumeLow from "../icons/IconVolumeLow.svelte";
+import IconVolumeMute from "../icons/IconVolumeMute.svelte";
+
+interface Props {
+	class?: string;
+	children?: Snippet;
+}
+
+const { class: className, children }: Props = $props();
+
+const getPlayer = getContext<PlayerGetter>(VIDE_PLAYER_KEY);
+let volume = $state(1);
+let muted = $state(false);
+let dragging = false;
+let sliderEl: HTMLDivElement;
+
+$effect(() => {
+	const p = getPlayer();
+	if (!p) return;
+	const sync = () => {
+		if (!dragging) {
+			volume = p.muted ? 0 : p.volume;
+		}
+		muted = p.muted || p.volume === 0;
+	};
+	p.el.addEventListener("volumechange", sync);
+	sync();
+	return () => {
+		p.el.removeEventListener("volumechange", sync);
+	};
+});
+
+function onMuteClick() {
+	const p = getPlayer();
+	if (!p) return;
+	p.muted = !p.muted;
+}
+
+function getRatio(e: PointerEvent): number {
+	if (!sliderEl) return 0;
+	const rect = sliderEl.getBoundingClientRect();
+	if (rect.width === 0) return 0;
+	return Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+}
+
+function onPointerDown(e: PointerEvent) {
+	const p = getPlayer();
+	if (!p) return;
+	dragging = true;
+	sliderEl?.setPointerCapture(e.pointerId);
+	const vol = getRatio(e);
+	p.volume = vol;
+	if (p.muted && vol > 0) p.muted = false;
+	volume = vol;
+	muted = vol === 0;
+}
+
+function onPointerMove(e: PointerEvent) {
+	const p = getPlayer();
+	if (!dragging || !p) return;
+	const vol = getRatio(e);
+	p.volume = vol;
+	if (p.muted && vol > 0) p.muted = false;
+	volume = vol;
+	muted = vol === 0;
+}
+
+function onPointerUp(e: PointerEvent) {
+	if (!dragging) return;
+	dragging = false;
+	sliderEl?.releasePointerCapture(e.pointerId);
+}
+</script>
+
+<div
+	class={["vide-volume", className].filter(Boolean).join(" ")}
+	data-muted={muted || undefined}
+	style="--vide-volume: {volume}"
+>
+	<button
+		type="button"
+		class="vide-volume__button"
+		aria-label={muted ? "Unmute" : "Mute"}
+		onclick={onMuteClick}
+	>
+		{#if children}
+			{@render children()}
+		{:else if muted}
+			<IconVolumeMute />
+		{:else if volume < 0.5}
+			<IconVolumeLow />
+		{:else}
+			<IconVolumeHigh />
+		{/if}
+	</button>
+	<div
+		bind:this={sliderEl}
+		class="vide-volume__slider"
+		role="slider"
+		tabindex="0"
+		aria-label="Volume"
+		aria-valuemin="0"
+		aria-valuemax="100"
+		aria-valuenow={Math.round(volume * 100)}
+		onpointerdown={onPointerDown}
+		onpointermove={onPointerMove}
+		onpointerup={onPointerUp}
+	>
+		<div class="vide-volume__track"></div>
+		<div class="vide-volume__filled"></div>
+	</div>
+</div>

package/dist/svelte/components/Volume.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+interface Props {
+    class?: string;
+    children?: Snippet;
+}
+declare const Volume: import("svelte").Component<Props, {}, "">;
+type Volume = ReturnType<typeof Volume>;
+export default Volume;

package/dist/svelte/context.d.ts

@@ -0,0 +1,6 @@
+import type { MediaElement, Player } from "./helpers.js";
+export declare const VIDE_PLAYER_KEY: unique symbol;
+export declare const VIDE_REGISTER_KEY: unique symbol;
+export type PlayerGetter = () => Player | null;
+export type RegisterFn = (el: MediaElement) => void;
+export declare function useVideContext(): PlayerGetter;

package/dist/svelte/context.js

@@ -0,0 +1,10 @@
+import { getContext } from "svelte";
+export const VIDE_PLAYER_KEY = Symbol("vide-player");
+export const VIDE_REGISTER_KEY = Symbol("vide-register");
+export function useVideContext() {
+    const getter = getContext(VIDE_PLAYER_KEY);
+    if (!getter) {
+        throw new Error("useVideContext must be used within <VideVideo>");
+    }
+    return getter;
+}

package/dist/svelte/create-vide-player.svelte.d.ts

@@ -0,0 +1,2 @@
+import { type PlayerGetter } from "./context.js";
+export declare function createVidePlayer(): PlayerGetter;

package/dist/svelte/create-vide-player.svelte.js

@@ -0,0 +1,22 @@
+import { setContext } from "svelte";
+import { VIDE_PLAYER_KEY, VIDE_REGISTER_KEY, } from "./context.js";
+import { createPlayer } from "./helpers.js";
+export function createVidePlayer() {
+    let player = $state(null);
+    const registerEl = (el) => {
+        if (player) {
+            player.destroy();
+        }
+        player = createPlayer(el);
+    };
+    $effect(() => {
+        const p = player;
+        return () => {
+            p?.destroy();
+        };
+    });
+    const getPlayer = () => player;
+    setContext(VIDE_PLAYER_KEY, getPlayer);
+    setContext(VIDE_REGISTER_KEY, registerEl);
+    return getPlayer;
+}

package/dist/svelte/helpers.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Inlined utilities and re-exports for the Svelte integration.
+ *
+ * svelte-package copies .svelte and .svelte.ts files as-is, preserving their
+ * import specifiers.  Cross-entry imports like "../ui/state.js" break at
+ * runtime because tsup bundles those source files into entry-point index files.
+ *
+ * This module re-exports what the Svelte layer needs from the bundled core
+ * entry ("../index.js") and inlines the tiny UI helpers so that no Svelte
+ * source file imports across entry-point boundaries.
+ */
+export { createPlayer } from "../index.js";
+export type { AdMeta, EventHandler, MediaElement, Player, PlayerEvent, PlayerEventMap, PlayerState, Plugin, } from "../index.js";
+import type { PlayerState } from "../index.js";
+export declare function stateToClass(state: PlayerState): string;
+export declare function isAdState(state: PlayerState): boolean;
+export declare function formatTime(seconds: number): string;

package/dist/svelte/helpers.js

@@ -0,0 +1,31 @@
+/**
+ * Inlined utilities and re-exports for the Svelte integration.
+ *
+ * svelte-package copies .svelte and .svelte.ts files as-is, preserving their
+ * import specifiers.  Cross-entry imports like "../ui/state.js" break at
+ * runtime because tsup bundles those source files into entry-point index files.
+ *
+ * This module re-exports what the Svelte layer needs from the bundled core
+ * entry ("../index.js") and inlines the tiny UI helpers so that no Svelte
+ * source file imports across entry-point boundaries.
+ */
+// ── Re-exports from the bundled core entry point ─────────────────────
+export { createPlayer } from "../index.js";
+export function stateToClass(state) {
+    return `vide-ui--${state.replace(":", "-")}`;
+}
+export function isAdState(state) {
+    return (state === "ad:loading" || state === "ad:playing" || state === "ad:paused");
+}
+// ── Inlined from src/ui/utils.ts ─────────────────────────────────────
+export function formatTime(seconds) {
+    if (!Number.isFinite(seconds) || seconds < 0)
+        return "0:00";
+    const s = Math.floor(seconds);
+    const h = Math.floor(s / 3600);
+    const m = Math.floor((s % 3600) / 60);
+    const sec = s % 60;
+    const mm = h > 0 ? String(m).padStart(2, "0") : String(m);
+    const ss = String(sec).padStart(2, "0");
+    return h > 0 ? `${h}:${mm}:${ss}` : `${mm}:${ss}`;
+}

package/dist/svelte/icons/IconFullscreenEnter.svelte

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true">
+	<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
+</svg>

package/dist/svelte/icons/IconFullscreenEnter.svelte.d.ts

@@ -0,0 +1,26 @@
+export default IconFullscreenEnter;
+type IconFullscreenEnter = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const IconFullscreenEnter: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/svelte/icons/IconFullscreenExit.svelte

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true">
+	<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" />
+</svg>

package/dist/svelte/icons/IconFullscreenExit.svelte.d.ts

@@ -0,0 +1,26 @@
+export default IconFullscreenExit;
+type IconFullscreenExit = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const IconFullscreenExit: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/svelte/icons/IconPause.svelte

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true">
+	<path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" />
+</svg>

package/dist/svelte/icons/IconPause.svelte.d.ts

@@ -0,0 +1,26 @@
+export default IconPause;
+type IconPause = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const IconPause: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/svelte/icons/IconPlay.svelte

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true">
+	<path d="M8 5v14l11-7z" />
+</svg>

package/dist/svelte/icons/IconPlay.svelte.d.ts

@@ -0,0 +1,26 @@
+export default IconPlay;
+type IconPlay = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string;
+};
+declare const IconPlay: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/svelte/icons/IconVolumeHigh.svelte

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true">
+	<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" />
+</svg>