792fec5a-a579-4dbd-bc59-6d43a9db9aae

Committed 05 Sep 2024 07:25PM UTC coverage: 96.364% (-0.01%) from 96.374%

Build # 792fec5a-a579-4dbd-bc59-6d43a9db9aae

Build Type

push

circleci

Committed by

web-flow

Commit Message

Merge pull request #399 from Rise-Vision/feature/youtube-live-improvement

Youtube Live Improvement

Run Details

2570 of 2676 branches covered (96.04%)

Branch coverage included in aggregate %.

228 of 239 new or added lines in 1 file covered. (95.4%)

1 existing line in 1 file now uncovered.

14023 of 14543 relevant lines covered (96.42%)

38.86 hits per line

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

97.44

/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';
import { LoggerMixin } from '../common/logger-mixin.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 YouTubePlaylistStates = Object.freeze({
  UNSTARTED: -1,
  CUED: 5,
  ERROR: 9,
});

export default class RiseYouTube extends LoggerMixin(RiseElement) {
  // how much time we will wait for each attempt of polling Youtube Channel for a live video. Maximum 7 attempts (4 minutes and 45 seconds).
  YouTubeLivestreamPollWaitTimes = Object.freeze({
    1: 0,
    2: 15000,
    3: 30000,
    4: 60000,
    5: 60000,
    6: 60000,
    7: 60000,
  });

  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);
  }

  _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);
    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 videoData = this._parseYouTubeUrl(this.source);

      if (videoData.userHandle && this.channelId) {
        this.instanceId = crypto.randomUUID();
        videoData.videoId = await this._getChannelLiveStream(
          videoData,
          this.instanceId
        );
        if (!videoData.videoId) return;
      }

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

  async _getChannelLiveStream(videoData, instanceId) {
    this.channelLiveStreamMessage = `Waiting for ${videoData.userHandle} Youtube live stream to start...`;
    this.showChannelLiveStreamMessage = true;

    const videoId = await this._pollChannelLivestream();
    // if current instanceId is different than the property instanceId,
    // then we should discard this call because a new call has happened
    if (instanceId !== this.instanceId) {
      return null;
    }

    if (!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 log is meant to understand if we're not finding the livestream into the maximum attempts
        // intended to log for 6 months, starting sept/24.
        const logInfo = {
          source: this.source,
          channelId: this.channelId,
          videoId: null,
          attempt: Math.max(
            ...Object.keys(this.YouTubeLivestreamPollWaitTimes)
          ),
        };
        this.log(
          RiseElement.LOG_TYPE_IMPORTANT,
          'youtube-livestream-poll-not-found',
          logInfo
        );
      }
      this._done();
      return null;
    }

    this.showChannelLiveStreamMessage = false;
    return videoId;
  }

  _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());
    }
  }

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

  async _pollChannelLivestream(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
      (this._lastLiveStreamPollAttempt &&
        this._lastLiveStreamPollAttempt +
          this.YouTubeLivestreamPollWaitTimes[attempt - 1] >
          Date.now()) || // the time of the last attempt must have passed to make a new attempt
      this.YouTubeLivestreamPollWaitTimes[attempt] === undefined // maximum attempts were made
    ) {
      return null;
    }

    this._lastLiveStreamPollAttempt = Date.now();

    let videoId;
    try {
      const headers = { 'X-Requested-With': 'rise-youtube' };
      const response = await fetch(
        this._getFetchChannelLivestreamUrl(),
        headers
      );
      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._logFetchChannelLivestreamError(error);
    }

    if (!videoId && this.YouTubeLivestreamPollWaitTimes[attempt + 1]) {
      await Utils.delay(this.YouTubeLivestreamPollWaitTimes[attempt + 1]);
      return this._pollChannelLivestream(attempt + 1);
    }

    if (videoId) {
      // this log is meant to understand how many attempts are being made in comparison to when the livestream is published.
      // intended to log for 6 months, starting sept/24.
      const logInfo = {
        source: this.source,
        channelId: this.channelId,
        videoId,
        attempt,
      };
      this.log(
        RiseElement.LOG_TYPE_IMPORTANT,
        'youtube-livestream-poll-success',
        logInfo
      );
    }

    return videoId;
  }

  _logFetchChannelLivestreamError(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
    );
  }

  _done() {
    clearTimeout(this._playbackMonitorTimer);

    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 Livestream 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 / 792fec5a-a579-4dbd-bc59-6d43a9db9aae

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