153d84df-ba5b-440f-bafa-6183b8754460

Committed 09 Sep 2024 06:35PM UTC coverage: 96.365% (-0.01%) from 96.378%

Build # 153d84df-ba5b-440f-bafa-6183b8754460

Build Type

push

circleci

Committed by

web-flow

Commit Message

Youtube Live Integration (#404)

* Youtube live improvement [stage-2]

* fix endpoint URL [stage-2]

* fixed unit test [stage-2]

* Error treatment [stage-2]

* fix parameter reassign error [stage-2]

* fixed error message display issue [stage-2]

* deploy [stage-2]

* deploy [stage-2]

* fix video visibility [stage-2]

* LoggerMixin, font size, attribute: false [stage-2]

* poll channel URL instead of API [stage-2]

* poll each 10sec + fixed from last PR [stage-6]

* poll each 10sec + fixed from last PR [stage-2]

* Revert "poll each 10sec + fixed from last PR [stage-2]"

This reverts commit 6b8183f0b.

* Revert "poll each 10sec + fixed from last PR [stage-6]"

This reverts commit 8303540d6.

* poll every 10s + fixes from last PR [stage-2]

* reset instanceId [stage-2]

* methods renaming & playback fix [stage-2]

* Unit test method renaming [stage-2]

* Version bump

* Version bump [stage-2]

* remove LoggerMixin as it's not necessary [stage-2]

* fix README [stage-2]

Run Details

2587 of 2696 branches covered (95.96%)

Branch coverage included in aggregate %.

217 of 226 new or added lines in 1 file covered. (96.02%)

1 existing line in 1 file now uncovered.

14139 of 14661 relevant lines covered (96.44%)

38.98 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

97.74

/src/rise-youtube/rise-youtube.js

/* global YT */
/* eslint-disable class-methods-use-this */
/* eslint-disable no-console */

import { html, css } from 'lit';
import { classMap } from 'lit/directives/class-map.js';
import { RiseElement } from '../common/rise-element.js';
import { Utils } from '../common/utils.js';
import { version } from '../version.js';
import * as Globals from '../common/globals.js';

const PROXY_SERVICE_URL = `${Globals.SERVICES2_URL_PRODUCTION}/proxy`;
const MAXIMUM_TIME_FOR_FIRST_PLAY = 5 * 1000; // time to wait for player to load on initial play
const MAXIMUM_TIME_FOR_CUE_PLAYLIST = 10 * 1000;
const MAXIMUM_TIME_FOR_VIDEO_NOT_PLAYING = 10 * 1000; // used by _playbackMonitor after video is cued
const RESET_ERROR_INTERVAL = 5 * 60 * 1000;
const RETRY_PLAY_INTERVAL_MIN = 5 * 60 * 1000;
const RETRY_PLAY_INTERVAL_MAX = 60 * 60 * 1000;
const MAX_RETRY_PLAY_COUNT = 10;
const NETWORK_ERROR = 5;
const CUE_PLAYLIST_ERROR = 'Cue playlist timeout';
const MAXIMUM_TIME_FOR_LIVE_STREAM_POLLING = 5 * 60 * 1000;
const LIVE_STREAM_POLLING_INTERVAL = 10 * 1000;

const YouTubePlaylistStates = Object.freeze({
  UNSTARTED: -1,
  CUED: 5,
  ERROR: 9,
});

export default class RiseYouTube extends RiseElement {
  render() {
    return html`${this._template()}`;
  }

  _template() {
    const blockerClasses = {
      'show-blocker': this._isBlocked(),
      'hide-blocker': !this._isBlocked(),
    };

    return html`
      <div
        class="live-stream-message-container"
        ?hidden=${!this.showChannelLiveStreamMessage &&
        !this.showChannelLiveStreamSharedScheduleMessage}
      >
        <p
          class="live-stream-message-text"
          ?hidden=${!this.showChannelLiveStreamMessage}
        >
          ${this.channelLiveStreamMessage}
        </p>
        <p
          class="live-stream-message-text"
          ?hidden=${!this.showChannelLiveStreamSharedScheduleMessage}
        >
          Youtube channel live streams won't play in Shared Schedule mode.
          <br />
          <a href="${this.channelLiveStreamURL}" target="_blank"
            >${this.channelLiveStreamMessage}
          </a>
        </p>
      </div>
      <div id="player"></div>
      <div id="blocker" class=${classMap(blockerClasses)}></div>
    `;
  }

  static get styles() {
    return css`
      :host {
        display: block;
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 100%;
      }
      #player {
        width: 100%;
        height: 100%;
      }
      #blocker {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .show-blocker {
        display: block;
        visibility: visible;
      }
      .hide-blocker {
        display: none;
        visibility: hidden;
      }
      .live-stream-message-container:not([hidden]) {
        width: 100%;
        height: 100%;
        position: absolute;
        background-color: black;
        display: flex;
      }
      .live-stream-message-text {
        width: 100%;
        color: white;
        margin: auto 0;
        text-align: center;
        padding: 0;
        font-size: 48px;
        font-family: Helvetica;
        font-weight: 100;
      }
      .live-stream-message-text a {
        color: white;
      }
    `;
  }

  static get properties() {
    return {
      source: { type: String },
      volume: { type: Number },
      channelId: { type: String },
      channelLiveStreamMessage: { type: String, attribute: false },
      showChannelLiveStreamMessage: { type: Boolean, attribute: false },
      showChannelLiveStreamSharedScheduleMessage: {
        type: Boolean,
        attribute: false,
      },
      channelLiveStreamURL: { type: String, attribute: false },
    };
  }

  constructor() {
    super();

    this.version = version;
    this.source = '';
    this.volume = 0;
    this.channelId = '';
    this.channelLiveStreamMessage = '';
    this.channelLiveStreamURL = '';
    this.showChannelLiveStreamMessage = false;
    this.showChannelLiveStreamSharedScheduleMessage = false;

    this._initialStart = true;
    this._initialPlay = true;
    this._playWhenReadyTimer = null;
    this._playerReady = false;
    this._player = null;
    this._ytApiReadyTimer = null;
    this._playStartTimestamp = 0;
    this._previewDoneTimer = null;
    this._cuePlaylistTimer = null;
    this._retryPlayTimer = null; // retry play is used for schedules with single presentation
    this._retryPlayCount = 0;
    this._playlistState = YouTubePlaylistStates.UNSTARTED;
    this._playbackMonitorTimer = null;
    this._lastCurrentTime = 0;
    this._videoStoppedPlayingTimestamp = null;
    this._lastErrorCode = 0;
    this._lastErrorTimestamp = 0;

    this._loadYouTubeApi();
  }

  updated(changedProperties) {
    if (
      changedProperties.has('source') ||
      changedProperties.has('visibility') // visibility is defined in RiseElement
    ) {
      if (!this.source || !this.source.trim()) {
        this._playlistState = YouTubePlaylistStates.ERROR;
      } else {
        this._playlistState = YouTubePlaylistStates.UNSTARTED;
      }

      this._setVisibility('hidden');

      clearTimeout(this._cuePlaylistTimer);
      this._reset();
    } else if (changedProperties.has('volume') && super.isPlaying()) {
      this._setVolume();
    }
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    clearTimeout(this._ytApiReadyTimer);
    clearTimeout(this._playWhenReadyTimer);
    clearTimeout(this._previewDoneTimer);
    clearTimeout(this._cuePlaylistTimer);
    clearTimeout(this._playbackMonitorTimer);
    clearTimeout(this._retryPlayTimer);
    this.instanceId = null;
  }

  _handleRisePresentationPlay() {
    super._handleRisePresentationPlay();

    clearTimeout(this._retryPlayTimer);
    this._retryPlayCount = 0;

    this._playStartTimestamp = Date.now();
    this._playWhenReady(this._initialPlay);

    this._initialPlay = false;
  }

  _handleRisePresentationStop() {
    super._handleRisePresentationStop();

    this._stop();
  }

  _handleStart(event) {
    super._handleStart(event);

    if (this._initialStart) {
      this._initialStart = false;

      this.log(RiseYouTube.LOG_TYPE_INFO, RiseYouTube.EVENT_START, null, {
        source: this.source,
      });

      this._start();
    }
  }

  _start() {
    this._createPlayer();
  }

  _stop() {
    clearTimeout(this._playWhenReadyTimer);
    clearTimeout(this._previewDoneTimer);
    clearTimeout(this._playbackMonitorTimer);
    clearTimeout(this._retryPlayTimer);
    this.showChannelLiveStreamMessage = false;
    this.showChannelLiveStreamSharedScheduleMessage = false;
    this.instanceId = null;
    if (this._player && this._playerReady) {
      // use pauseVideo instead of stopVideo because it doesn't trigger the END state
      this._player.pauseVideo();
      this._setVisibility('hidden');
    }
  }

  _reset() {
    if (!this._initialStart && !this._initialPlay) {
      this._stop();
      this._playWhenReady(this._initialPlay);
    }
  }

  _playVideo() {
    if (!super.isPlaying()) {
      return;
    }

    if (RisePlayerConfiguration.Helpers.isEditorPreview()) {
      clearTimeout(this._previewDoneTimer);
      this._previewDoneTimer = setTimeout(() => {
        this._done();
      }, 10000);
    } else {
      this._startPlaybackMonitor();
      this._player.playVideoAt(0);
      this._setVolume();
    }
  }

  _cuePlaylist(videoId, playlistId) {
    clearTimeout(this._cuePlaylistTimer);
    this._cuePlaylistTimer = setTimeout(
      () => this._handlePlaybackError(CUE_PLAYLIST_ERROR),
      MAXIMUM_TIME_FOR_CUE_PLAYLIST
    );

    if (playlistId) {
      this._player.cuePlaylist({ listType: 'playlist', list: playlistId });
    } else {
      this._player.cuePlaylist(videoId);
    }
  }

  _play(videoId, playlistId) {
    if (super.visibility === false) {
      this._done();
      return;
    }

    this._startRetryPlayTimer(videoId, playlistId);

    this._resetError();

    if (
      (videoId || playlistId) &&
      this._playlistState !== YouTubePlaylistStates.ERROR
    ) {
      if (this._playlistState === YouTubePlaylistStates.CUED) {
        this._setVisibility('visible');
        this._playVideo();
      } else {
        this._cuePlaylist(videoId, playlistId);
      }
    } else {
      this._done();
    }
  }

  async _playWhenReady(initialPlay) {
    if (
      initialPlay &&
      Date.now() - this._playStartTimestamp > MAXIMUM_TIME_FOR_FIRST_PLAY
    ) {
      this._done();
      return;
    }

    if (this._playerReady) {
      const instanceId = crypto.randomUUID();
      this.instanceId = instanceId;

      const videoData = this._parseYouTubeUrl(this.source);

      if (videoData.userHandle && this.channelId) {
        this.channelLiveStreamMessage = `Waiting for ${videoData.userHandle} Youtube live stream to start...`;
        this.showChannelLiveStreamMessage = true;

        videoData.videoId = await this._pollChannelLiveStreamVideoId(
          this.instanceId
        );
        if (this.instanceId !== instanceId) {
          return;
        }

        if (!videoData.videoId) {
          if (RisePlayerConfiguration.Helpers.isSharedSchedule()) {
            this.showChannelLiveStreamMessage = false;
            this.showChannelLiveStreamSharedScheduleMessage = true;
            this.channelLiveStreamURL = `https://www.youtube.com/${videoData.userHandle}/live`;
            this.channelLiveStreamMessage = `Click here to open ${videoData.userHandle} live stream in Youtube instead.`;
          } else {
            this.channelLiveStreamMessage = `Youtube live stream was not found for channel ${videoData.userHandle}.`;
          }
          this._done();
          return;
        }

        this.showChannelLiveStreamMessage = false;
      }

      this._play(videoData.videoId, videoData.playlistId);
    } else if (initialPlay) {
      clearTimeout(this._playWhenReadyTimer);
      this._playWhenReadyTimer = setTimeout(
        () => this._playWhenReady(initialPlay),
        100
      );
    } else {
      this._done();
    }
  }

  _getRetryPlayInterval() {
    // first time retry in 5 minutes, then every 1 hour
    return this._retryPlayCount === 0
      ? RETRY_PLAY_INTERVAL_MIN
      : RETRY_PLAY_INTERVAL_MAX;
  }

  _startRetryPlayTimer(videoId, playlistId) {
    if (this._retryPlayCount < MAX_RETRY_PLAY_COUNT) {
      this._retryPlayTimer = setTimeout(() => {
        if (this._playlistState === YouTubePlaylistStates.ERROR) {
          this._retryPlayCount += 1;
          this._play(videoId, playlistId);
        }
      }, this._getRetryPlayInterval());
    }
  }

  _getChannelLiveStreamUrl() {
    return `${PROXY_SERVICE_URL}/https://www.youtube.com/channel/${this.channelId}/live`;
  }

  async _pollChannelLiveStreamVideoId(instanceId, attempt = 1) {
    // if any of these conditions are met, we don't poll
    if (
      super.visibility === false || // presentation not showing
      !super.isPlaying() || // presentation not playing
      RisePlayerConfiguration.Helpers.isSharedSchedule() || // in shared schedule
      instanceId !== this.instanceId || // a new call has been made
      attempt * LIVE_STREAM_POLLING_INTERVAL >
        MAXIMUM_TIME_FOR_LIVE_STREAM_POLLING // maximum attempts were made
    ) {
      return null;
    }

    let videoId;
    try {
      const headers = new Headers();
      headers.append('pragma', 'no-cache');
      headers.append('cache-control', 'no-store');
      headers.append('cache', 'no-store');
      headers.append('X-Requested-With', 'rise-youtube');

      const requestInit = {
        method: 'GET',
        headers,
      };

      const response = await fetch(
        this._getChannelLiveStreamUrl(),
        requestInit
      );
      if (!response.ok) {
        throw response;
      }

      let htmlText = await response.text();
      htmlText = htmlText.substring(htmlText.indexOf('<link rel="canonical"'));
      htmlText = htmlText.substring(0, htmlText.indexOf('>') + 1);

      const regexVideoIdCaptureGroups = /watch\?v=(.+)"/.exec(htmlText);
      [, videoId] = regexVideoIdCaptureGroups;
    } catch (error) {
      this._logChannelLiveStreamError(error);
    }

    if (
      !videoId &&
      attempt * LIVE_STREAM_POLLING_INTERVAL <=
        MAXIMUM_TIME_FOR_LIVE_STREAM_POLLING
    ) {
      await Utils.delay(LIVE_STREAM_POLLING_INTERVAL);
      return this._pollChannelLiveStreamVideoId(instanceId, attempt + 1);
    }

    // this log is meant to understand how many attempts are being made to find the live stream
    // intended to log for 6 months, starting sept/24.
    this._logChannelLiveStreamFinalAttempt(
      videoId,
      attempt * LIVE_STREAM_POLLING_INTERVAL
    );

    return videoId;
  }

  _logChannelLiveStreamError(error) {
    let logDetails;
    if (error instanceof Response) {
      logDetails = {
        error: error.status,
        message: error.statusText,
      };
    } else if (error instanceof Error) {
      logDetails = {
        error: error.name,
        message: error.message,
      };
    }
    this.log(
      RiseElement.LOG_TYPE_ERROR,
      'youtube-livestream-poll-error',
      logDetails
    );
  }

  _logChannelLiveStreamFinalAttempt(videoId, finalAttempt) {
    const logInfo = {
      source: this.source,
      channelId: this.channelId,
      videoId,
      finalAttempt,
    };
    this.log(
      RiseElement.LOG_TYPE_IMPORTANT,
      'youtube-livestream-poll-not-found',
      logInfo
    );
  }

  _done() {
    clearTimeout(this._playbackMonitorTimer);
    this.instanceId = null;

    setTimeout(() => this._sendDoneEvent(true));
  }

  _setVolume() {
    const normalizedVolume = Utils.clampNumber(this.volume, 0, 100);
    this._player.setVolume(normalizedVolume);

    // if volue=0, then also mute the video,
    // setting volume to 0 does not always turn the sound off completly
    if (!this._shouldBeMute()) {
      if (normalizedVolume === 0 && !this._player.isMuted()) {
        this._player.mute();
      }
      if (normalizedVolume !== 0 && this._player.isMuted()) {
        this._player.unMute();
      }
    }
  }

  _startPlaybackMonitor() {
    this._lastCurrentTime = 0;
    this._videoStoppedPlayingTimestamp = null;
    this._playbackMonitor();
  }

  _playbackMonitor() {
    // by checking the playback progress in short intervals (1 second)
    // and as long as getCurrentTime() returns different number each time
    // we don't need to worry about which video in a playlist if playing
    clearTimeout(this._playbackMonitorTimer);
    this._playbackMonitorTimer = setTimeout(() => {
      if (this._player.getCurrentTime() !== this._lastCurrentTime) {
        // all is good - video is playing
        this._videoStoppedPlayingTimestamp = null;
        this._lastCurrentTime = this._player.getCurrentTime();

        // continue monitoring
        this._playbackMonitor();
      } else {
        // Video is not playing -
        // could be buffering or waiting for upcoming live stream.

        // ignore the upcoming live stream
        if (this._isUpcomingRegularLiveStream()) {
          this._playbackMonitor();
          return;
        }

        if (!this._videoStoppedPlayingTimestamp) {
          // record the timestamp of the first occurance of video not playing
          this._videoStoppedPlayingTimestamp = Date.now();
        }

        if (
          Date.now() - this._videoStoppedPlayingTimestamp >=
          MAXIMUM_TIME_FOR_VIDEO_NOT_PLAYING
        ) {
          this._done();
        } else {
          // continue monitoring
          this._playbackMonitor();
        }
      }
    }, 1000);
  }

  _isUpcomingRegularLiveStream() {
    // [potential improvement] - instead of checking the current state,
    // check the last 3 states. They should be [UNSTARTED, BUFFERING, UNSTARTED]
    return (
      this._player.getPlayerState() === YouTubePlaylistStates.UNSTARTED &&
      this._player.getCurrentTime() === 0 &&
      this._player.getDuration() === 0
    );
  }

  _loadYouTubeApi() {
    return Utils.loadScript('https://www.youtube.com/iframe_api')
      .then(() => {
        this.log(RiseYouTube.LOG_TYPE_INFO, 'YouTube API loaded');
      })
      .catch(() => {
        super.log(RiseYouTube.LOG_TYPE_ERROR, 'Failed to load YouTube API', {
          errorCode: 'E000000220',
        });
      });
  }

  _parseYouTubeUrl(url) {
    let videoId = Utils.getUrlParam(url, 'v');
    const playlistId = Utils.getUrlParam(url, 'list');

    // Video ID can be part of the URL path. Examples:
    // "https://youtu.be/11122233344"
    // "https://www.youtube.com/embed/11122233344"
    // "https://www.youtube.com/live/HvzFWKqcKLU?si=TadMutm9146bTRs2"
    //
    // Channel Live Stream can be set as the channel URL with the User Handle. Example:
    // https://www.youtube.com/@RiseVision
    if (url && !videoId) {
      const regExpUserHandle = /youtube.com\/(@[^#&?]*)/;
      const matchUserHandle = url.match(regExpUserHandle);
      if (matchUserHandle && matchUserHandle[1])
        return { userHandle: matchUserHandle[1] };

      const regExpVideoId =
        /^.*((youtu.be\/)|(v\/)|(live\/)|(embed\/(?!videoseries)))([^#&?]*).*/;
      const matchVideoId = url.match(regExpVideoId);
      videoId =
        matchVideoId && matchVideoId[6].length === 11 ? matchVideoId[6] : null;
    }

    return { videoId, playlistId };
  }

  _resetError() {
    // reset error state if 5 minutes passed after network failure or Cue playlist timeout

    if (
      this._playlistState === YouTubePlaylistStates.ERROR &&
      [NETWORK_ERROR, CUE_PLAYLIST_ERROR].includes(this._lastErrorCode) &&
      this._lastErrorTimestamp &&
      Date.now() - this._lastErrorTimestamp >=
        RESET_ERROR_INTERVAL - MAXIMUM_TIME_FOR_CUE_PLAYLIST
    ) {
      this._playlistState = YouTubePlaylistStates.UNSTARTED;
      this._lastErrorTimestamp = 0;
      this._lastErrorCode = 0;
    }
  }

  _ytApiReady() {
    return typeof YT !== 'undefined' && YT.loaded;
  }

  _shouldBeMute() {
    return RisePlayerConfiguration.Helpers.isSharedSchedule() ? 1 : 0;
  }

  _handleStateChange(state) {
    switch (state) {
      case YT.PlayerState.ENDED:
        this._done();
        this._playVideo();
        break;
      case YT.PlayerState.CUED:
        this._playlistState = YouTubePlaylistStates.CUED;
        this._setVisibility('visible');

        clearTimeout(this._cuePlaylistTimer);
        // this._player.setLoop(true); // with loop there is no ENDED state
        this._playVideo();
        break;
      default:
    }
  }

  _handlePlaybackError(error) {
    this._playlistState = YouTubePlaylistStates.ERROR;
    this._lastErrorCode = error;
    this._lastErrorTimestamp = Date.now();

    super.log(
      RiseYouTube.LOG_TYPE_ERROR,
      'Error playing YouTube video',
      { errorCode: 'E000000221' },
      { error, retryPlayCount: this._retryPlayCount, source: this.source }
    );

    this._done();
  }

  _setVisibility(visibility) {
    const element = this.renderRoot.querySelector('#player');
    element.style.visibility = visibility;
  }

  _createPlayer() {
    if (!this._ytApiReady()) {
      this._ytApiReadyTimer = setTimeout(() => this._createPlayer(), 100);
      return;
    }

    const player = this.renderRoot.querySelector('#player');

    this._player = new YT.Player(player, {
      playerVars: {
        playsinline: 1,
        controls: this._shouldBeMute(),
        mute: this._shouldBeMute(),
        modestbranding: 1,
        fs: 0,
        disablekb: 1,
        rel: 0,
      },
      events: {
        onReady: () => {
          this._playerReady = true;
        },
        onStateChange: event => {
          this._handleStateChange(event.data);
        },
        onError: event => {
          this._handlePlaybackError(event.data);
        },
      },
    });
  }

  _isBlocked() {
    return RisePlayerConfiguration.Helpers.isEditorPreview();
  }
}

customElements.define('rise-youtube', RiseYouTube);

Rise-Vision / rise-lit-components / 153d84df-ba5b-440f-bafa-6183b8754460

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous