betajs/betajs-media-components

<div ba-if="{{states.gallerysidebar}}"
     ba-show="{{gallerysidebar}}"
     class="{{csscommon}}-full-height {{csscommon}}-flex-column"
>
    <div class="{{cssgallerysidebar}}-header-container">
        <div class="{{cssgallerysidebar}}-title">
            <span ba-if="{{!adsplaying}}">{{gallerytitletext}}</span>
        </div>
        <div ba-if="{{ headerlogoimgurl }}"
             class="{{cssgallerysidebar}}-header-logo"
        >
            <a href="{{headerlogourl || headerlogoimgurl }}" title="{{ headerlogoname }}" target="_blank">
                <img ba-prop:src="{{ headerlogoimgurl }}" alt="{{headerlogoname}}" />
            </a>
        </div>
    </div>

    <div ba-if="{{adsplaying}}" class="{{cssgallerysidebar}}-container {{cssgallerysidebar}}-ads-container">
        <div class="{{cssgallerysidebar}}-ads-body-container">
            <div ba-if="{{afteradsendtext}}" class="{{cssgallerysidebar}}-ad-information-text">
                <p>
                    {{afteradsendtext}}
                </p>
            </div>
            <div ba-if="{{companionadcontent}}"
                 class="{{cssfloatingsidebar}}-companion-container"
            ></div>
            <div ba-if="{{showlearnmorebutton && !companionadcontent}}">
                <ba-ads-learn-more-button
                    ba-if="{{moredetailslink && !companionadcontent}}"
                    ba-adsplaying="{{adsplaying}}"
                    ba-cssprefix="{{cssgallerysidebar}}"
                    ba-moredetailslink="{{moredetailslink}}"
                    ba-datatestselector="sidebar-ads-learn-more-button"
                    ba-event:click_action="on_learn_more_click"
                ></ba-ads-learn-more-button>
            </div>
        </div>

        <div class="{{cssgallerysidebar}}-ads-footer-container">
            <div class="{{cssgallerysidebar}}-ads-footer-right-container">
                <ba-ads-choices-link
                    ba-if="{{adchoiceslink && showadchoices && !unknownadsrc}}"
                    ba-adchoiceslink="{{adchoiceslink}}"
                    ba-datatestselector="sidebar-ads-choices-button"
                    ba-event:click_action="on_ads_choices_click"
                ></ba-ads-choices-link>
            </div>
        </div>
    </div>

    <div ba-show="{{!adsplaying}}" class="{{cssgallerysidebar}}-container">
        <div class="{{cssgallerysidebar}}-list-container">
            <div ba-if="{{loading}}" class="{{cssgallerysidebar}}-loading-container">
                <ba-spinner></ba-spinner>
            </div>
            <ul ba-if="{{showplaylist}}"
                class="{{cssgallerysidebar}}-list" ba-show="{{!loading}}"
                ba-repeat="{{video :: videos}}"
            >
                <li ba-show="{{video.display && !(video.watched && hidevideoafterplay)}}"
                    class="{{cssgallerysidebar}}-list-item
                    {{currentindex === video.index ? (cssgallerysidebar + '-currently-playing-list-item') : ''}}"
                    data-index="{{video.index}}"
                    data-index-selector="gallery-item-{{video.index}}"
                    onclick="{{play_video(video.index)}}"
                >
                    <div class="{{cssgallerysidebar}}-list-item-poster-container">
                        <div class="{{cssgallerysidebar}}-circle-progress-container">
                            <ba-circle-progress
                                ba-if="{{shownextloader && nextindex === video.index}}"
                                ba-autostart="{{true}}"
                                ba-timeout="{{noengagenext * 1000}}"
                                ba-noengagenext="{{noengagenext}}"
                                ba-paused="{{!playing}}"
                            ></ba-circle-progress>
                        </div>
                        <img class="{{cssgallerysidebar}}-list-item-poster"
                             ba-prop:src="{{video.poster}}" alt="{{video.title}}"
                        />
                    </div>
                    <div class="{{cssgallerysidebar}}-list-item-title">
                        {{(video.title)?video.title:''}}
                    </div>
                </li>
            </ul>

        </div>

        <div class="{{cssgallerysidebar}}-footer-container"></div>
    </div>
</div>

<!-- Show gallery more prioritized than sidebar -->
<div ba-if="{{floatingsidebar}}"
     class="{{cssfloatingsidebar}}-container {{csscommon}}-full-height"
>
    <div ba-if="{{adsplaying}}"
         class="{{cssfloatingsidebar}}-ad-playing-container {{csscommon}}-full-height"
    >
        <ba-ads-choices-link
            ba-if="{{adchoiceslink && showadchoices && !unknownadsrc}}"
            ba-adchoiceslink="{{adchoiceslink}}"
            ba-datatestselector="sidebar-ads-choices-button"
            ba-event:click_action="on_ads_choices_click"
        ></ba-ads-choices-link>
        <!-- Companion ad content will be set as innerHTML  -->
        <div ba-if="{{companionadcontent}}"
             class="{{cssfloatingsidebar}}-companion-container"
        ></div>
        <div class="{{cssfloatingsidebar}}-content-container" ba-if={{showlearnmorebutton}}>
            <ba-ads-learn-more-button
                ba-if="{{moredetailslink && !companionadcontent}}"
                ba-adsplaying="{{adsplaying}}"
                ba-cssprefix="{{cssfloatingsidebar}}"
                ba-moredetailslink="{{moredetailslink}}"
                ba-datatestselector="sidebar-ads-learn-more-button"
                ba-event:click_action="on_learn_more_click"
            ></ba-ads-learn-more-button>
        </div>
        <div ba-if="{{!showlearnmorebutton && afteradsendtext}}" class="{{cssfloatingsidebar}}-title">
            {{afteradsendtext}}
        </div>
    </div>
    <div ba-if="{{!adsplaying}}" class="{{cssfloatingsidebar}}-content-container {{csscommon}}-full-height">
        <div class="{{cssfloatingsidebar}}-title">
            {{title}}
        </div>
    </div>
    <div ba-if="{{headerlogoimgurl}}" class="{{cssfloatingsidebar}}-logo">
        <a href="{{ headerlogourl || headerlogoimgurl }}" title="{{headerlogoname}}" target="_blank">
            <img ba-prop:src="{{headerlogoimgurl}}" alt="{{headerlogoname}}" />
        </a>
    </div>
</div>