b6cb1499-582d-422d-97e0-0fbac736cafa

Committed 23 Sep 2024 02:46PM UTC coverage: 96.303% (-0.06%) from 96.365%

Build # b6cb1499-582d-422d-97e0-0fbac736cafa

Build Type

push

circleci

Committed by

web-flow

Commit Message

Chore/youtube allow embedding (#412)

* Variable and methods renaming [stage-2]

* Encapsulation of _parseLiveVideoId [stage-2]

* refactoring of how html messages are shown [stage-2]
All messages are fixed into the HTML now, and each message has it's own boolean to show or hide it.
This was necessary to better receive the not embeddable message, otherwise it would not be ideal.

* Not embeddable assessment and treatment [stage-2]

* Parse playabilityStatus and don't play if not "OK" [stage-2]
This is necessary because if the user enables the "Allow embedding" setting in the in-between state of the live stream, it will have a video ID and will be allowed to be embedded, then our polling will recognize as a valid video, but when the live stream starts the bug with Youtube will disable "Allow embedding" again and our player will get in an error status. We can prevent this by checking the playabilityStatus. It'll only be "OK" when the live stream actually started. So we will only play if the playabilityStatus is OK, meaning it's not in the in between state.

* Add channel thumbnail and Youtube logo [stage-2]

* Unit testing for the Allow embedding and thumbnail [stage-2]
AI has refactored this test file and added some unit tests, and I've added some unit tests also

* Version bump [stage-2]

* Fix lint error [stage-2]

* Fix formatting [stage-2]

Run Details

2609 of 2718 branches covered (95.99%)

Branch coverage included in aggregate %.

178 of 180 new or added lines in 1 file covered. (98.89%)

14 existing lines in 1 file now uncovered.

14247 of 14785 relevant lines covered (96.36%)

40.68 hits per line

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

96.45

/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.showLiveWaitingMessage &&
        !this.showLiveNotFoundMessage &&
        !this.showLiveSharedScheduleMessage}
      >
        <p
          class="live-stream-message-text"
          ?hidden=${!this.showLiveWaitingMessage}
        >
          Waiting for ${this.userHandle} Youtube live stream to start...
          <span
            class="live-stream-message-text-inner"
            ?hidden=${!this.showLiveNotEmbeddableMessage}
          >
            The streamer needs to enable "Allow embedding" in the Youtube live
            stream settings.
          </span>
        </p>
        <p
          class="live-stream-message-text"
          ?hidden=${!this.showLiveNotFoundMessage}
        >
          Youtube live stream was not found for channel ${this.userHandle}.
        </p>
        <p
          class="live-stream-message-text"
          ?hidden=${!this.showLiveSharedScheduleMessage}
        >
          Youtube channel live streams won't play in Shared Schedule mode.
          <br />
          <a
            href="https://www.youtube.com/${this.userHandle}/live"
            target="_blank"
          >
            Click here to open ${this.userHandle} live stream in Youtube
            instead.
          </a>
        </p>
        <img
          class="live-stream-youtube-logo"
          alt="Youtube"
          src="https://storage.cloud.google.com/rise-youtube/youtube-logo.png"
        />
      </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: calc(100% - 200px);
        height: calc(100% - 200px);
        padding: 100px;
        position: absolute;
        display: flex;
        background-color: black;
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
      }
      .live-stream-message-text-inner:not([hidden]) {
        margin-top: 60px;
        display: block;
      }
      .live-stream-message-text {
        width: 100%;
        color: white;
        margin: auto;
        text-align: center;
        padding: 40px;
        font-size: 48px;
        font-family: Helvetica;
        font-weight: 100;
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 20px;
      }
      .live-stream-message-text a {
        color: white;
      }
      .live-stream-youtube-logo {
        width: 100px;
        position: absolute;
        bottom: 50px;
        right: 60px;
      }
    `;
  }

  static get properties() {
    return {
      source: { type: String },
      volume: { type: Number },
      channelId: { type: String },
      userHandle: { type: String, attribute: false },
      showLiveWaitingMessage: { type: Boolean, attribute: false },
      showLiveNotFoundMessage: { type: Boolean, attribute: false },
      showLiveSharedScheduleMessage: { type: Boolean, attribute: false },
      showLiveNotEmbeddableMessage: { type: Boolean, attribute: false },
    };
  }

  constructor() {
    super();

    this.version = version;
    this.source = '';
    this.volume = 0;
    this.channelId = '';
    this.userHandle = '';
    this.showLiveWaitingMessage = false;
    this.showLiveNotFoundMessage = false;
    this.showLiveSharedScheduleMessage = false;
    this.showLiveNotEmbeddableMessage = 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.showLiveWaitingMessage = false;
    this.showLiveSharedScheduleMessage = false;
    this.showLiveNotEmbeddableMessage = 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.userHandle = videoData.userHandle;
        this.showLiveWaitingMessage = true;

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

        this.showLiveWaitingMessage = false;

        if (!videoData.videoId) {
          if (RisePlayerConfiguration.Helpers.isSharedSchedule()) {
            this.showLiveSharedScheduleMessage = true;
          } else {
            this.showLiveNotFoundMessage = true;
          }
          this._done();
          return;
        }
      }

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

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

  async _pollLiveVideoId(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._getLiveUrl(), requestInit);
      if (!response.ok) {
        throw response;
      }

      const htmlText = await response.text();

      this._setLiveThumbnail(htmlText);

      videoId = this._parseLiveVideoId(htmlText);

      if (videoId) {
        if (!this._parsePlayabilityStatus(htmlText)) {
          videoId = null;
        }
        if (!this._parseLiveIsEmbeddable(htmlText)) {
          videoId = null;
          this.showLiveNotEmbeddableMessage = true;
        }
      }
    } catch (error) {
      this._logLiveError(error);
    }

    if (
      !videoId &&
      attempt * LIVE_STREAM_POLLING_INTERVAL <=
        MAXIMUM_TIME_FOR_LIVE_STREAM_POLLING
    ) {
      await Utils.delay(LIVE_STREAM_POLLING_INTERVAL);
      return this._pollLiveVideoId(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._logLiveFinalAttempt(videoId, attempt * LIVE_STREAM_POLLING_INTERVAL);

    return videoId;
  }

  _parsePlayabilityStatus(htmlText) {
    // "playabilityStatus":{"status":"OK"

    if (!htmlText.includes('playabilityStatus')) {
      return false;
    }
    let playabilityStatusStr = htmlText.substring(
      htmlText.indexOf('"playabilityStatus"')
    );
    playabilityStatusStr = playabilityStatusStr.substring(
      playabilityStatusStr.indexOf('"status":"') + 10
    );
    playabilityStatusStr = playabilityStatusStr.substring(
      0,
      playabilityStatusStr.indexOf('"')
    );
    return playabilityStatusStr === 'OK';
  }

  _parseLiveVideoId(htmlText) {
    // <link rel="canonical" href="https://www.youtube.com/watch?v=VIDEO_ID">
    let linkCanonical = htmlText.substring(
      htmlText.indexOf('<link rel="canonical"')
    );
    linkCanonical = linkCanonical.substring(0, linkCanonical.indexOf('>') + 1);
    const regexVideoIdCaptureGroups = /watch\?v=(.+)"/.exec(linkCanonical);
    if (regexVideoIdCaptureGroups?.length >= 2) {
      return regexVideoIdCaptureGroups[1];
    }
    return null;
  }

  _parseLiveIsEmbeddable(htmlText) {
    // "playableInEmbed":true,
    if (!htmlText.includes('playableInEmbed')) {
      return false;
    }

    let playableInEmbedStr = htmlText.substring(
      htmlText.indexOf('"playableInEmbed":') + 18
    );
    playableInEmbedStr = playableInEmbedStr.substring(
      0,
      playableInEmbedStr.indexOf(',')
    );
    return playableInEmbedStr === 'true';
  }

  _setLiveThumbnail(htmlText) {
    const liveMessageContainer = this.renderRoot.querySelector(
      '.live-stream-message-container'
    );
    if (!liveMessageContainer) {
      return;
    }

    let thumbnailUrl;
    // <link itemprop="thumbnailUrl" href="THUMBNAIL_URL">
    // if live stream hasn't started yet
    let linkThumbnail = htmlText.substring(
      htmlText.indexOf('<link itemprop="thumbnailUrl"')
    );
    linkThumbnail = linkThumbnail.substring(0, linkThumbnail.indexOf('>') + 1);
    const regexThumbnailUrlCaptureGroups = /href="(.+)"/.exec(linkThumbnail);
    if (regexThumbnailUrlCaptureGroups?.length >= 2) {
      [, thumbnailUrl] = regexThumbnailUrlCaptureGroups;
    }
    if (!thumbnailUrl) {
      // "urlCanonical":"CHANNEL_URL","thumbnail":{"thumbnails":[{"url":"THUMBNAIL_URL"
      // if live stream already started
      thumbnailUrl = htmlText.substring(htmlText.indexOf('"urlCanonical"'));
      thumbnailUrl = thumbnailUrl.substring(
        thumbnailUrl.indexOf('"thumbnails"')
      );
      thumbnailUrl = thumbnailUrl.substring(
        thumbnailUrl.indexOf('"url":"') + 7
      );
      thumbnailUrl = thumbnailUrl.substring(0, thumbnailUrl.indexOf('"'));
    }

    if (thumbnailUrl) {
      liveMessageContainer.style.backgroundImage = `url('${thumbnailUrl}')`;
    } else {
      liveMessageContainer.style.backgroundImage = '';
    }
  }

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

  _logLiveFinalAttempt(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 / b6cb1499-582d-422d-97e0-0fbac736cafa

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