@@ -176,7 +176,7 @@ const LOG_TYPE = {
176176 * NOTE: If udpated here, update in amp-story.js
177177 * @private @const {number}
178178 */
179- const DESKTOP_ONE_PANEL_ASPECT_RATIO_THRESHOLD = 3 / 4 ;
179+ const PANEL_ASPECT_RATIO_THRESHOLD = 3 / 4 ;
180180
181181/**
182182 * Note that this is a vanilla JavaScript class and should not depend on AMP
@@ -252,14 +252,6 @@ export class AmpStoryPlayer {
252252 /** @private {?Element} */
253253 this . nextButton_ = null ;
254254
255- /**
256- * Shows or hides the desktop panels player experiment.
257- * Variable is set on window for unit testing new features.
258- * @private {?boolean}
259- */
260- this . isDesktopPanelExperimentOn_ =
261- this . win_ . DESKTOP_PANEL_STORY_PLAYER_EXP_ON ;
262-
263255 return this . element_ ;
264256 }
265257
@@ -408,9 +400,7 @@ export class AmpStoryPlayer {
408400 this . initializeAttribution_ ( ) ;
409401 this . initializePageScroll_ ( ) ;
410402 this . initializeCircularWrapping_ ( ) ;
411- if ( this . isDesktopPanelExperimentOn_ ) {
412- this . initializeDesktopStoryControlUI_ ( ) ;
413- }
403+ this . initializeDesktopStoryControlUI_ ( ) ;
414404 this . signalReady_ ( ) ;
415405 this . element_ . isBuilt_ = true ;
416406 }
@@ -732,36 +722,36 @@ export class AmpStoryPlayer {
732722 new AmpStoryPlayerViewportObserver ( this . win_ , this . element_ , ( ) =>
733723 this . visibleDeferred_ . resolve ( )
734724 ) ;
735- if ( this . isDesktopPanelExperimentOn_ ) {
736- if ( this . win_ . ResizeObserver ) {
737- new this . win_ . ResizeObserver ( ( e ) => {
738- const { height, width} = e [ 0 ] . contentRect ;
739- this . onPlayerResize_ ( height , width ) ;
740- } ) . observe ( this . element_ ) ;
741- } else {
742- // Set size once as fallback for browsers not supporting ResizeObserver.
743- const { height, width} = this . element_ . /*OK*/ getBoundingClientRect ( ) ;
725+
726+ if ( this . win_ . ResizeObserver ) {
727+ new this . win_ . ResizeObserver ( ( e ) => {
728+ const { height, width} = e [ 0 ] . contentRect ;
744729 this . onPlayerResize_ ( height , width ) ;
745- }
730+ } ) . observe ( this . element_ ) ;
731+ } else {
732+ // Set size once as fallback for browsers not supporting ResizeObserver.
733+ const { height, width} = this . element_ . /*OK*/ getBoundingClientRect ( ) ;
734+ this . onPlayerResize_ ( height , width ) ;
746735 }
736+
747737 this . render_ ( ) ;
748738
749739 this . element_ . isLaidOut_ = true ;
750740 }
751741
752742 /**
753- * Builds desktop "previous" and "next" story UI.
743+ * Builds panel mode "previous" and "next" story UI.
754744 * @private
755745 */
756746 initializeDesktopStoryControlUI_ ( ) {
757747 this . prevButton_ = this . doc_ . createElement ( 'button' ) ;
758- this . prevButton_ . classList . add ( 'i-amphtml-story-player-desktop- panel-prev' ) ;
748+ this . prevButton_ . classList . add ( 'i-amphtml-story-player-panel-prev' ) ;
759749 this . prevButton_ . addEventListener ( 'click' , ( ) => this . previous_ ( ) ) ;
760750 this . prevButton_ . setAttribute ( 'aria-label' , 'previous story' ) ;
761751 this . rootEl_ . appendChild ( this . prevButton_ ) ;
762752
763753 this . nextButton_ = this . doc_ . createElement ( 'button' ) ;
764- this . nextButton_ . classList . add ( 'i-amphtml-story-player-desktop- panel-next' ) ;
754+ this . nextButton_ . classList . add ( 'i-amphtml-story-player-panel-next' ) ;
765755 this . nextButton_ . addEventListener ( 'click' , ( ) => this . next_ ( ) ) ;
766756 this . nextButton_ . setAttribute ( 'aria-label' , 'next story' ) ;
767757 this . rootEl_ . appendChild ( this . nextButton_ ) ;
@@ -770,7 +760,7 @@ export class AmpStoryPlayer {
770760 }
771761
772762 /**
773- * Toggles disabled attribute on desktop "previous" and "next" buttons.
763+ * Toggles disabled attribute on panel mode "previous" and "next" buttons.
774764 * @private
775765 */
776766 checkButtonsDisabled_ ( ) {
@@ -792,26 +782,22 @@ export class AmpStoryPlayer {
792782 * @private
793783 */
794784 onPlayerResize_ ( height , width ) {
795- const isDesktopOnePanel =
796- width / height > DESKTOP_ONE_PANEL_ASPECT_RATIO_THRESHOLD ;
785+ const isPanel = width / height > PANEL_ASPECT_RATIO_THRESHOLD ;
797786
798- this . rootEl_ . classList . toggle (
799- 'i-amphtml-story-player-desktop-panel' ,
800- isDesktopOnePanel
801- ) ;
787+ this . rootEl_ . classList . toggle ( 'i-amphtml-story-player-panel' , isPanel ) ;
802788
803- if ( isDesktopOnePanel ) {
789+ if ( isPanel ) {
804790 setStyles ( this . rootEl_ , {
805791 '--i-amphtml-story-player-height' : `${ height } ,
806792 } ) ;
807793
808794 this . rootEl_ . classList . toggle (
809- 'i-amphtml-story-player-desktop- panel-medium' ,
795+ 'i-amphtml-story-player-panel-medium' ,
810796 height < 756
811797 ) ;
812798
813799 this . rootEl_ . classList . toggle (
814- 'i-amphtml-story-player-desktop- panel-small' ,
800+ 'i-amphtml-story-player-panel-small' ,
815801 height < 538
816802 ) ;
817803 }
@@ -950,12 +936,11 @@ export class AmpStoryPlayer {
950936 'remaining' : remaining ,
951937 } ;
952938
953- if ( this . isDesktopPanelExperimentOn_ ) {
954- this . checkButtonsDisabled_ ( ) ;
955- this . getUiState_ ( ) . then ( ( uiTypeNumber ) =>
956- this . onUiStateUpdate_ ( uiTypeNumber )
957- ) ;
958- }
939+ this . checkButtonsDisabled_ ( ) ;
940+ this . getUiState_ ( ) . then ( ( uiTypeNumber ) =>
941+ this . onUiStateUpdate_ ( uiTypeNumber )
942+ ) ;
943+
959944 this . signalNavigation_ ( navigation ) ;
960945 this . maybeFetchMoreStories_ ( remaining ) ;
961946 }
@@ -1548,10 +1533,8 @@ export class AmpStoryPlayer {
15481533 this . onMutedStateUpdate_ ( /** @type {string } */ ( data . value ) ) ;
15491534 break ;
15501535 case STORY_MESSAGE_STATE_TYPE . UI_STATE :
1551- if ( this . isDesktopPanelExperimentOn_ ) {
1552- // Handles UI state updates on window resize.
1553- this . onUiStateUpdate_ ( /** @type {number } */ ( data . value ) ) ;
1554- }
1536+ // Handles UI state updates on window resize.
1537+ this . onUiStateUpdate_ ( /** @type {number } */ ( data . value ) ) ;
15551538 break ;
15561539 case AMP_STORY_PLAYER_EVENT :
15571540 this . onPlayerEvent_ ( /** @type {string } */ ( data . value ) ) ;
0 commit comments