https://github.com/praem90/clappr-emoji-chat

Emoji chat plugin for clappr
https://github.com/praem90/clappr-emoji-chat

chat clappr emoji plugin

Last synced: about 5 hours ago
JSON representation

Emoji chat plugin for clappr

• Host: GitHub
• URL: https://github.com/praem90/clappr-emoji-chat
• Owner: praem90
• License: mit
• Created: 2019-06-24T07:00:55.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T07:07:53.000Z (almost 2 years ago)
• Last Synced: 2024-11-11T08:46:57.200Z (4 days ago)
• Topics: chat, clappr, emoji, plugin
• Language: JavaScript
• Homepage: https://praem90.github.io/clappr-emoji-chat/
• Size: 1.31 MB
• Stars: 0
• Watchers: 0
• Forks: 1
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Clappr Emoji Chat Plugin

A Clappr plugin for add emiji and live viewers count. You can integrate and update count using web socket like socket.io or your own way

### Installation

Install Using npm 

`npm i --save clappr-emoji-chat`

Install using CDN 

Inlcude the plugin src next to the clappr src like below

```

...

 

// Add this plugin to your clappr options 

  let player = new Clappr.player({

    ...

    plugins: [ClapprEmojiPlugin],

    emojiChat: {

      // This plugin provides below emojis out of the box.

      emojis: [

        'like',

        'love',

        'haha',

        'wow',

        'sad',

        'angry',

      ],

      onClick: EmojiClickHandler,

      bottom: false, //By deafault emoji container should takes place on the left. If set to `true`, it will be placed to the bottom 

    }

  });

  

  // Emoji Click handler

  // @param emoji string Emoji name 

  function EmojiClickHandler (emoji) {

    console.log(emoji + 'was clicked'); // haha was clicked 

    // Do your own operation here

  }

  // To Update view count

  player.getPlugin('EmojiChatPlugin').updateViewCount(10);

  

  // TO update emoji click count, 

  // @param string emoji name

  // @param int click count

  player.getPlugin('EmojiChatPlugin').updateEmojiCount('haha', 10);

...

```

Now you can see emojis on your player. ENJOY!!

### Template

Below template structure, You can use your css to update these

```

.emoji-container

  ul.emiji-list

    li.emoji-list-item

      span.emoji-icon.emoji-icon-{emojiName}

      span.emoji-icon-{emojiName}-count

```

### Add custom emoji

Add an element to `emojiChat.emojis` option on clappr options. Add css to style your emoji like `.emoji-icon-{emojiName}::after {content: "/*Your emoji utf-8 code*/"}`

```

  let player = Clappr.player({

    ...

    plugins: [EmojiChatPlugin],

    emojiChat: {

      emojis: [

        ...

        "beers"

      ]

    }

    ...

  });

  // And in your css

  .emoji-icon-beers::after {

    content: "\1F37B"

  }

```