@gobistories/gobi-web-integration
[![npm version](https://badge.fury.io/js/%40gobistories%2Fgobi-web-integration.svg)](https://badge.fury.io/js/%40gobistories%2Fgobi-web-integration)
Last updated 2 months ago by ovikholt .
Apache-2.0 · Repository · Original npm · Tarball · package.json
$ cnpm install @gobistories/gobi-web-integration 
SYNC missed versions from official npm registry.

npm version

Gobi Web Integration

Welcome to Gobi Web Integration. This library will let you put your Gobi stories on your site.

If you are a user of the library, read the documentation at GitHub. This documentation is for developers.

Browser Support

The library will work in IE 11+, Chrome, Firefox, Safari, and Opera.

Development (how to build and publish)

The package is available at npm.

Run:

npm run build

This populates the dist/ folder which will be used when publishing. Note, that this folder doesn't get committed.

Commit your work. When your working directory is clean, continue.

To automatically bump version numbers in package.json according to semver rules, and also automatically create a commit, run (usually, just choose patch):

npm version [major | minor | patch]

Push your work.

Finally, publish your new version:
OLD WAY:

npm login  (only if needed)
npm publish

NEW WAY: Just do the npm version and push. Cloud Build will publish.


Technical documentation

Bubbles Constructor

Function which creates a bubble layout with an already embedded player.

Create

<head>
  <script src="https://unpkg.com/@gobistories/gobi-web-integration"></script>
</head>
<body>
  <div id="container"></div>
  <script>
        new gobi.Bubbles({
          container: '#container',
          stories: [{
                id: 'story-key',
                title: 'Some Title'
            }, {
                id: 'another-story-key',
                title: 'Some Another Title'
            }],
        });
  </script>
</body>

Options

option default description
container #gobi-here Required. String. Query Selector for HTMLElement. Container where the module will be embed.
color #15d6ea Any valid css color value (#000, rgb(...), rgba(...)). The color of the border around the story bubble.
bubbleSize 96px Valid css size value, except % (10px, 10vw...). The size of the avatar aka bubble.
animatedBubble false Boolean. Makes the bubbles as gif animation.
verticalOrientation false Boolean. Makes the bubbles appear vertically.
wrap false Boolean. Add styles which allow a horizontal series of bubbles to wrap to new lines, when the screen is narrow.
isFullHeightMobile true Boolean. Add styles which allow making a full-screen popup. It's work only on mobile phone
showPlayIcon false Boolean. Add Play icon inside the bubbles
align center String. Valid values 'left', 'right', 'end', 'start', 'center' . It sets alignment for bubbles horizontally
autoSegue false Boolean. Enable or disable the transition to next story in the end
on.loaded ()=>{} Function. Called when all Bubbles have loaded.
stories [] Required. Array. Data of stories.
stories[0...n].id `` Required. String. Identifire of story.
stories[0...n].title `` String. Change title text of specific story.
stories[0...n].bubbleSrc `` String. Avatar URL of specific story.
playerOptions {} Object. Provides an interface for customization of the player.
playerOptions.container `` Query Selector for HTMLElement. Container where the player will be inserted.
playerOptions.autoStart false Boolean. Add autoplay attributes to the video.
playerOptions.loop false Boolean. Add loop function to video.
playerOptions.roundedCorners true Boolean. Enable or disable rounded corners to player element.
playerOptions.shadow true Boolean. Enable or disable shadow on the player element.
playerOptions.width 612 Number. Set player width. If height option is not defined it will calculate automaticaly depending on aspect ration 16:9.
playerOptions.height 1088 Number. Set player height. If width option is not defined it will calculate automaticaly depending on aspect ration 16:9.
playerOptions.checkViewPort true Boolean. Enable functionality which pause player if it outside of screen view area.
playerOptions.enableHls true Boolean. Enable or disable a HLS (HTTP Live Streaming).
playerOptions.playButton true Boolean. Enable or disable play button
playerOptions.logo true Boolean. Enable or disable Gobi logo. It ignores if autoSegue set to true
playerOptions.savePosition true Boolean. Enable or disable save last watched chapter. It needs to confirm policy by user
playerOptions.on [] Array. Data of event listener
playerOptions.on.videoPlay ()=>{} Function. The callback for the play event
playerOptions.on.videoPause ()=>{} Function. The callback for the pause event
playerOptions.on.videoComplete ()=>{} Function. The callback for the complete event
playerOptions.on.clipChange ()=>{} Function. The callback for the change chunk event
playerOptions.on.clickPrevious ()=>{} Function. The callback for the change to previous chunk event
playerOptions.on.chunkProgress ()=>{} Function. The callback for the update chunk progress event
playerOptions.on.clickNext ()=>{} Function. The callback for the change to nuxt chunk event
playerOptions.on.newIteration ()=>{} Function. The callback for the new iteration event
playerOptions.on.error ()=>{} Function. The callback for the error event
playerOptions.on.loaded ()=>{} Function. The callback for the loaded event

Player Constructor

Creates a Player and returns an interface for managing it, and for listening to its events.

Example

<head>
  <script src="https://unpkg.com/@gobistories/gobi-web-integration"></script>
</head>
<body>
  <div id="player-container"></div>
  <script>
        new gobi.Player({
          container: '#player-container',
          storyId: 'story-key',
          on: {
            'videoPlay': function(){
              console.log('played the video!')
            },
          }
        });
  </script>
</body>

Options

If you change options, make sure to update the documentation at GitHub.

option default description
container `` Query Selector for HTMLElement. Container where the player will be inserted.
storyId `` Required. String. The key of the story.
autoStart false Boolean. Add autoplay attributes to the video.
loop false Boolean. Add loop function to video.
roundedCorners true Boolean. Enable or disable rounded corners to player element.
shadow true Boolean. Enable or disable shadow on the player element.
width 612 Number. Set player width. If height option is not defined it will calculate automaticaly depending on aspect ration 16:9.
height 1088 Number. Set player height. If width option is not defined it will calculate automaticaly depending on aspect ration 16:9.
checkViewPort true Boolean. Enable functionality which pause player if it outside of screen view area.
enableHls true Boolean. Enable or disable a HLS (HTTP Live Streaming).
playButton true Boolean. Enable or disable play button
logo true Boolean. Enable or disable Gobi logo.
savePosition true Boolean. Enable or disable save last watched chapter. It needs to confirm policy by user
on [] Array. Data of event listener
on.videoPlay ()=>{} Function. The callback for the play event
on.videoPause ()=>{} Function. The callback for the pause event
on.videoComplete ()=>{} Function. The callback for the complete event
on.chunkProgress ()=>{} Function. The callback for the update chunk progress event
on.clickPrevious ()=>{} Function. The callback for the change to previous chunk event
on.clickNext ()=>{} Function. The callback for the change to nuxt chunk event
on.clipChange ()=>{} Function. The callback for the change chunk event
on.newIteration ()=>{} Function. The callback for the new iteration event
on.error ()=>{} Function. The callback for the error event
on.loaded ()=>{} Function. The callback for the loaded event

loaded

Occurs when meta data for the video has been loaded. The player gets the size and begins to occupy space on the page. callback data:

chunInd:0...n

play

Sent when the playback state is no longer paused, as a result of the play method, or the autoStart option Play the video if it’s paused. Note: on iOS and some other mobile devices, you cannot programmatically trigger play. Once the viewer has tapped on the play button in the player, however, you will be able to use this function. callback data:

chunInd:0...n

pause

Sent when the playback state is changed to paused. callback data:

chunInd:0...n

ended

Triggered any time the video playback reaches the end. Note: when loop is turned on, the ended event will not fire. callback data:

chunInd:0...n

error

Triggered when video error is generated in the player. callback data:

error:MediaError

clickPrevious

Triggered when user tap on back button. callback data:

chunInd:0...n

clickNext

Triggered when user skipped some video of current story by tap on player. callback data:

chunInd:0...n

clipChange

Triggered each time when one of story videos was changed to another. Either by the user tapping for back or forward, or automatically. callback data:

chunInd:0...n

newIteration

Triggered when the loop flag is set and the story starts to play again.

chunInd:0...n

Methods

You can call methods on the Player object, eg.:

  var player = new gobi.Player({
     container: '#player-container',
     storyId: 'story-key',
  });

  player.destroy();

Destroy

You can destroy player in a valid way

  player.destroy()

Current Tags

  • 6.7.4                                ...           latest (2 months ago)

134 Versions

  • 6.7.4                                ...           2 months ago
  • 6.7.3                                ...           2 months ago
  • 6.7.2                                ...           2 months ago
  • 6.7.1                                ...           2 months ago
  • 6.7.0                                ...           2 months ago
  • 6.6.9                                ...           2 months ago
  • 6.6.8                                ...           2 months ago
  • 6.6.7                                ...           2 months ago
  • 6.6.6                                ...           2 months ago
  • 6.6.5                                ...           2 months ago
  • 6.6.4                                ...           2 months ago
  • 6.6.3                                ...           2 months ago
  • 6.6.2                                ...           2 months ago
  • 6.6.1                                ...           2 months ago
  • 6.6.0                                ...           3 months ago
  • 6.5.1                                ...           3 months ago
  • 6.5.0                                ...           3 months ago
  • 6.4.3                                ...           3 months ago
  • 6.4.2                                ...           3 months ago
  • 6.4.1                                ...           3 months ago
  • 6.4.0                                ...           3 months ago
  • 6.3.2                                ...           3 months ago
  • 6.3.1                                ...           3 months ago
  • 6.3.0                                ...           3 months ago
  • 6.2.0                                ...           3 months ago
  • 6.1.6                                ...           3 months ago
  • 6.1.5                                ...           3 months ago
  • 6.1.4                                ...           3 months ago
  • 6.1.3                                ...           3 months ago
  • 6.1.2                                ...           3 months ago
  • 6.1.1                                ...           3 months ago
  • 6.0.9                                ...           3 months ago
  • 6.1.0                                ...           3 months ago
  • 6.0.8                                ...           3 months ago
  • 6.0.7                                ...           3 months ago
  • 6.0.6                                ...           3 months ago
  • 6.0.5                                ...           3 months ago
  • 6.0.4                                ...           4 months ago
  • 6.0.3                                ...           4 months ago
  • 6.0.2                                ...           4 months ago
  • 6.0.1                                ...           4 months ago
  • 6.0.0                                ...           4 months ago
  • 5.1.5                                ...           5 months ago
  • 5.1.4                                ...           5 months ago
  • 5.1.1                                ...           6 months ago
  • 5.1.0                                ...           6 months ago
  • 5.0.3                                ...           6 months ago
  • 5.0.2                                ...           6 months ago
  • 5.0.1                                ...           7 months ago
  • 5.0.0                                ...           7 months ago
  • 4.7.1                                ...           7 months ago
  • 4.7.0                                ...           8 months ago
  • 4.6.3                                ...           9 months ago
  • 4.6.2                                ...           10 months ago
  • 4.6.1                                ...           10 months ago
  • 4.6.0                                ...           10 months ago
  • 4.5.2                                ...           10 months ago
  • 4.5.1                                ...           10 months ago
  • 4.5.0                                ...           10 months ago
  • 4.4.1                                ...           10 months ago
  • 4.4.0                                ...           10 months ago
  • 4.3.0                                ...           10 months ago
  • 4.2.1                                ...           10 months ago
  • 4.2.0                                ...           10 months ago
  • 4.1.2                                ...           a year ago
  • 4.1.1                                ...           a year ago
  • 4.1.0                                ...           a year ago
  • 4.0.5                                ...           a year ago
  • 4.0.4                                ...           a year ago
  • 4.0.3                                ...           a year ago
  • 4.0.2                                ...           a year ago
  • 4.0.1                                ...           a year ago
  • 4.0.0                                ...           a year ago
  • 3.10.1                                ...           a year ago
  • 3.10.0                                ...           a year ago
  • 3.9.9                                ...           a year ago
  • 3.9.8                                ...           a year ago
  • 3.9.6                                ...           a year ago
  • 3.9.5                                ...           a year ago
  • 3.9.4                                ...           a year ago
  • 3.9.3                                ...           a year ago
  • 3.9.2                                ...           a year ago
  • 3.9.1                                ...           a year ago
  • 3.9.0                                ...           a year ago
  • 3.8.0                                ...           a year ago
  • 3.7.0                                ...           a year ago
  • 3.6.0                                ...           a year ago
  • 3.5.0                                ...           a year ago
  • 3.4.0                                ...           a year ago
  • 3.3.0                                ...           a year ago
  • 3.2.0                                ...           a year ago
  • 3.1.0                                ...           a year ago
  • 3.0.0                                ...           a year ago
  • 2.2.1                                ...           a year ago
  • 2.2.0                                ...           a year ago
  • 2.1.0                                ...           a year ago
  • 2.0.8                                ...           a year ago
  • 2.0.7                                ...           a year ago
  • 2.0.6                                ...           a year ago
  • 2.0.5                                ...           a year ago
  • 2.0.4                                ...           a year ago
  • 2.0.3                                ...           a year ago
  • 2.0.2                                ...           a year ago
  • 2.0.1                                ...           a year ago
  • 2.0.0                                ...           a year ago
  • 1.7.4                                ...           a year ago
  • 1.7.3                                ...           a year ago
  • 1.7.2                                ...           a year ago
  • 1.7.1                                ...           a year ago
  • 1.7.0                                ...           a year ago
  • 1.6.5                                ...           a year ago
  • 1.6.4                                ...           a year ago
  • 1.6.3                                ...           a year ago
  • 1.6.2                                ...           a year ago
  • 1.6.1                                ...           a year ago
  • 1.6.0                                ...           a year ago
  • 1.5.1                                ...           a year ago
  • 1.4.2                                ...           a year ago
  • 1.4.1                                ...           a year ago
  • 1.4.0                                ...           a year ago
  • 1.3.0                                ...           a year ago
  • 1.2.4                                ...           a year ago
  • 1.2.3                                ...           a year ago
  • 1.2.2                                ...           a year ago
  • 1.2.1                                ...           a year ago
  • 1.1.3                                ...           a year ago
  • 1.1.2                                ...           a year ago
  • 1.1.1                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.4                                ...           a year ago
  • 1.0.3                                ...           a year ago
  • 1.0.2                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
Maintainers (2)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (18)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |