@mebtte/react-media-session - npm Package Compare versions

Comparing version 1.0.2 to 1.1.1

dist/constant.d.ts

@@ -18,4 +18,3 @@ export declare const HAS_MEDIA_SESSION: boolean;
     onNextTrack?: (...args: any[]) => any;
-    [key: string]: any;
 }
 export {};

dist/index.d.ts

@@ -1,3 +0,6 @@
-import { MediaSessionProps } from './constant';
-declare const Wrapper: (props: MediaSessionProps) => any;
-export default Wrapper;
+import React from 'react';
+import { HAS_MEDIA_SESSION, MediaSessionProps } from './constant';
+import useMediaSession from './use_media_session';
+declare const MediaSessionWrapper: (props: React.PropsWithChildren<MediaSessionProps>) => JSX.Element;
+export { HAS_MEDIA_SESSION, useMediaSession };
+export default MediaSessionWrapper;

dist/index.js

@@ -8,6 +8,3 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-var _navigator = navigator,
-    mediaSession = _navigator.mediaSession;
-
-var MediaSession = function MediaSession(props) {
+var useMediaSession = function useMediaSession(props) {
   var _props$title = props.title,
@@ -26,4 +23,5 @@ title = _props$title === void 0 ? '' : _props$title,
       onPreviousTrack = props.onPreviousTrack,
-      onNextTrack = props.onNextTrack,
-      children = props.children;
+      onNextTrack = props.onNextTrack;
+  var _navigator = navigator,
+      mediaSession = _navigator.mediaSession;
   React.useEffect(function () {
@@ -76,8 +74,30 @@ mediaSession.metadata = new MediaMetadata({
   }, [onNextTrack]);
-  return children || null;
 };
 
-var Wrapper = function Wrapper(props) {
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var MediaSession = function MediaSession(props) {
+  var children = props.children,
+      rest = _objectWithoutPropertiesLoose(props, ["children"]);
+
+  useMediaSession(rest);
+  return React__default.createElement(React.Fragment, null, children || null);
+};
+
+var MediaSessionWrapper = function MediaSessionWrapper(props) {
   if (!HAS_MEDIA_SESSION) {
-    return props.children || null;
+    return React__default.createElement(React.Fragment, null, props.children || null);
   }
@@ -88,3 +108,5 @@
 
-module.exports = Wrapper;
+exports.HAS_MEDIA_SESSION = HAS_MEDIA_SESSION;
+exports.default = MediaSessionWrapper;
+exports.useMediaSession = useMediaSession;
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -1,9 +0,6 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, Fragment } from 'react';
 
 var HAS_MEDIA_SESSION = window && window.navigator && 'mediaSession' in window.navigator;
 
-var _navigator = navigator,
-    mediaSession = _navigator.mediaSession;
-
-var MediaSession = function MediaSession(props) {
+var useMediaSession = function useMediaSession(props) {
   var _props$title = props.title,
@@ -22,4 +19,5 @@ title = _props$title === void 0 ? '' : _props$title,
       onPreviousTrack = props.onPreviousTrack,
-      onNextTrack = props.onNextTrack,
-      children = props.children;
+      onNextTrack = props.onNextTrack;
+  var _navigator = navigator,
+      mediaSession = _navigator.mediaSession;
   useEffect(function () {
@@ -72,8 +70,30 @@ mediaSession.metadata = new MediaMetadata({
   }, [onNextTrack]);
-  return children || null;
 };
 
-var Wrapper = function Wrapper(props) {
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var MediaSession = function MediaSession(props) {
+  var children = props.children,
+      rest = _objectWithoutPropertiesLoose(props, ["children"]);
+
+  useMediaSession(rest);
+  return React.createElement(Fragment, null, children || null);
+};
+
+var MediaSessionWrapper = function MediaSessionWrapper(props) {
   if (!HAS_MEDIA_SESSION) {
-    return props.children || null;
+    return React.createElement(Fragment, null, props.children || null);
   }
@@ -84,3 +104,4 @@
 
-export default Wrapper;
+export default MediaSessionWrapper;
+export { HAS_MEDIA_SESSION, useMediaSession };
 //# sourceMappingURL=index.modern.js.map

dist/media_session.d.ts

@@ -0,3 +1,4 @@
+import React from 'react';
 import { MediaSessionProps } from './constant';
-declare const MediaSession: (props: MediaSessionProps) => any;
+declare const MediaSession: (props: React.PropsWithChildren<MediaSessionProps>) => JSX.Element;
 export default MediaSession;

package.json

 {
   "name": "@mebtte/react-media-session",
-  "version": "1.0.2",
+  "version": "1.1.1",
   "description": "The react component that wraps MediaSession.",
-  "author": "mebtte<[e-mail]>",
+  "author": "mebtte<[e-mail]>",
   "license": "MIT",
@@ -25,3 +25,4 @@ "keywords": [
     "build": "microbundle-crl --no-compress --format modern,cjs",
-    "dev": "microbundle-crl watch --no-compress --format modern,cjs"
+    "dev": "microbundle-crl watch --no-compress --format modern,cjs",
+    "prepublish": "npm run build"
   },
@@ -28,0 +29,0 @@ "peerDependencies": {

README.md

@@ -5,4 +5,3 @@ # react-media-session
 
-![](./example/public/chrome_example.gif)
-![](./example/public/android_example.png)
+![](./screenshots/android.png)
 
@@ -13,6 +12,7 @@ # What is `MediaSession`
 - [Google](https://developers.google.com/web/updates/2017/02/media-session)
+- [Can I use](https://caniuse.com/?search=mediasession)
 
 # Requirement
 
-- `react` >= 16.8 with `hook`
+- `react` >= 16.8 with `hooks`
 
@@ -27,12 +27,9 @@ # Installation
 
+## As component
+
+When browser do not support `mediaSession`, it will be render `children` only.
+
 ```jsx
 import MediaSession from '@mebtte/react-media-session';
 
-/**
- * <MediaSession {...props} />
- * or
- * <MediaSession {...props}>
- *   children
- * </MediaSession>
- */
 <MediaSession
@@ -54,11 +51,55 @@ title="Way back"
   ]}
-  onPlay={() => audio.play()}
-  onPause={() => audio.pause()}
-  onSeekBackward={() => (audio.currentTime -= 10)}
-  onSeekForward={() => (audio.currentTime += 10)}
-  onPreviousTrack={() => playPreviousMusic()}
-  onNextTrack={() => playNextMusic()}
-/>;
+  onPlay={audio.play}
+  onPause={audio.pause}
+  onSeekBackward={onSeekBackward}
+  onSeekForward={onSeekForward}
+  onPreviousTrack={playPreviousMusic}
+  onNextTrack={playNextMusic}
+>
+  children or null
+</MediaSession>;
 ```
 
+## As hooks
+
+```jsx
+import { useMediaSession } from '@mebtte/react-media-session';
+
+const Component = () => {
+  // ...
+
+  useMediaSession({
+    title: 'Way back',
+    artist: 'Vicetone,Cozi Zuehlsdorff',
+    album: 'Way Back',
+    artwork: [
+      {
+        src: 'cover_large.jpeg',
+        sizes: '256x256,384x384,512x512',
+        type: 'image/jpeg',
+      },
+      {
+        src: 'cover_small.jpeg',
+        sizes: '96x96,128x128,192x192',
+        type: 'image/jpeg',
+      },
+    ],
+    onPlay: audio.play,
+    onPause: audio.pause,
+    onSeekBackward,
+    onSeekForward,
+    onPreviousTrack,
+    onNextTrack,
+  });
+
+  // ...
+};
+```
+
+When using hooks, you must make sure `mediaSession` exists. You can judge by blow.
+
+```js
+import { HAS_MEDIA_SESSION } from '@mebtte/react-media-session';
+```
+
 # Props
@@ -79,14 +120,9 @@
 
-# Example
+# Screenshot
 
-- [https://mebtte.github.io/react-media-session](https://mebtte.github.com/react-media-session)
-  > Please use browser that support `mediaSession`, see it on [caniuse](https://caniuse.com/#search=mediaSession).
+- [Android Chrome](./screenshots/android.png)
+- [PC Chrome](./screenshots/chrome.png)
 
-# Question
-
-- If browser do not support `mediaSession`, will it throw error?
-  > if browser do not support `mediaSession`, it will do nothing.
-
 # LICENSE
 
 MIT

src/constant.ts

@@ -22,4 +22,2 @@ export const HAS_MEDIA_SESSION =
   onNextTrack?: (...args: any[]) => any;
-
-  [key: string]: any;
 }

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

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

574732

increased by2207.6%

Number of package files

18

increased by38.46%

Lines of code

330

increased by17.44%

Number of lines in readme file

124

increased by40.91%

No dependency changes