Skip to content

Instantly share code, notes, and snippets.

@roman-manchenko

roman-manchenko/jwp-play-list.js

Created February 11, 2019 20:46
Show Gist options
  • Save roman-manchenko/b364927d7603ee0173a976dc3a79a0c0 to your computer and use it in GitHub Desktop.
Save roman-manchenko/b364927d7603ee0173a976dc3a79a0c0 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. roman-manchenko created this gist Feb 11, 2019.
    104 changes: 104 additions & 0 deletions jwp-play-list.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,104 @@
    // LOAD needed player
    <script async src="https://content.jwplatform.com/libraries/{{YOUR-PLAYER-ID}}.js"></script>
    document.addEventListener('DOMContentLoaded', event => {
    // workaround to autoplay video
    if (document.querySelector('.top-splash .widget__video')) {
    document.querySelector('.top-splash .widget__image').click();
    }
    });

    function playlists() {
    let widgets = document.querySelectorAll('.playlist-posts .widget:not(.extended)');

    widgets.forEach(function(widget) {
    let playlistBody = document.createElement('div');
    let lead = widget.querySelector('.widget__head');

    widget.classList.add('extended');
    playlistBody.classList.add('playlist-body');
    widget.querySelector('#col-center').appendChild(playlistBody);


    if (!lead) {
    widget.querySelectorAll('.widget__body')[1]
    .insertAdjacentHTML('beforebegin', '<div class="widget__head"><div class="widget__video crop-16x9 clearfix"></div></div>');
    } else if (lead && !lead.querySelector('.widget__video')) {
    let videoHead = document.createRange().createContextualFragment('<div class="widget__video crop-16x9 clearfix" style="display:none"></div>');
    lead.appendChild(videoHead);
    }

    let video = widget.querySelector('.widget__video');
    let image = widget.querySelector('.widget__image');
    let rebelltItems = widget.querySelectorAll('.rebellt-item');

    rebelltItems.forEach((rebelltItem, index) => {
    let videoUrl;
    let videoPlayer = document.createElement('div');
    let listicUrl = rebelltItem.getAttribute('data-href');
    let videoID = rebelltItem.getAttribute('data-video-id');

    //jwp streaming doesn't work in some mobile devises
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent) ) {
    videoUrl = 'https://content.jwplatform.com/videos/'+videoID+'.mp4';
    } else {
    videoUrl = 'https://content.jwplatform.com/manifests/'+videoID+'.m3u8';
    }

    videoPlayer.id = 'jwPlayer-' + videoID;

    if (videoID) {
    if( index === 0 && !image ) {
    video.style.display = "block";
    video.appendChild(videoPlayer);
    let playerInstance = jwplayer(videoPlayer.id);

    playerInstance.setup({
    file: videoUrl,
    mediaid: videoID,
    autostart: false,
    image: `https://cdn.jwplayer.com/v2/media/${videoID}/poster.jpg`
    });
    }

    rebelltItem.onclick = () => {
    if (widget.querySelector('.jwplayer')) {
    widget.querySelector('.jwplayer').remove();
    }

    if (listicUrl.length > 0 && listicUrl) {
    window.history.pushState("", "", listicUrl);
    }

    let content = rebelltItem.cloneNode(true);

    if (content.querySelector('.media-photo-preview') ) {
    content.querySelector('.media-photo-preview').remove();
    } else if ( content.querySelector('.rm-shortcode') ) {
    content.querySelector('.rm-shortcode').remove();
    }

    widget.querySelector('.playlist-body').innerHTML = "";
    widget.querySelector('.playlist-body').appendChild(content);

    image.classList.add('hidden');
    video.style.display = 'block';
    video.appendChild(videoPlayer);

    let playerInstance = jwplayer(videoPlayer.id);
    playerInstance.setup({
    file: videoUrl,
    mediaid: videoID
    });
    if (window.innerWidth < 1024) {
    window.scrollTo({ top: widget.offsetTop, behavior: 'smooth' });
    }
    }
    }
    });
    });
    };
    playlists();

    {{require}}(['core/event_dispatcher'], function(eventDispatcher) {
    eventDispatcher.on('load-more:sync', () => playlists());
    });