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

@liveryvideo/interactive

v3.8.0

Published

Livery video interactive application for use in web browsers.

Downloads

38

Readme

Livery Interactive Client

This is a frontend application for Livery interactive video client

Getting Started

Dependencies

  • node
  • nvm
  • yarn@1

Installing

nvm use
yarn install

Executing program

yarn start

Testing

This project used jest for unit testing and cypress for e2e testing

  • Run all unit tests
yarn test
  • Run logic tests
yarn test:application
  • Run ui tests
yarn test:ui
  • Run e2e tests
yarn cy:run
yarn cy:open
  • Open e2e dashboard
yarn cy:open

Cloud Cypress dashboard

Publishing

Prerequisite

  • Make a release branch from development
  • Set a desired package version in the package.json
  • Merge all feature branches into the release branch

Pipeline Trigger

  • Merge ~~feature~~ release PR into development
  • Go to CircleCI project, select development branch, and press Trigger Pipeline
  • In your local machine run npm deploy
  • ~~Add version parameter. Accepts string value. patch, minor, or major should be mainly used but a custom string is also supported~~

If you want to deploy a test package

  • add preId to the version in the package.json, like so 1.0.0-rc.1
  • Add a tag, when deploying a package npm publish --tag rc
  • To install this specific version, users will have to run: npm install @liveryvideo/[email protected]

~~Pull Request Trigger~~

  • ~~Merge feature PR into development~~
  • ~~Merge development PR into main. The main branch will trigger the increment_package_version CircleCI job~~
  • ~~Defaults to patch updates. Add [npm minor] or [npm major] to the latest commit message to trigger the equivalent version updates~~
  • ~~For PRs: add the [npm X] tag to the merge commit of the PR to trigger the expected version update~~

Usage

This interactive client can be embedded within the Livery Video Player two ways: iFrame and web component.

iFrame

The project's build flow is set up to generate a deployable bundle to any environment handled in Ex Machina's devops panel. All files and assets are deployed to the specified environment and loaded within the iFrame.

Example test URL: https://embed.livery.live/?id=5ddb98f5e4b0937e6a4507f2&livery_interactive=https://dev-stable.interactive.livery.live?livery_tenantid=____8SDWDJfHfXtGwM0AAA==

The livery_interactive query parameter can be replaced with any URL and that URL will be loaded in the iFrame.

Web component

The project's build flow is set up to generate a package that gets published to NPM that can then be loaded by the video player. This package injects the interactive client into a custom element added by the video player.

Package URL: https://www.npmjs.com/package/@liveryvideo/interactive

Example test URLs:

  • Beta: https://beta.d3laskrvv57qvc.amplifyapp.com/?livery_interactive=latest;dev-stable;____8SDWDJfHfXtGwM0AAA==
  • Embed: https://embed.livery.live/?id=5ddb98f5e4b0937e6a4507f2&v=beta&livery_interactive=latest;dev-stable;____8SDWDJfHfXtGwM0AAA==

The livery_interactive query parameter is split into <package version>;<region>;<tenant ID>. Package version is the version published to NPM or latest. Region is the environment name that the backend is hosted on (for example dev-stable for backend.dev-stable.interactive.livery.live). Tenant ID is the id of the tenant to be used.

To test and develop the web component locally a proxy (ie. Charles Proxy) has to be used to map https://cdn.jsdelivr.net/npm/@liveryvideo/interactive@latest to a local build of the package.

0 - install and set up charles notion 1 - add cdn.jsdelivr.net tp SSL proxy. 2 - run build:package_hot command 3 - map https://cdn.jsdelivr.net/npm/@liveryvideo/interactive@latest to http://localhost:8080/index.js 4 - open dev/dev-stable and source code should be from your local machine

Contributors

Contributors names and contact info

License

This project is licensed under the MIT License