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

@preply/video

v27.39.1

Published

## Development ### Local development(Standalone, recommended) - `npm start` - to have stage40 API endpoing (recommended) - `npm run start:local` - to have monolith API endpoint - `npm run start:prod` - to have prod API endpoint (use it only if you

Downloads

433

Readme

Preply Video

Development

Local development(Standalone, recommended)

  • npm start - to have stage40 API endpoing (recommended)
    • npm run start:local - to have monolith API endpoint
    • npm run start:prod - to have prod API endpoint (use it only if you know what to do)
  • open http://localhost:9002/classroom/{COLLOCUTOR_ID} for the new classroom experience or http://localhost:9002/oldPs/{COLLOCUTOR_ID} for the old one`
  • by default we use API endpoint from the stage40 so make sure you are logined as a tutor or a student.
  • To choose video provider for local development, change videoProvider prop here(client/@preply/video/src/devMode.js#L65)
  • You will have to login http://localhost:9002/en/login (see notes below about API Proxy below)

API Proxy

To prevent CORS errors, we proxy all calls to /graphql, /api and a few other endpoints via localhost using webpack-dev-server:proxy.

We also proxy the monolith's authentication routes (e.g.: /**/login) so that you can login locally (with credentials or social network) and acquire your session cookies @localhost.

Local development inside inside Another App e.g. Preply Space

In @preply/video

npm link # installs a global symlink to make "npm link @preply/video" possible
npm i
npm start

In preply-space

npm i
npm link @preply/video # pick up that symlink
npm start

Tip: this shows all your globally-linked npm packages: npm ls -g --depth=0 --link=true

Monitoring / Alerting

Errors from this service are reported to Sentry under client-pkgs project.

To filter errors that are only related to this service use source tag.

Before release

  1. Make sure you have incremented video version(https://docs.npmjs.com/about-semantic-versioning)
  2. Run npm version x.y.z to incremented version and update package.json, package-lock.json

Date localization

All datetime that goes from BE is in UTC time, we have to format this to user timezone format. Please, use only useTimeZone, toZonedDate, and FormattedDate for date localization. Example:

const { timeZone } = useTimeZone();
const localDatetime = toZonedDate(new Date(datetime), timeZone);
return <FormattedDate value={localDatetime} />

Codestyle

  1. Refer to the ESLint in Preply: How to for a detailed guide on how we pursue the same codestyle within different projects at Preply. :bulb: You’ll need to install dependencies in the repo root by running yarn there to enable linting via CLI.

  2. Please, use tokens from @preply/ds-web-core for styles such as font-size, padding, margins, etc theme file; Example: Bad:

        font-size: 16px;
        color: #3bb3bd;
        padding: 16px;

    Good:

        font-size: t(text.small.regular.body.fontSize);
        color: t(color.background.positiveLight);
        padding: ${t(spacing[16])};
  3. Name custom hooks with name starting with use details so as to avoid breaking app in case of incorrect hook usage details

Release

Follow this readme

Common flow

  1. Merge your PR with video feature
  2. CI autopublishes new video in NPM
  3. Wait for Jenkins PR(It looks like Update dependency @preply/chat to )
    • If Jenkins bot didn't create PR (usually it takes up to 10 mins after a package was deployed) check Jenkins jobs. You can also trigger it manually by calling:
docker run renovate/renovate --token=$GITHUB_TOKEN --dry-run=true preply/apollo
  1. Start /dynamic in this PR and check video on each service

Manual(only if CI autopublish doesn't work):

1. Via CI

  1. Create GH release: 1.1. Tag version: client-video-${VERSION FROM PACKAGE.JSON} e.g. client-video-1.2.3 1.2. Target: master or your branch of PR with video changes 1.3. Release title: the same as tag version
  2. Go to Prod_Flow in jenkins CI
  3. Choose client-video servise
  4. Choose tag

2. Locally (Only if CI doesn't work)

npm run build
npm publish

3. Publish alfa/beta version

  1. Create PR with your branch
  2. Create new tag from your branch e.g: git tag client-video-6.4.0-alfa.0
  3. Push new tag e.g: git push origin client-video-6.4.0-alfa.0
  4. Go to CI(jenkins), chose your service and tag then press button Build

Projects which use video (better do a lookup in package.json files throughout the repo 'cause this might update):

  1. EDU

Recommendations for use

  • do not use heavy packages as it increases bundle size(such as moment js)

Testing

We have limited e2e tests coverage, so we have to test video package manually also according to the QA framework

  1. Create PR and build dynamic using /dynamic npm
  2. Wait for e2e tests to pass
  3. Test chat manually according to the QA framework (at least 1 device with 1 resolution)