IVStory: Applying thumbnail and custom modal to show IVS Player

IVStory Player: Demo Page

To apply IVStory player:

1. Create a thumbnail div, example:

     <div id="ivs-story">
       <img src="" class="thumbnail" />
       <div class="description">
         <div class="video-title">Title here</div>
         <div class="duration">Duration: <span></span></div>
       </div>
       <img src="images/play.svg" class="play-button" />
     </div>
   

2. Below .ivs-story, wrap <ivs-player> within a container div, make sure to set data-ivs-floating to 0. For playlist carousel data-ivs-carousel, we recommend none or overlay, so that player don't consume much space in mobile screen.

     <div id="ivsplayer01-container">
       <div>
         <div class="close-button">X</div>
         <ivs-player
           data-ivs-key="YOUR KEY"
           data-ivs-spid="YOUR SP ID"
           data-ivs-vid="YOUR VIDEO ID"
           data-ivs-wid="YORU WIDGET ID"
           data-ivs-carousel="overlay"
           data-ivs-floating="0"
         ></ivs-player>
       </div>
     </div>

3. Later you can attach event handler to show your player by listening to ivs.content.ready event.
4. After above event listener is attached, we can then handle click event, inside this we will determine whether to show the player or not.

IMPORTANT NOTE

• Make sure player is out of viewport when first rendered, so auto play is not executed. In this example, this can be achieved using CSS by sending player to top of viewport (top: -100vh;)
• Need to dispatch scroll event when show/hide player modal, this is needed for player to determine whether to play/pause video. When player is out of view, video will be paused, vice versa.

Please refer to the example below:

CSS

#ivsplayer01-container {
  position: fixed;
  left: 0;
  right: 0;
  top: -100vh; /* send player out of viewport, to avoid video playing when player is still hidden */
  bottom: 0;
  background-color: rgba(255,255,255, 0.5);
  backdrop-filter: blur(3px);
  z-index: -1; /* Send player to back when hidden to prevent blocking click of other elements */

  /* Below is for slide down animation */
  max-height: 0;
  overflow-y: hidden;
  transition-property: all;
  transition-duration: .3s;
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
#ivsplayer01-container.is-visible {
 /* Perform slide down animation */
  max-height: 100vh;
  z-index: 999;

  /* Send player to viewport */
  top: 0vh;
}
#ivsplayer01-container > div {
  /* Group player and its close button to center */
  position: absolute;
  top: 50%;
  left: 50%;
  right: 0;
  transform: translate(-50%, -50%);
  width: 80%;
  max-width: 700px;
}
#ivsplayer01-container .close-button {
  font-size: 1.5rem;
  color: #000;
  width: fit-content;
  margin-left: auto;
  text-align: right;
}
#ivsplayer01-container .close-button:hover, #ivs-story:hover {
  cursor: pointer;
}
#ivs-story {
  /* hide story thumbnail first, will be shown later when content is fetched from IVX */
  visibility: hidden;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  border: 1px solid #f3f3f3;
}
#ivs-story .thumbnail {
  width: 100px;
  margin-right: 8px;
}
@media only screen and (min-width: 992px) {
  #ivs-story .thumbnail {
    width: auto;
    height: 100px;
  }
}
#ivs-story .video-title {
  font-weight: bold;
  color: #000;
  font-size: 1em;

  /* Trim when text is too long */
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#ivs-story .description {
  /* Trim when text is too long */
  min-width: 0;
}
#ivs-story .duration {
  font-size: 0.7rem;
  line-height: 1rem;
  font-weight: 300;
}
#ivs-story .play-button {
  height: 1rem;
  width: 1rem;
  margin-left: auto;
  margin-right: 5px;
}

JS

(function() {
  const ivsContainer = document.querySelector('#ivsplayer01-container');

  const closeButton = ivsContainer.querySelector('.close-button');

  const story = document.querySelector('#ivs-story');
  const thumbnail = story.querySelector('.thumbnail');
  const title = story.querySelector('.video-title');
  const durationText = story.querySelector('.duration span');

  let modalHandled = false;

  ivsContainer.addEventListener('ivs.content.ready', function(e) {
    const response = e.detail.response.body.ivx;
    const thumbnailUrl = response.thumbnail_url;
    const videoTitle = response.name;
    const duration = response.duration;
    const minutes = Math.floor(duration / 60);
    const seconds = duration % 60;

    thumbnail.src = thumbnailUrl;
    title.innerText = videoTitle;
    durationText.innerText = minutes + ':' + seconds;

    // `ivs.content.ready` can be triggered when each video is fetched, thus only need to attach handler for player once
    if (modalHandled) return;

    // Show ivs story thumbnail only when video content such as image, title, & duration has been received
    story.style.visibility = 'visible';

    modalHandled = true;

    story.addEventListener('click', function() {
      ivsContainer.classList.add('is-visible');
      window.requestAnimationFrame(() => {
        // Dispatch events only after browser repaint, eg: After repaint,-
        // player will be visible, then we trigger scroll event so player
        // can be played
        setTimeout(() => {
          // Emulate scroll event so player can know if current video is out
          // of viewport or not, this is need for player to determine whether
          // to play or pause video
          window.dispatchEvent(new Event('scroll'));
        }, 100);
      });
    });

    closeButton.addEventListener('click', function() {
      ivsContainer.classList.remove('is-visible');
      window.requestAnimationFrame(() => {
        // Dispatch events only after browser repaint, eg: After repaint,-
        // player will be hidden, then we trigger scroll event so player can
        // be paused
        setTimeout(() => {
          // Emulate scroll event so player can know if current video is out
          // of viewport or not, this is need for player to determine whether
          // to play or pause video
          window.dispatchEvent(new Event('scroll'));
        }, 100);
      });
    });
  });
})();