multiview/live/js/multiview.js

var Multiview = {
    host: 'ws.silvrtree.co.cuk',
    port: 80,
    appId: 'multiview',
    pusher: null,
    youtube: {},
    twitch: {},

    init: function () {
      jQuery(document).ready(function () {
        Multiview.ready();
      })
    },

    ready: function () {
      Multiview.bindEvents();
      //Multiview.connectToPusher();
    },

    playYoutube: function(id) {
      console.log(YT);
      this.youtube[id]= new YT.Player(id, {
        'events': {
          'onReady': function(event) {
            event.target.mute();
          }
        }
      });
    },

    playTwitch: function(id, channel) {
      this.twitch[id]= new Twitch.Player(id, {
        'channel': channel,
        'muted': true,
        'width': '100%',
        'height': '100%'
      });
    },

    connectToPusher: function()
    {
      this.pusher = new Pusher('092c4207-a7c6-4964-ac32-7a93feb511f6', {
        wsHost: this.host,
        wsPort: this.port,
        wssPort: this.port,
        disableStats: true,
        authEndpoint: '/laravel-websockets/auth',
        auth: {
          headers: {
            'X-App-ID': this.appId
          }
        },
        enabledTransports: ['ws', 'flash']
      });
      this.pusher.subscribe('multiview').bind('App\\Events\\ChannelStatusEvent', function (data) {
        Multiview.processStatus(data.streams);
      });
    },

    bindEvents: function () {
      jQuery('.stream .overlay').unbind('click');
      jQuery('.stream .overlay').click(function() {
        Multiview.toggleStream(jQuery(this).parent());
      });
    },

    toggleStream: function(streamContainer) {
      if (streamContainer.hasClass('active')) {
        Multiview.muteStream(streamContainer);
      } else {
        if (!streamContainer.hasClass('live')) {
          return;
        }
        Multiview.unmuteStream(streamContainer);
      }
    },

    muteStream: function(streamContainer) {
      console.log('Muting ', streamContainer);
      console.log('streamContainer class', streamContainer.class);
      if (streamContainer.hasClass('youtube')) {
        let id = streamContainer.attr('data-youtube-id');
        if (this.youtube.hasOwnProperty(id)) {
          this.youtube[id].mute();
          streamContainer.removeClass('active');
        }
      } else if (streamContainer.hasClass('twitch')) {
        let id = streamContainer.attr('data-twitch-id');
        if (this.twitch.hasOwnProperty(id)) {
          this.twitch[id].setMuted(true);
          streamContainer.removeClass('active');
        }
      } else {
        streamContainer.removeClass('active');
        try {
          videojs('video_stream' + streamContainer.attr('data-video-id')).muted(true);
        } catch (ex) {
          // Do nothing
        }
      }
    },

    unmuteStream: function(streamContainer) {
      console.log('Unmuting ', streamContainer);
      console.log('streamContainer id', streamContainer.attr('data-youtube-id'));
      if (streamContainer.hasClass('youtube')) {
        let id = streamContainer.attr('data-youtube-id');

        console.log('id', id);
        console.log(this.youtube);

        if (this.youtube.hasOwnProperty(id)) {
          jQuery('.stream').each(function() {
            Multiview.muteStream(jQuery(this));
          })
          streamContainer.addClass('active');
          this.youtube[id].unMute();
        }
      } else if (streamContainer.hasClass('twitch')) {
        let id = streamContainer.attr('data-twitch-id');
        if (this.twitch.hasOwnProperty(id)) {
          jQuery('.stream').each(function() {
            Multiview.muteStream(jQuery(this));
          })
          streamContainer.addClass('active');
          this.twitch[id].setMuted(false);
        }
      } else {
        jQuery('.stream').each(function() {
          Multiview.muteStream(jQuery(this));
        })
        streamContainer.addClass('active');
        const id = 'video_stream' + streamContainer.attr('data-video-id');
        try {
          videojs('video_stream' + streamContainer.attr('data-video-id')).muted(false);
        } catch (ex) {
          // Do nothing
        }
      }
    },

    removeStream: function(streamNumber) {
      const streamContainer = jQuery('div[data-video-id=' + streamNumber + ']');
      streamContainer.removeAttr('data-video-source');
      streamContainer.html('<p>Stream Offline</p>');
      streamContainer.attr('class', 'stream offline');
    },

    addStream: function(streamNumber, title, source, type)
    {
      let oldPlayer = videojs('video_stream' + streamNumber);
      if (oldPlayer) {
        oldPlayer.dispose();
      }
      const streamContainer = jQuery('div[data-video-id=' + streamNumber + ']');
      streamContainer.attr('class', 'stream live');
      streamContainer.attr('data-video-source', source);
      let html  = '';
      html += '<div class="overlay"></div>';
      html += '<div class="title">' + title + '</div>';
      html += '<video id="video_stream' + streamNumber + '" class="video-js vjs-16-9" autoplay="autoplay" muted="muted" preload="auto" >';
      html += '<source src="' + source + '" type="' + type + '">';
      html += '</video>';
      streamContainer.html(html);
      videojs('video_stream' + streamNumber, {});
      Multiview.bindEvents();
    },

    processStatus: function(streams) {
      streams.forEach(stream => {
        Multiview.updateStream(stream.id, stream);
      });
    },

    updateStream: function(streamNumber, stream)
    {
      if (!stream.live) {
        Multiview.removeStream(streamNumber);
        return;
      }

      let currentVideoSource = jQuery('div[data-video-id=' + streamNumber + ']').attr('data-video-source');
      if (currentVideoSource === stream.url) {
        return;
      }

      Multiview.addStream(streamNumber, stream.title, stream.url, stream.type);
    }
  }
;

Multiview.init();