npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

webscreensaver

v1.0.5

Published

A vanilla JavaScript library to create a video screensaver experience within the browser.

Downloads

8

Readme

webscreensaver

A vanilla JavaScript library to create a video screensaver experience within the browser.

This library can be used to enable a rotating video screensaver after a specified duration since the last detection of user activity. By default the screensaver will fade in a random video from a specified set defined during initialization that will encompass the entire browser window. Alternatively the plugin can be initialized on a particular <div/> and will feature screensaver functionality within said <div/>. The option also exists to control the rotating screensaver via manual keyboard shortcuts.

Table of Contents

  1. Getting Started
  2. Options
  3. Methods

Getting Started

  1. Fetch the plugin
$ npm install webscreensaver
  1. Include the plugin
<script src="node_modules/webScreenSaver/dist/webScreenSaver.js"></script>
  1. Initialize

Full Browser:

var wss = new WebScreensaver({
  videos: [{
    webm: '//video.webm',
    mp4: '//video.mp4'
  },
  ...
});

DIV Contained:

var wss = new WebScreensaver({
  target: document.querySelector('.vid-wrap'),
  videos: [{
    webm: '//video.webm',
    mp4: '//video.mp4'
  },
  ...
});

// ensure target has `overflow:hidden` and has a `position` explicitly set

Options

| Name | Example | Description | | ---- | ------- | ----------- | | target | document.querySelector('.vid-wrap') | DOM element to contain screensaver. By default this will be on the body tag. | videos | [{mp4:'//abc.com/video.mp4',webm:'//abc.com/video.webm'}] | An array of video objects containing a key value mapping of file type and file URL | | stagnantTrigger | true | Flag indicating if the screensaver will activate based on the absence of user activity on the page otherwise keyboard events will act as the trigger. Default is true. | | stagnantDelay | 5000 | Time in milliseconds of user inactivity before screensaver will trigger if stagnantTrigger is true. | | interval | 120000 | Time in milliseconds each video should play for before switching to the next video in the provided videos array. If the actual video duration is shorter than the specified interval then the actual video length will be the interval length. | | triggerKeycode | 32 | Keycode of the keyboard key that will trigger the start and stop of the screensaver. Default is the spacebar indicated by keycode 32. Only applicable if stagnantTrigger is false. | | nextVidKeycode | 39 | Keycode of the the keyboard key that will trigger the switch to the next video of the screensaver. Default is the right arrow key indicated by the keycode 39. Only applicable if stagnantTrigger is false. |

Methods

| Name | Description | | ---- | ----------- | | startSaver | Programmatically starts the screensaver. | | stopSaver | Programmatically stops the screensaver. |