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

ng-replay

v1.0.6

Published

An angular library to record and replay user events (keyboard, mouse and scroll events).

Downloads

15

Readme

NgReplay

An angular library to record and replay user events (keyboard, mouse and scroll events).

My Skills

This library was generated with Angular CLI version 15.0.0.

Installation :wrench:

npm i ng-replay

The installation has a post install script that will update your projects angular.json to add the assets configuration for the libraries assets. Note: Your angular.json might need to be reformatted after the installation.:hand_over_mouth:
Confirm that these properties have been update in your angular.json.
project->architect->build->options->assets
If these properties where not added, please add them manually.

  {
     glob": "**/*",
    "input": "./node_modules/ng-replay/assets",
    "output": "/assets/"
  }

:warning: Note: After the installation is done, please don't forget to import the module NgReplayModule, in the appropriate module when using in an Angular project.
e.g.

import { NgReplayModule } from 'ng-replay';

@NgModule({
    declarations: [
      ... component declarations
    ],
    imports: [
      NgReplayModule
      ... other imports
    ],
    ... rest of module configuration
})

export class AppModule { }

Usage :man_mechanic:

  • Update the constructor of app.component.ts to setup Ng-Replay.
...imports

import { NgReplayService } from 'ng-replay';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  constructor(private ngReplay: NgReplayService){
    ngReplay.setup();
  }

  .... rest of code
}
  • You can also specify the position of the play and record controls in the setup method as a percentage of the top and left of the screen. Where 0 >= top =< 95 and 0 >= top =< 95.
    Example, positioning at the top left of the screen:
constructor(private ngReplay: NgReplayService){
    ngReplay.setup(0, 94);
  }
  • You can then start the application, once running your should see controls at the bottom right of your screen. The record control will start a session to record and then save the content to a file when stopping the recording. The play control will replay a recorded session after the prompt to select a file, chosen from the previously saved files.

  • Before each replay after selecting a file you can set the replay speed as a percentage of the original speed (0% - 100%), or leave the default value and continue the replay.

Supported events :flags:

The libary currently only supports these events/actions.

  • alphanumeric key presses
  • backspace key press
  • tab key press
  • mouse click event
  • page scroll event
  • element scroll event