function LibraryScreen(parent, courseTitle, library) {
    const self = this;
    H5P.EventDispatcher.call(this);

    this.parent = parent;
    this.currentLibraryElement;
    this.currentLibraryInstance;
    this.currentLibraryId = 0;
    this.nextLibraryId = library.nextContentId;
    this.libraryFeedback = library.feedback;
    this.nextLibraries = {};
    this.libraryInstances = {};
    this.libraryFinishingRequirements = [];
    this.libraryTitle;
    this.branchingQuestions = [];
    this.navButton;
    this.header;
    this.shouldAutoplay = [];
    this.isShowing = false;
    this.contentOverlays = [];

    const contentTitle = (library.type && library.type.metadata && library.type.metadata.title ? library.type.metadata.title : '');
    this.wrapper = this.createWrapper(courseTitle, (contentTitle ? contentTitle : 'Untitled Content'), library.showContentTitle && contentTitle);
    this.wrapper.classList.add('h5p-next-screen');
    this.wrapper.classList.add('h5p-branching-hidden');

    const libraryWrapper = this.createLibraryElement(library, false);
    this.currentLibraryWrapper = libraryWrapper;
    this.currentLibraryElement = libraryWrapper.getElementsByClassName('h5p-branching-scenario-content')[0];
    this.currentLibraryInstance = this.libraryInstances[0]; // TODO: Decide whether the start screen id should be hardcoded as 0

    this.createNextLibraries(library);

    this.wrapper.appendChild(libraryWrapper);

    /**
     * Disable or enable tab indexes hidden behind overlay.
     * Currently only targets the endscreen as the IV deals with the other elements.
     * TODO: Since endscreen isn't always shown it should also target all the elements.
     */
    self.toggleIVTabIndexes = function (index) {
      var self = this.currentLibraryInstance;
      const selector = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';

      let $tabbables = self.$container[0].querySelectorAll(selector);

      if (!$tabbables) {
        return;
      }

      for (let i = 0; i < $tabbables.length; i++) {
        if (index === "-1") {
          let elementTabIndex = $tabbables[i].getAttribute('tabindex');
          $tabbables[i].dataset.tabindex = elementTabIndex;
          $tabbables[i].setAttribute('tabindex', index);
        }
        else {
          let tabindex = $tabbables[i].dataset.tabindex;
          if ($tabbables[i].classList.contains("ui-slider-handle")) {
            $tabbables[i].setAttribute('tabindex', 0);
            $tabbables[i].dataset.tabindex = '';
          }
          else if (tabindex !== undefined) {
            $tabbables[i].setAttribute('tabindex', index);
            $tabbables[i].dataset.tabindex = '';
          }
          else {
            $tabbables[i].setAttribute('tabindex', index);
          }
        }

      }
    };

    self.triggerAutoplay = function (e) {
      const id = (e.data !== undefined && e.data.nextContentId !== undefined ? e.data.nextContentId : 0);
      if (id < 0 || id !== self.currentLibraryId) {
        return; // All of the stars did not align, skip autoplay
      }

      const library = parent.getLibrary(id);
      if (library.type.library.split(' ')[0] === 'H5P.BranchingQuestion') {
        return;
      }

      if (self.shouldAutoplay[self.currentLibraryId]) {
        if (self.currentLibraryInstance.play !== undefined) {
          self.currentLibraryInstance.play();
        }
        else if (self.currentLibraryInstance.elementInstances) {
          for (let i = 0; i < self.currentLibraryInstance.elementInstances[0].length; i++) {
            const elementInstance = self.currentLibraryInstance.elementInstances[0][i];
            if (elementInstance.play !== undefined) {
              elementInstance.play();
            }
          }
        }
      }
    };

    /**
     * Handle enterfullscreen event and resize the library instance
     */
    parent.on('enterFullScreen', () => {
      setTimeout(() => {
        if (this.currentLibraryInstance) {
          this.currentLibraryInstance.trigger('resize');
        }
      }, 500);
    });

    parent.on('started', self.triggerAutoplay);
    parent.on('navigated', self.triggerAutoplay);
  }
/**
   * LibraryScreen
   *
   * @param  {BranchingScenario} parent BranchingScenario object
   * @param  {string} courseTitle Title
   * @param  {Object} library H5P Library Data
   * @return {LibraryScreen} A screen oject
   */
LibraryScreen
@param  {BranchingScenario} parent BranchingScenario object
@param  {string} courseTitle Title
@param  {Object} library H5P Library Data
@return {LibraryScreen} A screen oject
LibraryScreen @param { BranchingScenario } parent BranchingScenario object @param { string } courseTitle Title @param { Object } library H5P Library Data @return { LibraryScreen } A screen oject
function LibraryScreen(parent, courseTitle, library) {
    const self = this;
    H5P.EventDispatcher.call(this);
    this.parent = parent;
    this.currentLibraryElement;
    this.currentLibraryInstance;
    this.currentLibraryId = 0;
    this.nextLibraryId = library.nextContentId;
    this.libraryFeedback = library.feedback;
    this.nextLibraries = {};
    this.libraryInstances = {};
    this.libraryFinishingRequirements = [];
    this.libraryTitle;
    this.branchingQuestions = [];
    this.navButton;
    this.header;
    this.shouldAutoplay = [];
    this.isShowing = false;
    this.contentOverlays = [];
    const contentTitle = (library.type && library.type.metadata && library.type.metadata.title ? library.type.metadata.title : '');
    this.wrapper = this.createWrapper(courseTitle, (contentTitle ? contentTitle : 'Untitled Content'), library.showContentTitle && contentTitle);
    this.wrapper.classList.add('h5p-next-screen');
    this.wrapper.classList.add('h5p-branching-hidden');
    const libraryWrapper = this.createLibraryElement(library, false);
    this.currentLibraryWrapper = libraryWrapper;
    this.currentLibraryElement = libraryWrapper.getElementsByClassName('h5p-branching-scenario-content')[0];
    this.currentLibraryInstance = this.libraryInstances[0]; 
    this.createNextLibraries(library);
    this.wrapper.appendChild(libraryWrapper);
    self.toggleIVTabIndexes = function (index) {
      var self = this.currentLibraryInstance;
      const selector = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]';
      let $tabbables = self.$container[0].querySelectorAll(selector);
      if (!$tabbables) {
        return;
      }
      for (let i = 0; i < $tabbables.length; i++) {
        if (index === "-1") {
          let elementTabIndex = $tabbables[i].getAttribute('tabindex');
          $tabbables[i].dataset.tabindex = elementTabIndex;
          $tabbables[i].setAttribute('tabindex', index);
        }
        else {
          let tabindex = $tabbables[i].dataset.tabindex;
          if ($tabbables[i].classList.contains("ui-slider-handle")) {
            $tabbables[i].setAttribute('tabindex', 0);
            $tabbables[i].dataset.tabindex = '';
          }
          else if (tabindex !== undefined) {
            $tabbables[i].setAttribute('tabindex', index);
            $tabbables[i].dataset.tabindex = '';
          }
          else {
            $tabbables[i].setAttribute('tabindex', index);
          }
        }
      }
    };
    self.triggerAutoplay = function (e) {
      const id = (e.data !== undefined && e.data.nextContentId !== undefined ? e.data.nextContentId : 0);
      if (id < 0 || id !== self.currentLibraryId) {
        return; 
      }
      const library = parent.getLibrary(id);
      if (library.type.library.split(' ')[0] === 'H5P.BranchingQuestion') {
        return;
      }
      if (self.shouldAutoplay[self.currentLibraryId]) {
        if (self.currentLibraryInstance.play !== undefined) {
          self.currentLibraryInstance.play();
        }
        else if (self.currentLibraryInstance.elementInstances) {
          for (let i = 0; i < self.currentLibraryInstance.elementInstances[0].length; i++) {
            const elementInstance = self.currentLibraryInstance.elementInstances[0][i];
            if (elementInstance.play !== undefined) {
              elementInstance.play();
            }
          }
        }
      }
    };
    parent.on('enterFullScreen', () => {
      setTimeout(() => {
        if (this.currentLibraryInstance) {
          this.currentLibraryInstance.trigger('resize');
        }
      }, 500);
    });
    parent.on('started', self.triggerAutoplay);
    parent.on('navigated', self.triggerAutoplay);
  }
function LibraryScreen ( parent , courseTitle , library ) { const self = this ; H5P . EventDispatcher . call ( this ) ; this . parent = parent ; this . currentLibraryElement ; this . currentLibraryInstance ; this . currentLibraryId = 0 ; this . nextLibraryId = library . nextContentId ; this . libraryFeedback = library . feedback ; this . nextLibraries = { } ; this . libraryInstances = { } ; this . libraryFinishingRequirements = [ ] ; this . libraryTitle ; this . branchingQuestions = [ ] ; this . navButton ; this . header ; this . shouldAutoplay = [ ] ; this . isShowing = false ; this . contentOverlays = [ ] ; const contentTitle = ( library . type && library . type . metadata && library . type . metadata . title ? library . type . metadata . title : '' ) ; this . wrapper = this . createWrapper ( courseTitle , ( contentTitle ? contentTitle : 'Untitled Content' ) , library . showContentTitle && contentTitle ) ; this . wrapper . classList . add ( 'h5p-next-screen' ) ; this . wrapper . classList . add ( 'h5p-branching-hidden' ) ; const libraryWrapper = this . createLibraryElement ( library , false ) ; this . currentLibraryWrapper = libraryWrapper ; this . currentLibraryElement = libraryWrapper . getElementsByClassName ( 'h5p-branching-scenario-content' ) [ 0 ] ; this . currentLibraryInstance = this . libraryInstances [ 0 ] ; this . createNextLibraries ( library ) ; this . wrapper . appendChild ( libraryWrapper ) ; self . toggleIVTabIndexes = function ( index ) { var self = this . currentLibraryInstance ; const selector = 'a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]' ; let $tabbables = self . $container [ 0 ] . querySelectorAll ( selector ) ; if ( ! $tabbables ) { return ; } for ( let i = 0 ; i < $tabbables . length ; i ++ ) { if ( index === "-1" ) { let elementTabIndex = $tabbables [ i ] . getAttribute ( 'tabindex' ) ; $tabbables [ i ] . dataset . tabindex = elementTabIndex ; $tabbables [ i ] . setAttribute ( 'tabindex' , index ) ; } else { let tabindex = $tabbables [ i ] . dataset . tabindex ; if ( $tabbables [ i ] . classList . contains ( "ui-slider-handle" ) ) { $tabbables [ i ] . setAttribute ( 'tabindex' , 0 ) ; $tabbables [ i ] . dataset . tabindex = '' ; } else if ( tabindex !== undefined ) { $tabbables [ i ] . setAttribute ( 'tabindex' , index ) ; $tabbables [ i ] . dataset . tabindex = '' ; } else { $tabbables [ i ] . setAttribute ( 'tabindex' , index ) ; } } } } ; self . triggerAutoplay = function ( e ) { const id = ( e . data !== undefined && e . data . nextContentId !== undefined ? e . data . nextContentId : 0 ) ; if ( id < 0 || id !== self . currentLibraryId ) { return ; } const library = parent . getLibrary ( id ) ; if ( library . type . library . split ( ' ' ) [ 0 ] === 'H5P.BranchingQuestion' ) { return ; } if ( self . shouldAutoplay [ self . currentLibraryId ] ) { if ( self . currentLibraryInstance . play !== undefined ) { self . currentLibraryInstance . play ( ) ; } else if ( self . currentLibraryInstance . elementInstances ) { for ( let i = 0 ; i < self . currentLibraryInstance . elementInstances [ 0 ] . length ; i ++ ) { const elementInstance = self . currentLibraryInstance . elementInstances [ 0 ] [ i ] ; if ( elementInstance . play !== undefined ) { elementInstance . play ( ) ; } } } } } ; parent . on ( 'enterFullScreen' , ( ) => { setTimeout ( ( ) => { if ( this . currentLibraryInstance ) { this . currentLibraryInstance . trigger ( 'resize' ) ; } } , 500 ) ; } ) ; parent . on ( 'started' , self . triggerAutoplay ) ; parent . on ( 'navigated' , self . triggerAutoplay ) ; }
LibraryScreen
 @param  {BranchingScenario} parent BranchingScenario object
 @param  {string} courseTitle Title
 @param  {Object} library H5P Library Data
 @return {LibraryScreen} A screen oject
LibraryScreen @param { BranchingScenario } parent BranchingScenario object @param { string } courseTitle Title @param { Object } library H5P Library Data @return { LibraryScreen } A screen oject
// TODO: Decide whether the start screen id should be hardcoded as 0 /**
     * Disable or enable tab indexes hidden behind overlay.
     * Currently only targets the endscreen as the IV deals with the other elements.
     * TODO: Since endscreen isn't always shown it should also target all the elements.
     */ // All of the stars did not align, skip autoplay /**
     * Handle enterfullscreen event and resize the library instance
     */