jellyfish-web/src/components/playbackSettings/playbackSettings.template.html

<form style="margin: 0 auto;">
    <div class="verticalSection verticalSection-extrabottompadding">
        <h2 class="sectionTitle">
            ${HeaderAudioSettings}
        </h2>

        <div class="selectContainer">
            <select is="emby-select" id="selectAllowedAudioChannels" label="${LabelAllowedAudioChannels}">
                <option value="-1">${Auto}</option>
                <option value="1">${LabelSelectMono}</option>
                <option value="2">${LabelSelectStereo}</option>
                <option value="6">5.1 ${LabelSelectAudioChannels}</option>
                <option value="8">7.1 ${LabelSelectAudioChannels}</option>
            </select>
        </div>

        <div class="selectContainer">
            <select is="emby-select" id="selectAudioLanguage" label="${LabelAudioLanguagePreference}"></select>
        </div>

        <label class="checkboxContainer">
            <input type="checkbox" is="emby-checkbox" class="chkPlayDefaultAudioTrack" />
            <span>${LabelPlayDefaultAudioTrack}</span>
        </label>
    </div>

    <div class="qualitySections hide">
        <div class="verticalSection verticalSection-extrabottompadding videoQualitySection hide">
            <h2 class="sectionTitle">
                ${HeaderVideoQuality}
            </h2>

            <div class="selectContainer fldVideoInNetworkQuality hide">
                <select is="emby-select" class="selectVideoInNetworkQuality" label="${LabelHomeNetworkQuality}"></select>
            </div>

            <div class="selectContainer fldVideoInternetQuality hide">
                <select is="emby-select" class="selectVideoInternetQuality" label="${LabelInternetQuality}"></select>
            </div>

            <div class="selectContainer fldChromecastQuality hide">
                <select is="emby-select" class="selectChromecastVideoQuality" label="${LabelMaxChromecastBitrate}"></select>
            </div>

            <div class="selectContainer">
                <select is="emby-select" class="selectLabelMaxVideoWidth" label="${LabelMaxVideoResolution}">
                    <option value="0">${Auto}</option>
                    <option value="-1">${ScreenResolution}</option>
                    <option value="640">360p</option>
                    <option value="852">480p</option>
                    <option value="1280">720p</option>
                    <option value="1920">1080p</option>
                    <option value="3840">4K</option>
                    <option value="7680">8K</option>
                </select>
            </div>
        </div>

        <div class="verticalSection verticalSection-extrabottompadding musicQualitySection hide">
            <h2>
                ${HeaderMusicQuality}
            </h2>

            <div class="selectContainer">
                <select is="emby-select" class="selectMusicInternetQuality" label="${LabelInternetQuality}"></select>
            </div>

            <div class="checkboxContainer checkboxContainer-withDescription">
                <label>
                    <input type="checkbox" is="emby-checkbox" class="chkEnableAudioNormalization" />
                    <span>${EnableAudioNormalization}</span>
                </label>
                <div class="fieldDescription checkboxFieldDescription">${EnableAudioNormalizationHelp}</div>
            </div>
        </div>
    </div>

    <div class="verticalSection verticalSection-extrabottompadding">
        <h2 class="sectionTitle">
            ${TabAdvanced}
        </h2>

        <div class="checkboxContainer checkboxContainer-withDescription">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkPreferFmp4HlsContainer" />
                <span>${PreferFmp4HlsContainer}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">${PreferFmp4HlsContainerHelp}</div>
        </div>

        <div class="checkboxContainer checkboxContainer-withDescription cinemaModeOptions">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkEnableCinemaMode" />
                <span>${EnableCinemaMode}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">${CinemaModeConfigurationHelp}</div>
        </div>

        <div class="checkboxContainer fldEpisodeAutoPlay hide">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkEpisodeAutoPlay" />
                <span>${PlayNextEpisodeAutomatically}</span>
            </label>
        </div>

        <div class="checkboxContainer checkboxContainer-withDescription">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkRememberAudioSelections" />
                <span>${RememberAudioSelections}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">${RememberAudioSelectionsHelp}</div>
        </div>

        <div class="checkboxContainer checkboxContainer-withDescription">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkRememberSubtitleSelections" />
                <span>${RememberSubtitleSelections}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">${RememberSubtitleSelectionsHelp}</div>
        </div>

        <div class="checkboxContainer checkboxContainer-withDescription fldEnableNextVideoOverlay">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkEnableNextVideoOverlay" />
                <span>${EnableNextVideoInfoOverlay}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">${EnableNextVideoInfoOverlayHelp}</div>
        </div>

        <div class="checkboxContainer fldExternalPlayer checkboxContainer-withDescription hide">
            <label>
                <input type="checkbox" is="emby-checkbox" class="chkExternalVideoPlayer" />
                <span>${EnableExternalVideoPlayers}</span>
            </label>
            <div class="fieldDescription checkboxFieldDescription">
                <div class="labelNativeExternalPlayers">${EnableExternalVideoPlayersHelp}</div>
            </div>
        </div>

        <div class="selectContainer">
            <select is="emby-select" class="selectChromecastVersion" label="${LabelChromecastVersion}">
                <option value="stable">${LabelStable}</option>
                <option value="unstable">${LabelUnstable}</option>
            </select>
        </div>

        <div class="selectContainer">
            <select is="emby-select" class="selectSkipForwardLength" label="${LabelSkipForwardLength}"></select>
        </div>

        <div class="selectContainer">
            <select is="emby-select" class="selectSkipBackLength" label="${LabelSkipBackLength}"></select>
        </div>
    </div>

    <button is="emby-button" type="submit" class="raised button-submit block btnSave hide">
        <span>${Save}</span>
    </button>
</form>