yigithanyucedag/react-ambient-player

Video player backlight changing according to video content

React Ambient Player

Video player backlight changing according to video content

Installation

npm install react-ambient-player

Usage

import React from "react";
import AmbientPlayer from "react-ambient-player";

const App = () => {
  return (
    <AmbientPlayer
      videoProps={{
        width: 640,
        height: 360,
      }}
      sources={[
        {
          src: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
          type: "video/webm",
        },
        {
          src: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4",
          type: "video/mp4",
        },
      ]}
    />
  );
};

export default App;

Props

Name	Type	Default	Description
sources	Array<{ src: string; type: string; }>	undefined	Array of sources to be used by the video element.
interval	number	5000	Frame extraction interval in milliseconds.
videoProps	VideoHTMLAttributes<HTMLVideoElement>	undefined	Props to be passed to the video element.

License

MIT

Author

Yiğithan

react-ambient-player's Issues

Global CSS cannot be imported from within node_modules.

The Global CSS import are deprecated.

this is the error:

(node:2596) [DEP_WEBPACK_MODULE_ISSUER] DeprecationWarning: Module.issuer: Use new ModuleGraph API
(Use node --trace-deprecation ... to show where the warning was created)
error - ./node_modules/react-ambient-player/style.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/react-ambient-player/AmbientPlayer.js
Import trace for requested module:
./node_modules/react-ambient-player/style.css
./node_modules/react-ambient-player/AmbientPlayer.js
./node_modules/react-ambient-player/index.js
wait - compiling /_error (client and server)...
error - ./node_modules/react-ambient-player/style.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/react-ambient-player/AmbientPlayer.js

Import trace for requested module:
./node_modules/react-ambient-player/style.css
./node_modules/react-ambient-player/AmbientPlayer.js
./node_modules/react-ambient-player/index.js