@vime/svelte - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

CHANGELOG.md

@@ -1,11 +0,32 @@
-# Change Log
 
-All notable changes to this project will be documented in this file.
+# 🤖 Changelog
 
-# 1.0.0 (2020-08-25)
+📝  All notable changes to this project will be documented in this file. 
 
+🧑  Are you human? See the [changelog](../../CHANGELOG.md) in the root of the repository.
 
+🚀  This file is auto-generated by [semantic-release](https://github.com/semantic-release/semantic-release).
+
+
+# [1.1.0](https://github.com/vime-js/vime/compare/@vime/svelte@1.0.0...@vime/svelte@1.1.0) (2020-08-28)
+
+
 ### Features
 
-* improve all framework integrations ([0ef1716](https://github.com/vime-js/vime/commit/0ef171655e8f02c277e0f00e90d87fdba8f74bb4))
-* new svelte store option ([ce78e15](https://github.com/vime-js/vime/commit/ce78e1532da638fffacdf6988ec66c9390c31f5d))
+* **svelte:** all new svelte bindings ([59e0c23](https://github.com/vime-js/vime/commit/59e0c235c52d89331f88d8a6d8195b2d8de17c89))
+* **svelte:** new usePlayer helper ([ce56b1c](https://github.com/vime-js/vime/commit/ce56b1c847ff096dda0a4233b554030f1653c19c))
+
+# 🤖 Changelog
+
+📝  All notable changes to this project will be documented in this file.
+
+🧑  Are you human? See the [changelog](../../CHANGELOG.md) in the root of the repository.
+
+🚀  This file is auto-generated by [semantic-release](https://github.com/semantic-release/semantic-release).
+
+# 1.0.0 (2020-08-25)
+
+### Features
+
+- improve all framework integrations ([0ef1716](https://github.com/vime-js/vime/commit/0ef171655e8f02c277e0f00e90d87fdba8f74bb4))
+- new svelte store option ([ce78e15](https://github.com/vime-js/vime/commit/ce78e1532da638fffacdf6988ec66c9390c31f5d))

dist/cjs/index.js

@@ -14,3 +14,12 @@ "use strict";
 __exportStar(require("@vime/core"), exports);
+__exportStar(require("./components"), exports);
 __exportStar(require("./usePlayerStore"), exports);
+if (typeof window !== 'undefined') {
+    const script = document.createElement('script');
+    script.type = 'module';
+    script.defer = true;
+    script.src = 'https://cdn.jsdelivr.net/npm/@vime/core@latest/dist/vime/vime.esm.js';
+    const firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
+}
 //# sourceMappingURL=index.js.map

dist/cjs/usePlayerStore.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useInternalPlayerStore = exports.usePlayerStore = void 0;
+exports.useInternalPlayerStore = exports.usePlayerStore = exports.usePlayer = void 0;
 const core_1 = require("@vime/core");
@@ -18,3 +18,3 @@ const svelte_1 = require("svelte");
             if (!store_1.get(internalStoreRef.get(core_1.PlayerProp.mounted))) {
-                mountedQueue.push(() => dispatch(prop, value));
+                mountedQueue.push(() => { dispatch(prop, value); });
             }
@@ -73,3 +73,3 @@ else {
         [core_1.PlayerProp.isAudio]: vimeable(core_1.PlayerProp.isAudio, false),
-        [core_1.PlayerProp.isVideo]: vimeable(core_1.PlayerProp.isVideoView, false),
+        [core_1.PlayerProp.isVideo]: vimeable(core_1.PlayerProp.isVideo, false),
         [core_1.PlayerProp.isMobile]: vimeable(core_1.PlayerProp.isMobile, false),
@@ -90,8 +90,11 @@ [core_1.PlayerProp.isTouch]: vimeable(core_1.PlayerProp.isTouch, false),
     svelte_1.onMount(() => {
-        const player = core_1.findRootPlayer(ref());
-        dispatch = core_1.createPlayerDispatcher(ref());
+        let el = ref();
+        if (el.$$)
+            el = el.getWebComponent();
+        const player = core_1.findRootPlayer(el);
+        dispatch = core_1.createPlayerDispatcher(el);
         internalStoreRef.get(core_1.PlayerProp.mounted).set(player.mounted);
-        const disconnect = core_1.usePlayerContext(ref(), Object.values(core_1.PlayerProp), (prop, value) => { var _a; (_a = internalStoreRef.get(prop)) === null || _a === void 0 ? void 0 : _a.set(value); });
+        const disconnect = core_1.usePlayerContext(el, Object.values(core_1.PlayerProp), (prop, value) => { internalStoreRef.get(prop).set(value); });
         if (!player.mounted) {
-            const off = core_1.usePlayerContext(ref(), [core_1.PlayerProp.mounted], () => {
+            const off = core_1.usePlayerContext(el, [core_1.PlayerProp.mounted], () => {
                 onPlayerMounted();
@@ -109,7 +112,22 @@ off();
 /**
- * Creates and returns a store for the given player `ref`. The store is a collection of stores
+ * This function will take the given `ref` and climb up the DOM tree until it finds the first
+ * ancestor player, which it will then return through the callback. This is useful for
+ * getting a reference to the player when you need to call a method on it.
+ *
+ * @param ref A function which returns a HTMLElement or Vime component.
+ */
+exports.usePlayer = (ref, callback) => {
+    svelte_1.onMount(() => {
+        let el = ref();
+        if (el.$$)
+            el = el.getWebComponent();
+        callback(core_1.findRootPlayer(el));
+    });
+};
+/**
+ * Creates and returns a store for the given player. The store is a collection of stores
  * for each player property. It is safe to write to properties before the player has mounted or
  * playback is ready.
  *
- * @param ref The player to create a store for.
+ * @param playerRef A function which returns the player to create the store for.
  *
@@ -124,3 +142,3 @@ * @example
  *
- *  const { currentTime } = usePlayerStore(player);
+ *  const { currentTime } = usePlayerStore(() => player);
  *
@@ -132,3 +150,3 @@ *  $currentTime = 50;
  */
-exports.usePlayerStore = (ref) => buildStore(ref);
+exports.usePlayerStore = (playerRef) => buildStore(playerRef);
 /**
@@ -140,5 +158,5 @@ * Creates and returns a store for the closest ancestor player of the given `ref`. The internal
  *
- * @param ref The root HTMLElement of the custom component.
+ * @param ref A function which returns the root HTMLElement or Vime component.
  */
 exports.useInternalPlayerStore = (ref) => buildStore(ref, true);
 //# sourceMappingURL=usePlayerStore.js.map

dist/esm/index.js

 export * from '@vime/core';
+export * from './components';
 export * from './usePlayerStore';
+if (typeof window !== 'undefined') {
+    const script = document.createElement('script');
+    script.type = 'module';
+    script.defer = true;
+    script.src = 'https://cdn.jsdelivr.net/npm/@vime/core@latest/dist/vime/vime.esm.js';
+    const firstScriptTag = document.getElementsByTagName('script')[0];
+    firstScriptTag.parentNode.insertBefore(script, firstScriptTag);
+}
 //# sourceMappingURL=index.js.map

dist/esm/usePlayerStore.js

 import { PlayerProp, usePlayerContext, isExternalReadonlyPlayerProp, isInternalReadonlyPlayerProp, createPlayerDispatcher, findRootPlayer, } from '@vime/core';
 import { onMount } from 'svelte';
-import { writable, get, } from 'svelte/store';
+import { writable, get as unwrap, } from 'svelte/store';
 const buildStore = (ref, isInternal = false) => {
@@ -14,4 +14,4 @@ let dispatch = () => { };
         const set = (value) => {
-            if (!get(internalStoreRef.get(PlayerProp.mounted))) {
-                mountedQueue.push(() => dispatch(prop, value));
+            if (!unwrap(internalStoreRef.get(PlayerProp.mounted))) {
+                mountedQueue.push(() => { dispatch(prop, value); });
             }
@@ -23,3 +23,3 @@ else {
         const update = (updater) => {
-            set(updater(get(store)));
+            set(updater(unwrap(store)));
         };
@@ -71,3 +71,3 @@ internalStoreRef.set(prop, store);
         [PlayerProp.isAudio]: vimeable(PlayerProp.isAudio, false),
-        [PlayerProp.isVideo]: vimeable(PlayerProp.isVideoView, false),
+        [PlayerProp.isVideo]: vimeable(PlayerProp.isVideo, false),
         [PlayerProp.isMobile]: vimeable(PlayerProp.isMobile, false),
@@ -88,8 +88,11 @@ [PlayerProp.isTouch]: vimeable(PlayerProp.isTouch, false),
     onMount(() => {
-        const player = findRootPlayer(ref());
-        dispatch = createPlayerDispatcher(ref());
+        let el = ref();
+        if (el.$$)
+            el = el.getWebComponent();
+        const player = findRootPlayer(el);
+        dispatch = createPlayerDispatcher(el);
         internalStoreRef.get(PlayerProp.mounted).set(player.mounted);
-        const disconnect = usePlayerContext(ref(), Object.values(PlayerProp), (prop, value) => { var _a; (_a = internalStoreRef.get(prop)) === null || _a === void 0 ? void 0 : _a.set(value); });
+        const disconnect = usePlayerContext(el, Object.values(PlayerProp), (prop, value) => { internalStoreRef.get(prop).set(value); });
         if (!player.mounted) {
-            const off = usePlayerContext(ref(), [PlayerProp.mounted], () => {
+            const off = usePlayerContext(el, [PlayerProp.mounted], () => {
                 onPlayerMounted();
@@ -107,7 +110,22 @@ off();
 /**
- * Creates and returns a store for the given player `ref`. The store is a collection of stores
+ * This function will take the given `ref` and climb up the DOM tree until it finds the first
+ * ancestor player, which it will then return through the callback. This is useful for
+ * getting a reference to the player when you need to call a method on it.
+ *
+ * @param ref A function which returns a HTMLElement or Vime component.
+ */
+export const usePlayer = (ref, callback) => {
+    onMount(() => {
+        let el = ref();
+        if (el.$$)
+            el = el.getWebComponent();
+        callback(findRootPlayer(el));
+    });
+};
+/**
+ * Creates and returns a store for the given player. The store is a collection of stores
  * for each player property. It is safe to write to properties before the player has mounted or
  * playback is ready.
  *
- * @param ref The player to create a store for.
+ * @param playerRef A function which returns the player to create the store for.
  *
@@ -122,3 +140,3 @@ * @example
  *
- *  const { currentTime } = usePlayerStore(player);
+ *  const { currentTime } = usePlayerStore(() => player);
  *
@@ -130,3 +148,3 @@ *  $currentTime = 50;
  */
-export const usePlayerStore = (ref) => buildStore(ref);
+export const usePlayerStore = (playerRef) => buildStore(playerRef);
 /**
@@ -138,5 +156,5 @@ * Creates and returns a store for the closest ancestor player of the given `ref`. The internal
  *
- * @param ref The root HTMLElement of the custom component.
+ * @param ref A function which returns the root HTMLElement or Vime component.
  */
 export const useInternalPlayerStore = (ref) => buildStore(ref, true);
 //# sourceMappingURL=usePlayerStore.js.map

dist/types/index.d.ts

 export * from '@vime/core';
+export * from './components';
 export * from './usePlayerStore';

dist/types/usePlayerStore.d.ts

 import { PlayerProps } from '@vime/core';
 import { Writable, Readable } from 'svelte/store';
 import { InternalWritablePlayerProp, ExternalWritablePlayerProp } from '@vime/core/dist/types/components/core/player/PlayerProp';
+import VimePlayer from './components/VimePlayer';
 declare type PropStoreType<P extends keyof PlayerProps> = P extends ExternalWritablePlayerProp ? Writable<PlayerProps[P]> : Readable<PlayerProps[P]>;
@@ -12,8 +13,20 @@ declare type InternalPropStoreType<P extends keyof PlayerProps> = P extends InternalWritablePlayerProp ? Writable<PlayerProps[P]> : Readable<PlayerProps[P]>;
 };
+interface SvelteWebComponent<T extends HTMLElement> {
+    getWebComponent: T | undefined;
+}
+declare type Ref<T extends HTMLElement> = (() => T | SvelteWebComponent<T>);
 /**
- * Creates and returns a store for the given player `ref`. The store is a collection of stores
+ * This function will take the given `ref` and climb up the DOM tree until it finds the first
+ * ancestor player, which it will then return through the callback. This is useful for
+ * getting a reference to the player when you need to call a method on it.
+ *
+ * @param ref A function which returns a HTMLElement or Vime component.
+ */
+export declare const usePlayer: <T extends HTMLElement>(ref: Ref<T>, callback: (player: HTMLVimePlayerElement) => void) => void;
+/**
+ * Creates and returns a store for the given player. The store is a collection of stores
  * for each player property. It is safe to write to properties before the player has mounted or
  * playback is ready.
  *
- * @param ref The player to create a store for.
+ * @param playerRef A function which returns the player to create the store for.
  *
@@ -28,3 +41,3 @@ * @example
  *
- *  const { currentTime } = usePlayerStore(player);
+ *  const { currentTime } = usePlayerStore(() => player);
  *
@@ -36,3 +49,3 @@ *  $currentTime = 50;
  */
-export declare const usePlayerStore: (ref: () => HTMLVimePlayerElement) => PlayerStore;
+export declare const usePlayerStore: (playerRef: () => VimePlayer) => PlayerStore;
 /**
@@ -44,5 +57,5 @@ * Creates and returns a store for the closest ancestor player of the given `ref`. The internal
  *
- * @param ref The root HTMLElement of the custom component.
+ * @param ref A function which returns the root HTMLElement or Vime component.
  */
-export declare const useInternalPlayerStore: (ref: () => HTMLElement) => InternalPlayerStore;
+export declare const useInternalPlayerStore: <T extends HTMLElement>(ref: Ref<T>) => InternalPlayerStore;
 export {};

package.json

 {
   "name": "@vime/svelte",
-  "version": "1.0.0",
-  "description": "Collection of utilties for improved Vime integration with Svelte.",
+  "version": "1.1.0",
+  "description": "Collection of Svelte components to build and customize your own media player.",
   "license": "MIT",
@@ -10,3 +10,4 @@ "main": "dist/cjs/index.js",
   "files": [
-    "dist/"
+    "dist/",
+    "src/svelte/"
   ],
@@ -13,0 +14,0 @@ "contributors": [

README.md

 # @vime/svelte
 
 Vime is simply a collection of [web components](https://developer.mozilla.org/en-US/docs/Web/Web_Components)
-that help you easily build and customize your own media player. This package contains a few utilities
-for improving Vime integration with [Svelte](https://svelte.dev).
+that help you easily build and customize your own media player. These are [Svelte](https://svelte.dev)
+specific building blocks on top of [@vime/core](https://www.npmjs.com/package/@vime/core) components.
 
@@ -7,0 +7,0 @@ ## Related

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2225066

increased by4582.48%

Number of package files

301

increased by2215.38%

Lines of code

19631

increased by5830.82%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes