stencil-video-timeline

v0.0.1

Published

2 years ago

A StencilJS component for creating a video timeline.

0High
0Medium
0Low

lenonrade

stencil video timeline web components custom elements javascript typescript video

Stencil Video Timeline

A customizable video timeline component built with Stencil.js, designed to be framework-agnostic and easy to integrate into React, Vue, Angular, or any web application.

Installation

Install the package via npm:

npm install stencil-video-timeline

Getting Started

Using in Vanilla JS/HTML

To use the component in a plain HTML/JavaScript project:

1. Include the component’s loader in your HTML:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Stencil Video Timeline Example</title>
  <script src="node_modules/stencil-video-timeline/dist/stencil-video-timeline/stencil-video-timeline.esm.js" type="module"></script>
  <script src="node_modules/stencil-video-timeline/dist/stencil-video-timeline/stencil-video-timeline.js" nomodule defer></script>
</head>
<body>
  <stencil-video-timeline></stencil-video-timeline>

  <script>
    // Optional: Initialize the component
    stencilVideoTimeline.defineCustomElements(window);
  </script>
</body>
</html>

2. Use the component in your HTML:

<stencil-video-timeline
  canvas-height="50"
  play-time="1609459200000"
  speed="1000"
  for-ward-value="5000"
  start-time-threshold="1609455600000"
  end-time-threshold="1609462800000"
  is-play-click="false"
></stencil-video-timeline>

Using with React

1. Install the React wrapper:

npm install stencil-video-timeline-react

2. Import and use the component:

// App.jsx
import React from 'react';
import { defineCustomElements } from 'stencil-video-timeline/loader';
import { StencilVideoTimeline } from 'stencil-video-timeline-react';

defineCustomElements(window);

function App() {
  return (
    <div>
      <StencilVideoTimeline
        canvasHeight={50}
        playTime="1609459200000"
        speed={1000}
        forWardValue={5000}
        startTimeThreshold="1609455600000"
        endTimeThreshold="1609462800000"
        isPlayClick={false}
      />
    </div>
  );
}

export default App;

Using with Vue

1. Install the Vue wrapper:

npm install stencil-video-timeline-vue

2. Register the component:

// main.js
import Vue from 'vue';
import App from './App.vue';
import { applyPolyfills, defineCustomElements } from 'stencil-video-timeline/loader';

Vue.config.productionTip = false;

applyPolyfills().then(() => {
  defineCustomElements(window);
});

new Vue({
  render: (h) => h(App),
}).$mount('#app');

3. Use the component in your Vue template:

<!-- App.vue -->
<template>
  <div>
    <stencil-video-timeline
      :canvas-height="50"
      :play-time="1609459200000"
      :speed="1000"
      :for-ward-value="5000"
      :start-time-threshold="1609455600000"
      :end-time-threshold="1609462800000"
      :is-play-click="false"
    ></stencil-video-timeline>
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

Using with Angular

1. Install the Angular wrapper:

npm install stencil-video-timeline-angular

2. Add the custom elements schema to your app module:

// app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent],
})
export class AppModule {}

3. Initialize the component loader:

// main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { defineCustomElements } from 'stencil-video-timeline/loader';

import { AppModule } from './app/app.module';

defineCustomElements(window);

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch((err) => console.error(err));

4. Use the component in your Angular template:

<!-- app.component.html -->
<stencil-video-timeline
  [canvasHeight]="50"
  [playTime]="1609459200000"
  [speed]="1000"
  [forWardValue]="5000"
  [startTimeThreshold]="1609455600000"
  [endTimeThreshold]="1609462800000"
  [isPlayClick]="false"
></stencil-video-timeline>

Properties

| Property | Attribute | Type | Default | Description | |--------------------|---------------------|-----------------------|---------------------------------------|---------------------------------------------------------| | canvasHeight | canvas-height | number | 50 | The height of the canvas element. | | playTime | play-time | number | string | Date | Date.now() | The current playback time in milliseconds. | | speed | speed | number | 1000 | The playback speed in milliseconds. | | forWardValue | for-ward-value | number | 5000 | Time to skip forward or backward in milliseconds. | | startTimeThreshold | start-time-threshold | number | string | Date | Date.now() - 12 * 3600 * 1000 | The start time threshold in milliseconds. | | endTimeThreshold | end-time-threshold | number | string | Date | Date.now() + 12 * 3600 * 1000 | The end time threshold in milliseconds. | | isPlayClick | is-play-click | boolean | false | Whether the play button has been clicked. | | videoCells | - | Array | [] | Array of video cell objects representing clips. | | borderColor | border-color | string | '#fff' | The color of the canvas border. | | bgColor | bg-color | string | '#fff' | The background color of the canvas. | | bottomLineColor | bottom-line-color | string | 'rgba(0,0,0,1)' | The color of the bottom line on the timeline. | | verticalBarColor | vertical-bar-color | string | 'rgba(0,0,0,1)' | The color of the vertical bars on the timeline. | | playBarColor | play-bar-color | string | '#448aff' | The color of the play bar. |

Methods

The component exposes several methods for controlling playback and timeline behavior.

onPlayClick() — Starts playback.

await stencilVideoTimeline.onPlayClick();

onPauseClick() — Pauses playback.

await stencilVideoTimeline.onPauseClick();

forward() — Skips forward by the specified amount in forWardValue.
```
await stencilVideoTimeline.forward();
```
backward() — Skips backward by the specified amount in forWardValue.
```
await stencilVideoTimeline.backward();
```

Events

The component emits several events you can listen to:

| Event Name | Description | |------------|------------------------------------------| | playClick| Emitted when the play button is clicked. | | onMouseUp | Emitted when the mouse button is released.| | onMouseDown| Emitted when the mouse button is pressed down.| | onKeyUp | Emitted when a key is released. | | onKeyDown | Emitted when a key is pressed down. |

Listening to Events

In JavaScript:

const timeline = document.querySelector('stencil-video-timeline');
timeline.addEventListener('playClick', (event) => {
  console.log('Play clicked:', event.detail);
});

In React:

<StencilVideoTimeline
  onPlayClick={(event) => {
    console.log('Play clicked:', event.detail);
  }}
/>

In Vue:

<stencil-video-timeline @playClick="handlePlayClick"></stencil-video-timeline>

<script>
export default {
  methods: {
    handlePlayClick(event) {
      console.log('Play clicked:', event.detail);
    },
  },
};
</script>

In Angular:

<stencil-video-timeline (playClick)="handlePlayClick($event)"></stencil-video-timeline>

// app.component.ts
export class AppComponent {
  handlePlayClick(event: CustomEvent) {
    console.log('Play clicked:', event.detail);
  }
}

Styling

You can style the component using properties or by targeting CSS variables:

| CSS Variable | Description | |-----------------------------|--------------------------------------| | --timeline-border-color | The border color of the timeline | | --timeline-bg-color | The background color | | --timeline-play-bar-color | The color of the play bar | | --timeline-vertical-bar-color | The color of vertical bars | | --timeline-bottom-line-color | The color of the bottom line |

Example

stencil-video-timeline {
  --timeline-border-color: #ccc;
  --timeline-bg-color: #f9f9f9;
  --timeline-play-bar-color: #ff0000;
}

Contributing

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License

This project is licensed under the MIT License.