Adding Disqus comments to your JW Showcase - jwplayer/jw-showcase GitHub Wiki

Prerequisites

You have some skills in HTML, CSS and JS.
You need to setup a local Showcase develop environment. Go to Building from the Source Code and follow the 'Install Required Tools' steps.
You have a Disqus account and created a website.
To quickly see your progress run grunt serve as you are making the changes.

HTML

The Disqus widget can be placed on the position of your liking, but I wouldn't recommend placing it above the video player. Open the following file app/views/video/video.html in your editor.

Place the following HTML where you want the widget to appear.

<div class="jw-row jw-row-disqus">
  <div class="jw-container">
    <h3 class="jw-title-disqus">Leave a comment</h3>
    <div id="disqus_thread"></div>
  </div>
</div>

For example, if you want the widget to appear below the 'More like this' and 'Related videos' sliders, place this between the 'Related videos' and 'Footer' like this:

<div class="jw-row" ng-if="vm.recommendationsFeed">
  <jw-card-slider feed="vm.recommendationsFeed" featured="false" title="Related videos"
      cols="{xs: 1, sm: 2, md: 3, lg: 4, xl: 5}" on-card-click="vm.cardClickHandler"></jw-card-slider>
</div>

<div class="jw-row jw-row-disqus">
  <div class="jw-container">
    <h3 class="jw-title-disqus">Leave a comment</h3>
    <div id="disqus_thread"></div>
  </div>
</div>

<jw-footer></jw-footer>

Optionally you can change or remove the title.

SCSS Styling

In order to change the appearance of the title and widget background we need to add some custom SCSS. Open the app/styles/main.scss in your editor and insert the following code at the bottom of file.

.jw-row-disqus {
    margin: 20px 0;
    padding: 20px 0;

    background-color: $dark-color;    // change the background color 
}

.jw-title-disqus {
    color: $white;                    // change the title color
}

If you are using the above colors you will need to set your Discus widget color scheme to to 'For dark backgrounds' or the text will be barely visible.

JS

Now comes the difficult part, telling the application to render the widget.

Open app/scripts/video/controllers/video.controller.js in your editor and scroll to the bottom of the file.

Just before the closing }()); add the following snippet:

function loadDisqus () {

    // change this to your own site name configured in Disqus dashboard
    var disqusSiteName = 'jw-showcase'; 

    // empty previous thread
    angular.element(document.querySelector('disqus_thread')).html('');

    // jshint -W106
    window.disqus_config = function () {
        this.page.url = window.location.href;
        this.page.identifier = vm.item.mediaid;
        this.callbacks.onReady.push(function () {
            $ionicScrollDelegate.resize();
        });
    };

    // http://docs.disqus.com/developers/universal/
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'https://' + disqusSiteName + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] ||
        document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    // jshint +W106
}

Change the disqusSiteName value to your site name configured in the Disqus dashboard.

You have now added a function which will load the Discus widget, but currently its not being used.

Search for the update function in the same file:

function update () {

    var itemIndex = itemFeed.playlist.findIndex(byMediaId(vm.item.mediaid));

    vm.feed.playlist = itemFeed.playlist
        .slice(itemIndex)
        .concat(itemFeed.playlist.slice(0, itemIndex));

    watchProgressItem = watchProgress.getItem(vm.item);

    loadRecommendations();
}

Add loadDisqus(); after loadRecommendations();. If done correctly it should look like this:

function update () {

    var itemIndex = itemFeed.playlist.findIndex(byMediaId(vm.item.mediaid));

    vm.feed.playlist = itemFeed.playlist
        .slice(itemIndex)
        .concat(itemFeed.playlist.slice(0, itemIndex));

    watchProgressItem = watchProgress.getItem(vm.item);

    loadRecommendations();
    loadDisqus();
}

Ready!

Your Showcase should now have the Disqus widget added to your video page. Run grunt build to generate your showcase and deploy it to your webserver.