vinayakkulkarni / v-clappr

👏🏻Vue.js wrapper for Clappr media player

V-Clappr 🎥

---

Features

• Built with latest @clappr/core
• Built from scratch using TypeScript
• Built for Vue 3 using Vite

---

Demo

---

Table of Contents

• V-Clappr 🎥
  • Features
  • Demo
  • Table of Contents
  • Requirements
    • Build Setup
  • Installation
  • Usage
  • Example(s)
  • API
    • Props
    • Events
  • Contributing
  • Author
  • License

Requirements

• Vue 3.x
• @clappr/core
• @clappr/plugins
• @clappr/hlsjs-playback

Build Setup

# install dependencies
$ npm ci

# package the library
$ npm run build

Installation

$ npm install v-clappr
$ npm install @clappr/core @clappr/plugins @clappr/hlsjs-playback

Usage

Global component:

// main.ts
import { VClappr } from 'v-clappr';
import { createApp } from 'vue';

const app = createApp({});
app.component('VClappr', VClappr);

Or use locally

// component.vue
<script lang="ts">
import { defineComponent } from 'vue';
import { VClappr } from 'v-clappr';

export default defineComponent({
  components: {
    VClappr,
  },
});
</script>

For Nuxt 3, create a file in plugins/v-clappr.ts

import { VClappr } from 'v-clappr';

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('VClappr', VClappr);
});

Example(s)

Example 1 (w/ all options – refer App.vue)

HTML

<v-clappr
  el="player"
  :source="source"
  :options="options"
  @init="oninit"
  @ready="onready"
  @play="onplay"
  @pause="onpause"
  @stop="onstop"
  @ended="onended"
  @fullscreen="onfullscreen"
  @resize="onresize"
  @seek="onseek"
  @timeupdate="ontimeupdate"
  @volumeupdate="onvolumeupdate"
  @error="onerror"
/>

JS

import { defineComponent, reactive } from 'vue';
import { VClappr } from 'v-clappr';

export default defineComponent({
  name: 'ClapprComponent',
  components: {
    VClappr,
  },
  setup() {
    const state = reactive({
      clappr: null,
      source: 'http://clappr.io/highline.mp4',
      poster: 'http://clappr.io/poster.png',
      options: {
        width: '100%',
        height: '100%',
        autoPlay: false,
        mute: false,
        loop: false,
        language: 'en-US',
        playbackNotSupportedMessage: 'Playback not supported',
        autoSeekFromUrl: true,
        includeResetStyle: true,
        playback: {
          preload: 'metadata',
          disableContextMenu: true,
          controls: false,
          crossOrigin: null,
          playInline: false,
          minimumDvrSize: null,
          externalTracks: [],
          hlsjsConfig: {},
          shakaConfiguration: {},
        },
      },
    });
    const onInit = (clappr: any) => {
      state.clappr = clappr;
    };
    const onReady = (e: any) => {
      console.log('onReady Event: ', e);
    };
    const onResize = (e: any) => {
      console.log('onResize Event: ', e);
    };
    const onPlay = (e: any) => {
      console.log('onPlay Event: ', e);
    };
    const onPause = (e: any) => {
      console.log('onPause Event: ', e);
    };
    const onStop = (e: any) => {
      console.log('onStop Event: ', e);
    };
    const onEnded = (e: any) => {
      console.log('onEnded Event: ', e);
    };
    const onSeek = (e: any) => {
      console.log('onSeek Event: ', e);
    };
    const onError = (e: any) => {
      console.log('onError Event: ', e);
    };
    const onTimeUpdated = (e: any) => {
      console.log('onTimeUpdate Event: ', e);
    };
    const onVolumeUpdated = (e: any) => {
      console.log('onVolumeUpdate Event: ', e);
    };
    const onSubtitleAvailable = (e: any) => {
      console.log('onSubtitleAvailable Event: ', e);
    };

    return {
      state,
      onInit,
      onReady,
      onResize,
      onPlay,
      onPause,
      onStop,
      onEnded,
      onSeek,
      onError,
      onTimeUpdated,
      onVolumeUpdated,
      onSubtitleAvailable,
    };
  },
});

Example 2 (minimal)

HTML

<v-clappr el="my-custom-id" :source="source" />

JS

import { defineComponent, ref } from 'vue';
import { VClappr } from 'v-clappr';

export default defineComponent({
  name: 'ClapprComponent',
  components: {
    VClappr,
  },
  setup() {
    const source = ref('http://clappr.io/highline.mp4');

    return {
      source,
    };
  },
});

API

Props

Name	Type	Required?	Description
el	String	Yes	The id required for initializing Clappr
source	String	Yes	The URL of the video to be fed to Clappr
options	Object	No	Set of options provided by Clappr defaults: L47-L69

Events

Name	Description
ready	Emits an Object the Player instance
resize	Emits an Object with width & height numbers
play	Emits an Boolean value
pause	Emits an Boolean value
stop	Emits an Boolean value
ended	Emits an Boolean value
seek	Emits an Number value
error	Emits an Error type
time-updated	Emits an Object current & total time in microseconds
volume-updated	Emits an Number with current volume
subtitle-available	Emits an Boolean value

Contributing

1. Fork it ( https://github.com/vinayakkulkarni/v-clappr/fork )
2. Create your feature branch (git checkout -b feat/new-feature)
3. Commit your changes (git commit -Sam 'feat: add feature')
4. Push to the branch (git push origin feat/new-feature)
5. Create a new Pull Request

Note:

1. Please contribute using GitHub Flow
2. Commits & PRs will be allowed only if the commit messages & PR titles follow the conventional commit standard, read more about it here
3. PS. Ensure your commits are signed. Read why

Author

v-clappr © Vinayak, Released under the MIT License.
Authored and maintained by Vinayak Kulkarni with help from contributors (list).

vinayakkulkarni.dev · GitHub @vinayakkulkarni · Twitter @_vinayak_k

License

v-clappr's Issues

playInLine settings cannot be set

playback: {
playInline: true
}

It does not allow adjustment.
Can you include it with the update?

Add tests

Add tests to check whether the component accepts the correct props and $emits the correct payloads.

Tests for:

• props
• $emits

Controls are still visible with `controls` set to `false`

Controls are still visible with controls set to false

Settings:

<v-clappr
        el="preview-player-video__video"
        :source="videoUrl"
        :options="{
          width: '100%',
          height: '100%',
          autoPlay: true,
          playback: {
            preload: 'metadata',
            disableContextMenu: true,
            controls: false,
            playInline: false,
            minimumDvrSize: null,
            externalTracks: [],
            hlsjsConfig: {},
            shakaConfiguration: {},
          },
        }"
      />

Output:

It seems like the option controls only disables the duplicate of controls that appear when controls is set to true:

Missing clappr level selector plugin support

couldn't find support for quality level selector. is there any way to use it with v-clappr?

poster doesn't work

poster doesn't work

Player instance is not available in `ready` event

Hi,

According to the documentation here, @ready event should pass the player instance in it's callback argument.

In it's code, v-clapper expects to receive the player instance as the argument of the callback of onReady event. However, clappr-core doesn't appear to return the player instance as an argument for this event, as documented here.

As a result, we don't appear to have any way to access the player instance (correct me if I'm wrong).
This issue is reproducible in the StackBlitz demo, where this line prints undefined in the console:

Also, the example has an @init event that doesn't appear to fire and is not mentioned in the document. Since this event is no longer available, do we have an alternative way to access the player instance?

can not install

By default

npm install v-clappr

pm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: @clappr/[email protected]
npm ERR! node_modules/@clappr/core
npm ERR! @clappr/core@"^0.4.27" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @clappr/core@"^0.7.2" from [email protected]
npm ERR! node_modules/v-clappr
npm ERR! v-clappr@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

When I change to

    "@clappr/core": "^0.7.2",

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: @clappr/[email protected]
npm ERR! node_modules/@clappr/core
npm ERR! @clappr/core@"^0.7.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @clappr/core@"^0.4.27" from @clappr/[email protected]
npm ERR! node_modules/@clappr/hlsjs-playback
npm ERR! @clappr/hlsjs-playback@"^1.3.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Type error: Cannot Read Properties....

Error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'configure') at Proxy.configure (clappr-core.esm.js:7738:17) at VClappr.vue:167:28

I am using either example you have on your GH page. This seems to only occur when using V3 version.

[q] How do you implement clappr plugins?

How do you implement clappr plugins that use jquery?

Missing vue3 build?

In the README there is a hin, that there is a vue 3 variant aviable with For Vue 3.x version – npm i v-clappr@3.
But it wont work.

Duplicate media controls

There appears to be the live stream and then behind it a separate media player.
I tried it with the raw Clappr source and it seems to be specifically a problem with the wrapper.

I'll do as much digging as I can and let you know of anything I find.

Regards,
Rob

Here's my source:
Template:
<v-clappr `:source="source"></v-clappr
VueJS:

import VClappr from 'v-clappr';
export default {
 components: {
    VClappr,
  },
    data: () => ({
    source:'http://92.207.81.31:8080/hls/maplesource.m3u8',
    options: {
      width: 720,
      height: 480,
      poster: 'https://placehold.it/1000x1000',
      mute: true,
      autoplay: false,
      loop: false,
      disable_keyboard_shortcuts: false,
      disable_context_menu: true,
      mediacontrol: { seekbar: '#ffff', buttons: '#66B2FF' },
      ga: {},
      watermark: { },
      plugins: [],
    },
    localclappr: null,
  })
}```

Height and width setting are not adjusted

I add to the options object, but the height and width values are not taken.

options: {
width: '100%',
height: '100%',
}