jellyfin-web/dashboard-ui/scripts/mediaplayer.js

(function (document, setTimeout, clearTimeout, screen, localStorage, $, setInterval, window) {

    function mediaPlayer() {

        var self = this;

        var testableAudioElement = document.createElement('audio');
        var testableVideoElement = document.createElement('video');
        var currentMediaElement;
        var currentProgressInterval;
        var positionSlider;
        var isPositionSliderActive;
        var currentTimeElement;
        var currentItem;
        var volumeSlider;
        var muteButton;
        var unmuteButton;
        var startTimeTicksOffset;
        var curentDurationTicks;
        var isStaticStream;
        var culturesPromise;
        var timeout;
        var idleState = true;

        self.playlist = [];
        var currentPlaylistIndex = 0;

        var channelsListPromise;
        var channelsListPromiseTime;

        function getChannelsListPromise() {

            var lastUpdateTime = channelsListPromiseTime || 0;

            // Update every three minutes
            if (!channelsListPromise || !lastUpdateTime || (new Date().getTime() - lastUpdateTime) > 10800000) {

                channelsListPromise = ApiClient.getLiveTvChannels({
                    userId: Dashboard.getCurrentUserId()
                });
            }

            return channelsListPromise;
        }

        function requestFullScreen(element) {
            // Supports most browsers and their versions.
            var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

            if (requestMethod) { // Native full screen.
                requestMethod.call(element);
            } else {
                $('.itemVideo').addClass('fullscreenVideo');
            }
        }

        function exitFullScreen() {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozExitFullScreen) {
                document.mozExitFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            }
        }

        function isFullScreen() {
            return document.fullscreenEnabled || document.mozFullscreenEnabled || document.webkitIsFullScreen || document.mozFullScreen ? true : false;
        }

        $(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function () {
            var nowPlayingBar = ('#nowPlayingBar');
            $('.itemVideo').off('mousemove keydown scroll', idleHandler);
            if (isFullScreen()) {
                $('.itemVideo').addClass('fullscreenVideo');
                idleState = true;
                $('.itemVideo').on('mousemove keydown scroll', idleHandler).trigger('mousemove');
            } else {
                $(".mediaButton,.currentTime,.nowPlayingMediaInfo,.sliderContainer,.barBackground", nowPlayingBar).removeClass("highPosition");
                $('.itemVideo').removeClass('fullscreenVideo');
            }

        });

        $(window).on("beforeunload", function () {

            var item = currentItem;
            var media = currentMediaElement;

            // Try to report playback stopped before the browser closes
            if (item && media && currentProgressInterval) {

                var endTime = currentMediaElement.currentTime;

                var position = Math.floor(10000000 * endTime) + startTimeTicksOffset;

                ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position);
            }
        });

        function replaceQueryString(url, param, value) {
            var re = new RegExp("([?|&])" + param + "=.*?(&|$)", "i");
            if (url.match(re))
                return url.replace(re, '$1' + param + "=" + value + '$2');
            else
                return url + '&' + param + "=" + value;
        }

        function updateVolumeButtons(vol) {

            if (vol) {
                muteButton.show();
                unmuteButton.hide();
            } else {
                muteButton.hide();
                unmuteButton.show();
            }
        }

        function getCurrentTicks(mediaElement) {
            return Math.floor(10000000 * (mediaElement || currentMediaElement).currentTime) + startTimeTicksOffset;
        }

        function onPlaybackStopped() {

            $(this).off('ended.playbackstopped');

            currentTimeElement.empty();

            var endTime = this.currentTime;

            this.currentTime = 0;

            clearProgressInterval();

            var position = Math.floor(10000000 * endTime) + startTimeTicksOffset;

            ApiClient.reportPlaybackStopped(Dashboard.getCurrentUserId(), currentItem.Id, position);

            if (currentItem.MediaType == "Video") {
                ApiClient.stopActiveEncodings();
            }
        }

        function playNextAfterEnded() {

            $(this).off('ended.playnext');

            self.nextTrack();
        }

        function startProgressInterval(itemId) {

            clearProgressInterval();

            var intervalTime = ApiClient.isWebSocketOpen() ? 2000 : 20000;

            currentProgressInterval = setInterval(function () {

                if (currentMediaElement) {
                    sendProgressUpdate(itemId);
                }

            }, intervalTime);
        }

        function sendProgressUpdate(itemId) {

            ApiClient.reportPlaybackProgress(Dashboard.getCurrentUserId(), itemId, getCurrentTicks(), currentMediaElement.paused, currentMediaElement.volume == 0);
        }

        function clearProgressInterval() {

            if (currentProgressInterval) {
                clearTimeout(currentProgressInterval);
                currentProgressInterval = null;
            }
        }
        
        function getTranscodingExtension() {

            var media = testableVideoElement;
            
            // safari
            if (media.canPlayType('application/x-mpegURL').replace(/no/, '')) {
                return '.m3u8';
            }

            // Chrome or IE with plugin installed
            if (media.canPlayType('video/webm').replace(/no/, '')) {
                return '.webm';
            }
            
            return '.mp4';
        }

        function changeStream(ticks, params) {

            var element = currentMediaElement;

            if (isStaticStream && params == null) {

                element.currentTime = ticks / (1000 * 10000);

            } else {

                params = params || {};

                var currentSrc = element.currentSrc;
                console.log(currentSrc);
                currentSrc = replaceQueryString(currentSrc, 'starttimeticks', ticks);

                if (params.AudioStreamIndex != null) {
                    currentSrc = replaceQueryString(currentSrc, 'AudioStreamIndex', params.AudioStreamIndex);
                }
                if (params.SubtitleStreamIndex != null) {
                    currentSrc = replaceQueryString(currentSrc, 'SubtitleStreamIndex', params.SubtitleStreamIndex);
                }
                if (params.MaxWidth != null) {
                    currentSrc = replaceQueryString(currentSrc, 'MaxWidth', params.MaxWidth);
                }
                if (params.VideoBitrate != null) {
                    currentSrc = replaceQueryString(currentSrc, 'VideoBitrate', params.VideoBitrate);
                }
                if (params.AudioBitrate != null) {
                    currentSrc = replaceQueryString(currentSrc, 'AudioBitrate', params.AudioBitrate);
                }
                if (params.AudioCodec) {
                    currentSrc = replaceQueryString(currentSrc, 'AudioCodec', params.AudioCodec);
                }
                if (params.VideoCodec) {
                    currentSrc = replaceQueryString(currentSrc, 'VideoCodec', params.VideoCodec);
                }
                if (params.Static != null) {
                    
                    currentSrc = replaceQueryString(currentSrc, 'Static', params.Static);

                    if (params.Static == 'true') {
                        currentSrc = currentSrc.replace('.webm', '.mp4').replace('.m3u8', '.mp4');
                    } else {
                        currentSrc = currentSrc.replace('.mp4', getTranscodingExtension());
                    }
                }

                clearProgressInterval();

                $(element).off('ended.playbackstopped').off('ended.playnext').on("play.onceafterseek", function () {

                    $(this).off('play.onceafterseek').on('ended.playbackstopped', onPlaybackStopped).on('ended.playnext', playNextAfterEnded);

                    startProgressInterval(currentItem.Id);
                    sendProgressUpdate(currentItem.Id);

                });

                ApiClient.stopActiveEncodings().done(function () {

                    startTimeTicksOffset = ticks;

                    element.src = currentSrc;
                });
            }
        }

        function onPositionSliderChange() {

            isPositionSliderActive = false;

            var newPercent = parseInt(this.value);

            var newPositionTicks = (newPercent / 100) * currentItem.RunTimeTicks;

            changeStream(Math.floor(newPositionTicks));
        }

        $(function () {

            muteButton = $('#muteButton');
            unmuteButton = $('#unmuteButton');

            currentTimeElement = $('.currentTime');

            volumeSlider = $('.volumeSlider').on('slidestop', function () {

                var vol = this.value;

                updateVolumeButtons(vol);
                currentMediaElement.volume = vol;
            });

            positionSlider = $(".positionSlider").on('slidestart', function () {

                isPositionSliderActive = true;

            }).on('slidestop', onPositionSliderChange);

            $('#chaptersFlyout').on('click', '.mediaFlyoutOption', function () {

                var ticks = parseInt(this.getAttribute('data-positionticks'));

                changeStream(ticks);

                hideFlyout($('#chaptersFlyout'));
            });

            $('#audioTracksFlyout').on('click', '.mediaFlyoutOption', function () {

                if (!$(this).hasClass('selectedMediaFlyoutOption')) {
                    var index = parseInt(this.getAttribute('data-index'));

                    changeStream(getCurrentTicks(), { AudioStreamIndex: index, Static: false });
                }

                hideFlyout($('#audioTracksFlyout'));
            });

            $('#subtitleFlyout').on('click', '.mediaFlyoutOption', function () {

                if (!$(this).hasClass('selectedMediaFlyoutOption')) {
                    var index = parseInt(this.getAttribute('data-index'));

                    changeStream(getCurrentTicks(), { SubtitleStreamIndex: index, Static: false });
                }

                hideFlyout($('#subtitleFlyout'));
            });

            $('#qualityFlyout').on('click', '.mediaFlyoutOption', function () {

                if (!$(this).hasClass('selectedMediaFlyoutOption')) {

                    var maxWidth = parseInt(this.getAttribute('data-maxwidth'));
                    var videoBitrate = parseInt(this.getAttribute('data-videobitrate'));
                    var audioBitrate = parseInt(this.getAttribute('data-audiobitrate'));

                    var mp4AudioCodec = this.getAttribute('data-mp4audio');
                    var mp4VideoCodec = this.getAttribute('data-mp4video');
                    var isStatic = this.getAttribute('data-static');

                    localStorage.setItem('preferredVideoBitrate', videoBitrate + audioBitrate);

                    var isMp4 = currentMediaElement.currentSrc.toLowerCase().indexOf('.mp4') != -1;

                    changeStream(getCurrentTicks(), {

                        MaxWidth: maxWidth,
                        VideoBitrate: videoBitrate,
                        AudioBitrate: audioBitrate,
                        Static: isStatic,
                        AudioCodec: isMp4 ? mp4AudioCodec : null,
                        VideoCodec: isMp4 ? mp4VideoCodec : null
                    });
                }

                hideFlyout($('#qualityFlyout'));
            });

            $('#channelsFlyout').on('click', '.mediaFlyoutOption', function () {

                if (!$(this).hasClass('selectedMediaFlyoutOption')) {
                    var channelId = this.getAttribute('data-channelid');
                    self.playById(channelId, 'Channel');
                }

                hideFlyout($('#channelsFlyout'));
            });
        });

        function endsWith(text, pattern) {

            text = text.toLowerCase();
            pattern = pattern.toLowerCase();

            var d = text.length - pattern.length;
            return d >= 0 && text.lastIndexOf(pattern) === d;
        }

        function setCurrentTime(ticks, item, updateSlider) {

            // Convert to ticks
            ticks = Math.floor(ticks);

            var timeText = Dashboard.getDisplayTime(ticks);

            if (curentDurationTicks) {

                timeText += " / " + Dashboard.getDisplayTime(curentDurationTicks);

                if (updateSlider) {
                    var percent = ticks / curentDurationTicks;
                    percent *= 100;

                    positionSlider.val(percent).slider('enable').slider('refresh');
                }
            } else {
                positionSlider.slider('disable').slider('refresh');
            }

            currentTimeElement.html(timeText);
        }

        function playAudio(item, params) {

            var baseParams = {
                audioChannels: 2,
                audioBitrate: 128000
            };

            $.extend(baseParams, params);

            var mp3Url = ApiClient.getUrl('Audio/' + item.Id + '/stream.mp3', $.extend({}, baseParams, {
                audioCodec: 'mp3'
            }));

            var aacUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.aac', $.extend({}, baseParams, {
                audioCodec: 'aac'
            }));

            var webmUrl = ApiClient.getUrl('Audio/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
                audioCodec: 'Vorbis'
            }));

            var mediaStreams = item.MediaStreams || [];

            for (var i = 0, length = mediaStreams.length; i < length; i++) {

                var stream = mediaStreams[i];

                if (stream.Type == "Audio") {

                    // Stream statically when possible
                    if (endsWith(item.Path, ".aac") && stream.BitRate <= 256000) {
                        aacUrl += "&static=true";
                    }
                    else if (endsWith(item.Path, ".mp3") && stream.BitRate <= 256000) {
                        mp3Url += "&static=true";
                    }
                    break;
                }

            }

            var html = '';

            var requiresControls = $.browser.android || ($.browser.webkit && !$.browser.chrome);

            // Can't autoplay in these browsers so we need to use the full controls
            if (requiresControls) {
                html += '<audio preload="auto" autoplay controls>';
            } else {
                html += '<audio preload="auto" style="display:none;" autoplay>';
            }
            html += '<source type="audio/mpeg" src="' + mp3Url + '" />';
            html += '<source type="audio/aac" src="' + aacUrl + '" />';
            html += '<source type="audio/webm" src="' + webmUrl + '" />';
            html += '</audio';

            var nowPlayingBar = $('#nowPlayingBar').show();
            //show stop button
            $('#stopButton', nowPlayingBar).show();
            $('#playButton', nowPlayingBar).hide();
            $('#pauseButton', nowPlayingBar).show();
            $('#fullscreenButton', nowPlayingBar).hide();

            $('#previousTrackButton', nowPlayingBar).show();
            $('#nextTrackButton', nowPlayingBar).show();
            $('#playlistButton', nowPlayingBar).show();

            $('#qualityButton', nowPlayingBar).hide();
            $('#audioTracksButton', nowPlayingBar).hide();
            $('#subtitleButton', nowPlayingBar).hide();
            $('#chaptersButton', nowPlayingBar).hide();
            $('#channelsButton', nowPlayingBar).hide();

            $('#mediaElement', nowPlayingBar).html(html);
            var audioElement = $("audio", nowPlayingBar);

            var initialVolume = localStorage.getItem("volume") || 0.5;

            audioElement.each(function () {
                this.volume = initialVolume;
            });

            volumeSlider.val(initialVolume).slider('refresh');
            updateVolumeButtons(initialVolume);

            audioElement.on("volumechange", function () {

                var vol = this.volume;

                localStorage.setItem("volume", vol);

                updateVolumeButtons(vol);

            }).on("play.once", function () {

                if (!requiresControls) {
                    audioElement.hide();
                }

                var duration = this.duration;
                isStaticStream = duration && !isNaN(duration) && duration != Number.POSITIVE_INFINITY && duration != Number.NEGATIVE_INFINITY;

                audioElement.off("play.once");

                ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id, true, item.MediaType);

                startProgressInterval(item.Id);

            }).on("pause", function () {

                $('#playButton', nowPlayingBar).show();
                $('#pauseButton', nowPlayingBar).hide();

            }).on("playing", function () {

                $('#playButton', nowPlayingBar).hide();
                $('#pauseButton', nowPlayingBar).show();

            }).on("timeupdate", function () {

                if (!isPositionSliderActive) {

                    setCurrentTime(getCurrentTicks(this), item, true);
                }

            }).on("ended.playbackstopped", onPlaybackStopped).on('ended.playnext', playNextAfterEnded);

            currentItem = item;
            curentDurationTicks = item.RunTimeTicks;

            return audioElement[0];
        }

        function canPlayVideoDirect(item, videoStream) {

            if (item.VideoType != "VideoFile" || item.LocationType != "FileSystem") {
                return false;
            }
            if ((videoStream.Codec || '').toLowerCase().indexOf('h264') == -1) {
                return false;
            }

            var audioStreams = (item.MediaStreams || []).filter(function (stream) {
                return stream.Type == "Audio";
            });

            if (audioStreams.length && !audioStreams.filter(canPlayAudioStreamDirect).length) {
                return false;
            }

            var extension = item.Path.substring(item.Path.lastIndexOf('.') + 1);

            return extension.toLowerCase() == 'mp4';
        }

        function canPlayAudioStreamDirect(audioStream) {

            var audioCodec = (audioStream.Codec || '').toLowerCase().replace('-', '');
            if (audioCodec.indexOf('aac') == -1 &&
                audioCodec.indexOf('mp3') == -1 &&
                audioCodec.indexOf('mpeg') == -1) {
                return false;
            }

            if (audioStream.Channels == null) {
                return false;
            }

            // IE won't play at all if more than two channels
            if (audioStream.Channels > 2 && $.browser.msie) {
                return false;
            }

            return true;
        }

        function getVideoQualityOptions(item, audioStreamIndex) {

            var videoStream = (item.MediaStreams || []).filter(function (stream) {
                return stream.Type == "Video";
            })[0];

            var audioStreams = (item.MediaStreams || []).filter(function (stream) {
                return stream.Type == "Audio";
            });

            var audioStream = audioStreamIndex == null ? null : audioStreams[audioStreamIndex];

            var canPlayDirect = canPlayVideoDirect(item, videoStream, audioStream);
            var bitrateSetting = parseInt(localStorage.getItem('preferredVideoBitrate') || '') || 1500000;

            var maxAllowedWidth = Math.max(screen.height, screen.width);

            var options = [];

            // We have media info
            if (videoStream && videoStream.Width) {

                maxAllowedWidth = videoStream.Width;
            }

            // Some 1080- videos are reported as 1912?
            if (maxAllowedWidth >= 1910) {
                options.push({ name: '1080p - 10Mbps', maxWidth: 1920, bitrate: 10000000 });
                options.push({ name: '1080p - 8Mbps', maxWidth: 1920, bitrate: 8000000 });
                options.push({ name: '1080p - 6Mbps', maxWidth: 1920, bitrate: 6000000 });
                options.push({ name: '1080p - 5Mbps', maxWidth: 1920, bitrate: 5000000 });
            }
            else if (maxAllowedWidth >= 1270) {
                options.push({ name: '720p - 10Mbps', maxWidth: 1280, bitrate: 10000000 });
                options.push({ name: '720p - 8Mbps', maxWidth: 1280, bitrate: 8000000 });
                options.push({ name: '720p - 6Mbps', maxWidth: 1280, bitrate: 6000000 });
                options.push({ name: '720p - 5Mbps', maxWidth: 1280, bitrate: 5000000 });
            }
            else if (maxAllowedWidth >= 470) {
                options.push({ name: '480p - 1.5Mbps', maxWidth: 720, bitrate: 1500000 });
                options.push({ name: '480p - 1.0Mbps', maxWidth: 720, bitrate: 1000000 });
            }

            if (maxAllowedWidth >= 1270) {
                options.push({ name: '720p - 4Mbps', maxWidth: 1280, bitrate: 4000000 });
                options.push({ name: '720p - 3Mbps', maxWidth: 1280, bitrate: 3000000 });
                options.push({ name: '720p - 2Mbps', maxWidth: 1280, bitrate: 2000000 });
                options.push({ name: '720p - 1.5Mbps', maxWidth: 1280, bitrate: 1500000 });
            }

            options.push({ name: '480p - 720 kbps', maxWidth: 720, bitrate: 700000 });
            options.push({ name: '480p - 420 kbps', maxWidth: 720, bitrate: 420000 });
            options.push({ name: '360p', maxWidth: 640, bitrate: 400000 });
            options.push({ name: '240p', maxWidth: 426, bitrate: 320000 });

            var canPlayVideoCodecDirect = (videoStream ? videoStream.Codec : '').toLowerCase().indexOf('h264') != -1;
            var canPlayAudioDirect = audioStream ? canPlayAudioStreamDirect(audioStream) : false;

            var videoBitrate = videoStream ? videoStream.BitRate : null;
            var audioBitrate = audioStream ? audioStream.BitRate : null;
            var totalBitrate = (videoBitrate || 0) + (audioBitrate || 0);
            
            var videoWidth = videoStream ? videoStream.Width : null;

            var i, length, option;
            var selectedIndex = -1;
            for (i = 0, length = options.length; i < length; i++) {

                option = options[i];

                if (selectedIndex == -1 && option.bitrate <= bitrateSetting) {
                    selectedIndex = i;
                }

                option.audioBitrate = option.bitrate >= 700000 ? 128000 : 64000;

                if (canPlayVideoCodecDirect &&
                    totalBitrate &&
                    option.bitrate >= totalBitrate &&
                    videoWidth &&
                    option.maxWidth >= videoWidth) {

                    if (canPlayDirect) {

                        option.isStatic = true;
                        option.mp4VideoCodec = 'copy';
                        option.mp4AudioCodec = 'copy';
                    }
                }

                option.isStatic = option.isStatic || false;
                option.mp4VideoCodec = option.mp4VideoCodec || 'h264';

                option.mp4AudioCodec = option.mp4AudioCodec || 'aac';

                option.videoBitrate = option.bitrate - option.audioBitrate;
            }

            if (selectedIndex == -1) {

                selectedIndex = options.length - 1;
            }

            options[selectedIndex].selected = true;

            var firstOption = options[0];
            
            if (firstOption.isStatic) {
                firstOption.name = 'Direct';
            }

            return options;
        }

        function playVideo(item, startPosition, user) {

            var mediaStreams = item.MediaStreams || [];

            var baseParams = {
                audioChannels: 2,
                StartTimeTicks: startPosition || 0,
                SubtitleStreamIndex: getInitialSubtitleStreamIndex(mediaStreams, user),
                AudioStreamIndex: getInitialAudioStreamIndex(mediaStreams, user),
                deviceId: ApiClient.deviceId(),
                Type: item.Type,
                Static: false
            };

            var qualityOption = getVideoQualityOptions(item, baseParams.AudioStreamIndex).filter(function (opt) {
                return opt.selected;
            })[0];

            baseParams.maxWidth = qualityOption.maxWidth;
            baseParams.videoBitrate = qualityOption.videoBitrate;
            baseParams.audioBitrate = qualityOption.audioBitrate;

            // Webm must be ahead of mp4 due to the issue of mp4 playing too fast in chrome
            var prioritizeWebmOverH264 = $.browser.chrome || $.browser.msie;

            var staticMp4 = qualityOption.isStatic;

            var mp4VideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.mp4', $.extend({}, baseParams, {
                VideoCodec: qualityOption.mp4VideoCodec,
                AudioCodec: qualityOption.mp4AudioCodec,
                profile: 'baseline',
                level: 3,
                Static: staticMp4
            }));

            var webmVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.webm', $.extend({}, baseParams, {
                VideoCodec: 'vpx',
                AudioCodec: 'Vorbis'
            }));

            var hlsVideoUrl = ApiClient.getUrl('Videos/' + item.Id + '/stream.m3u8', $.extend({}, baseParams, {
                VideoCodec: qualityOption.mp4VideoCodec,
                AudioCodec: qualityOption.mp4AudioCodec,
                profile: 'baseline',
                level: 3,
                timeStampOffsetMs: 0
            }));

            var html = '';

            var requiresControls = $.browser.msie || $.browser.android || ($.browser.webkit && !$.browser.chrome);

            // Can't autoplay in these browsers so we need to use the full controls
            if (requiresControls) {
                html += '<video class="itemVideo" autoplay controls preload="none">';
            } else {
                html += '<video class="itemVideo" autoplay preload="none">';
            }

            if (!staticMp4) {
                // HLS must be at the top for safari
                html += '<source type="application/x-mpegURL" src="' + hlsVideoUrl + '" />';
            }

            if (prioritizeWebmOverH264 && !staticMp4) {

                html += '<source type="video/webm" src="' + webmVideoUrl + '" />';
            }

            html += '<source type="video/mp4" src="' + mp4VideoUrl + '" />';

            if (!prioritizeWebmOverH264 && !staticMp4) {

                html += '<source type="video/webm" src="' + webmVideoUrl + '" />';
            }

            html += '</video';

            var nowPlayingBar = $('#nowPlayingBar').show();
            //show stop button
            $('#stopButton', nowPlayingBar).show();
            $('#playButton', nowPlayingBar).hide();
            $('#pauseButton', nowPlayingBar).show();
            $('#playlistButton', nowPlayingBar).hide();
            $('#previousTrackButton', nowPlayingBar).hide();
            $('#nextTrackButton', nowPlayingBar).hide();
            $('#mediaElement', nowPlayingBar).html(html);

            $('#qualityButton', nowPlayingBar).show();

            if (mediaStreams.filter(function (i) {
                return i.Type == "Audio";
            }).length) {
                $('#audioTracksButton', nowPlayingBar).show();
            } else {
                $('#audioTracksButton', nowPlayingBar).hide();
            }

            if (mediaStreams.filter(function (i) {
                return i.Type == "Subtitle";
            }).length) {
                $('#subtitleButton', nowPlayingBar).show();
            } else {
                $('#subtitleButton', nowPlayingBar).hide();
            }

            if (item.Chapters && item.Chapters.length) {
                $('#chaptersButton', nowPlayingBar).show();
            } else {
                $('#chaptersButton', nowPlayingBar).hide();
            }

            if (requiresControls) {
                $('#fullscreenButton', nowPlayingBar).hide();
            } else {
                $('#fullscreenButton', nowPlayingBar).show();
            }

            var channelsButton = $('#channelsButton', nowPlayingBar).hide();

            var videoElement = $("video", nowPlayingBar);

            var initialVolume = localStorage.getItem("volume") || 0.5;

            videoElement.each(function () {
                this.volume = initialVolume;
            });

            volumeSlider.val(initialVolume).slider('refresh');
            updateVolumeButtons(initialVolume);

            videoElement.on("volumechange", function () {

                var vol = this.volume;

                localStorage.setItem("volume", vol);

                updateVolumeButtons(vol);

            }).on("play.once", function () {

                var duration = this.duration;
                isStaticStream = duration && !isNaN(duration) && duration != Number.POSITIVE_INFINITY && duration != Number.NEGATIVE_INFINITY;

                videoElement.off("play.once");

                if (startPosition && staticMp4) {
                    self.seek(startPosition);
                }

                ApiClient.reportPlaybackStart(Dashboard.getCurrentUserId(), item.Id, true, item.MediaType);

                startProgressInterval(item.Id);

            }).on("pause", function () {

                $('#playButton', nowPlayingBar).show();
                $('#pauseButton', nowPlayingBar).hide();

            }).on("playing", function () {

                $('#playButton', nowPlayingBar).hide();
                $('#pauseButton', nowPlayingBar).show();

            }).on("timeupdate", function () {

                if (!isPositionSliderActive) {

                    setCurrentTime(getCurrentTicks(this), item, true);
                }

            }).on("error", function () {


                var errorCode = this.error ? this.error.code : '';
                console.log('Html5 Video error code: ' + errorCode);

            }).on("ended.playbackstopped", onPlaybackStopped).on('ended.playnext', playNextAfterEnded);

            currentItem = item;
            curentDurationTicks = item.RunTimeTicks;

            getChannelsListPromise().done(function (result) {

                if (result.Items.length) {
                    channelsButton.show();
                }
            });

            return videoElement[0];
        };

        function getInitialAudioStreamIndex(mediaStreams, user) {

            // Find all audio streams with at least one channel
            var audioStreams = mediaStreams.filter(function (stream) {
                return stream.Type == "Audio" && stream.Channels;
            });

            if (user.Configuration.AudioLanguagePreference) {

                for (var i = 0, length = audioStreams.length; i < length; i++) {
                    var mediaStream = audioStreams[i];

                    if (mediaStream.Language == user.Configuration.AudioLanguagePreference) {
                        return mediaStream.Index;
                    }

                }
            }

            // Just use the first audio stream
            return audioStreams.length ? audioStreams[0].Index : null;
        }

        function getInitialSubtitleStreamIndex(mediaStreams, user) {

            var i, length, mediaStream;

            // Find the first forced subtitle stream
            for (i = 0, length = mediaStreams.length; i < length; i++) {
                mediaStream = mediaStreams[i];

                if (mediaStream.Type == "Subtitle" && mediaStream.IsForced) {
                    return mediaStream.Index;
                }

            }

            // If none then look at user configuration
            if (user.Configuration.SubtitleLanguagePreference) {

                for (i = 0, length = mediaStreams.length; i < length; i++) {
                    mediaStream = mediaStreams[i];

                    if (mediaStream.Type == "Subtitle" && mediaStream.Language == user.Configuration.SubtitleLanguagePreference) {

                        if (user.Configuration.UseForcedSubtitlesOnly) {

                            if (mediaStream.IsForced) {
                                return mediaStream.Index;
                            }

                        } else {
                            return mediaStream.Index;
                        }
                    }

                }
            }

            return null;
        }

        function idleHandler() {
            var nowPlayingBar = $("#nowPlayingBar");
            if (timeout) {
                window.clearTimeout(timeout);
            }
            if (idleState == true) {
                $(".mediaButton,.currentTime,.nowPlayingMediaInfo,.sliderContainer,.barBackground", nowPlayingBar).addClass("highPosition");
            }
            idleState = false;
            timeout = window.setTimeout(function () {
                idleState = true;
                $(".mediaButton,.currentTime,.nowPlayingMediaInfo,.sliderContainer,.barBackground", nowPlayingBar).removeClass("highPosition");
            }, 4000);
        }

        self.canPlay = function (item) {

            if (item.Type == "MusicAlbum" || item.Type == "MusicArtist" || item.Type == "MusicGenre") {
                return true;
            }

            if (item.GameSystem == "Nintendo" && item.MediaType == "Game" && item.ProviderIds.NesBox && item.ProviderIds.NesBoxRom) {
                return true;
            }

            if (item.GameSystem == "Super Nintendo" && item.MediaType == "Game" && item.ProviderIds.NesBox && item.ProviderIds.NesBoxRom) {
                return true;
            }

            return self.canPlayMediaType(item.MediaType);
        };

        self.getPlayUrl = function (item) {


            if (item.GameSystem == "Nintendo" && item.MediaType == "Game" && item.ProviderIds.NesBox && item.ProviderIds.NesBoxRom) {

                return "http://nesbox.com/game/" + item.ProviderIds.NesBox + '/rom/' + item.ProviderIds.NesBoxRom;
            }

            if (item.GameSystem == "Super Nintendo" && item.MediaType == "Game" && item.ProviderIds.NesBox && item.ProviderIds.NesBoxRom) {

                return "http://snesbox.com/game/" + item.ProviderIds.NesBox + '/rom/' + item.ProviderIds.NesBoxRom;
            }

            return null;
        };

        self.canPlayMediaType = function (mediaType) {

            var media;

            if (mediaType === "Video") {
                media = testableVideoElement;
                if (media.canPlayType) {

                    return media.canPlayType('video/mp4').replace(/no/, '') || media.canPlayType('video/mp2t').replace(/no/, '') || media.canPlayType('video/webm').replace(/no/, '') || media.canPlayType('application/x-mpegURL').replace(/no/, '') || media.canPlayType('video/ogv').replace(/no/, '');
                }

                return false;
            }

            if (mediaType === "Audio") {
                media = testableAudioElement;
                if (media.canPlayType) {

                    return media.canPlayType('audio/mpeg').replace(/no/, '') || media.canPlayType('audio/webm').replace(/no/, '') || media.canPlayType('audio/aac').replace(/no/, '');
                }

                return false;
            }

            return false;
        };

        self.play = function (items, startPosition) {

            Dashboard.getCurrentUser().done(function (user) {

                var item = items[0];

                var videoType = (item.VideoType || "").toLowerCase();

                var expirementalText = "This feature is experimental. It may not work at all with some titles. Do you wish to continue?";

                if (videoType == "dvd") {

                    self.playWithWarning(items, startPosition, user, "dvdstreamconfirmed", "Dvd Folder Streaming", expirementalText);
                    return;
                }
                else if (videoType == "bluray") {

                    self.playWithWarning(items, startPosition, user, "bluraystreamconfirmed", "Blu-ray Folder Streaming", expirementalText);
                    return;
                }
                else if (videoType == "iso") {

                    var isoType = (item.IsoType || "").toLowerCase();

                    if (isoType == "dvd") {

                        self.playWithWarning(items, startPosition, user, "dvdisostreamconfirmed", "Dvd Iso Streaming", expirementalText);
                        return;
                    }
                    else if (isoType == "bluray") {

                        self.playWithWarning(items, startPosition, user, "blurayisostreamconfirmed", "Blu-ray Iso Streaming", expirementalText);
                        return;
                    }
                }
                else if ($.browser.msie && videoType) {

                    self.playWithWarning(items, startPosition, user, "iewebmplugin", "Internet Explorer Playback", "For optimal video playback of Internet Explorer desktop edition, please install google's webm plugin for IE.<br/><br/><a target='_blank' href='https://tools.google.com/dlpage/webmmf'>https://tools.google.com/dlpage/webmmf</a>");
                    return;

                }

                self.playInternal(items[0], startPosition, user);
                self.onPlaybackStarted(items);
            });
        };

        self.playWithWarning = function (items, startPosition, user, localStorageKeyName, header, text) {

            localStorageKeyName += new Date().getMonth();

            if (localStorage.getItem(localStorageKeyName) == "1") {

                self.playInternal(items[0], startPosition, user);

                self.onPlaybackStarted(items);

                return;
            }

            Dashboard.confirm(text, header, function (result) {

                if (result) {

                    localStorage.setItem(localStorageKeyName, "1");

                    self.playInternal(items[0], startPosition, user);

                    self.onPlaybackStarted(items);
                }

            });

        };

        self.onPlaybackStarted = function (items) {

            self.playlist = items;
            currentPlaylistIndex = 0;
        };

        self.playInternal = function (item, startPosition, user) {

            if (item == null) {
                throw new Error("item cannot be null");
            }

            if (self.isPlaying()) {
                self.stop();
            }

            var mediaElement;

            if (item.MediaType === "Video") {

                mediaElement = playVideo(item, startPosition, user);
            } else if (item.MediaType === "Audio") {

                mediaElement = playAudio(item);
            } else {
                throw new Error("Unrecognized media type");
            }

            startTimeTicksOffset = startPosition || 0;

            currentMediaElement = mediaElement;

            var nowPlayingBar = $('#nowPlayingBar').show();

            //display image and title
            var imageTags = item.ImageTags || {};
            var html = '';

            var url = "";

            if (imageTags.Primary) {

                url = ApiClient.getImageUrl(item.Id, {
                    type: "Primary",
                    height: 80,
                    tag: item.ImageTags.Primary
                });
            }
            else if (item.BackdropImageTags && item.BackdropImageTags.length) {

                url = ApiClient.getImageUrl(item.Id, {
                    type: "Backdrop",
                    height: 80,
                    tag: item.BackdropImageTags[0]
                });
            } else if (imageTags.Thumb) {

                url = ApiClient.getImageUrl(item.Id, {
                    type: "Thumb",
                    height: 80,
                    tag: item.ImageTags.Thumb
                });

            }
            else if (item.Type == "Channel" || item.Type == "Recording") {
                url = "css/images/items/detail/tv.png";
            }
            else if (item.MediaType == "Audio") {
                url = "css/images/items/detail/audio.png";
            }
            else {
                url = "css/images/items/detail/video.png";
            }

            var name = item.Name;
            var seriesName = '';

            // Channel number
            if (item.Number) {
                name = item.Number + ' ' + name;
            }
            if (item.IndexNumber != null) {
                name = item.IndexNumber + " - " + name;
            }
            if (item.ParentIndexNumber != null) {
                name = item.ParentIndexNumber + "." + name;
            }
            if (item.SeriesName || item.Album || item.ProductionYear) {
                seriesName = item.SeriesName || item.Album || item.ProductionYear;
            }
            if (item.CurrentProgram) {
                seriesName = item.CurrentProgram.Name;
            }

            var href = LibraryBrowser.getHref(item.CurrentProgram || item);

            html += "<div><a href='" + href + "'><img class='nowPlayingBarImage ' alt='' title='' src='" + url + "' style='height:40px;display:inline-block;' /></a></div>";

            if (item.SeriesName || item.Album || item.CurrentProgram) {
                html += '<div class="nowPlayingText">' + seriesName + '<br/>' + name + '</div>';
            } else {
                html += '<div class="nowPlayingText">' + name + '<br/>' + seriesName + '</div>';
            }

            $('.nowPlayingMediaInfo', nowPlayingBar).html(html);
        };

        var getItemFields = "MediaStreams,Chapters,Path";

        self.getItemsForPlayback = function (query) {

            var userId = Dashboard.getCurrentUserId();

            query.Limit = query.Limit || 100;
            query.Fields = getItemFields;

            return ApiClient.getItems(userId, query);
        };

        self.playById = function (id, itemType, startPositionTicks) {

            if (itemType == "Recording") {

                ApiClient.getLiveTvRecording(id, Dashboard.getCurrentUserId()).done(function (item) {

                    self.play([item], startPositionTicks);

                });

                return;
            }

            if (itemType == "Channel") {

                ApiClient.getLiveTvChannel(id, Dashboard.getCurrentUserId()).done(function (item) {

                    self.play([item], startPositionTicks);

                });

                return;
            }

            ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {

                if (item.IsFolder) {

                    self.getItemsForPlayback({

                        ParentId: id,
                        Recursive: true,
                        SortBy: "SortName"

                    }).done(function (result) {

                        self.play(result.Items, startPositionTicks);

                    });

                } else {
                    self.play([item], startPositionTicks);
                }

            });

        };

        self.playInstantMixFromSong = function (id) {

            ApiClient.getInstantMixFromSong(id, {

                UserId: Dashboard.getCurrentUserId(),
                Fields: getItemFields,
                Limit: 50

            }).done(function (result) {

                self.play(result.Items);
            });

        };

        self.playInstantMixFromAlbum = function (id) {

            ApiClient.getInstantMixFromAlbum(id, {

                UserId: Dashboard.getCurrentUserId(),
                Fields: getItemFields,
                Limit: 50

            }).done(function (result) {

                self.play(result.Items);
            });

        };

        self.playInstantMixFromArtist = function (name) {

            ApiClient.getInstantMixFromArtist(name, {

                UserId: Dashboard.getCurrentUserId(),
                Fields: getItemFields,
                Limit: 50

            }).done(function (result) {

                self.play(result.Items);
            });

        };

        self.playInstantMixFromMusicGenre = function (name) {

            ApiClient.getInstantMixFromMusicGenre(name, {

                UserId: Dashboard.getCurrentUserId(),
                Fields: getItemFields,
                Limit: 50

            }).done(function (result) {

                self.play(result.Items);
            });

        };

        self.playArtist = function (artist) {

            self.getItemsForPlayback({

                Artists: artist,
                Recursive: true,
                SortBy: "Album,SortName",
                IncludeItemTypes: "Audio"

            }).done(function (result) {

                self.play(result.Items);

            });

        };

        self.shuffleArtist = function (artist) {

            self.getItemsForPlayback({

                Artists: artist,
                Recursive: true,
                SortBy: "Random",
                IncludeItemTypes: "Audio"

            }).done(function (result) {

                self.play(result.Items);

            });

        };

        self.shuffleMusicGenre = function (genre) {

            self.getItemsForPlayback({

                Genres: genre,
                Recursive: true,
                SortBy: "Random",
                IncludeItemTypes: "Audio"

            }).done(function (result) {

                self.play(result.Items);

            });

        };

        self.shuffleFolder = function (id) {

            self.getItemsForPlayback({

                ParentId: id,
                Recursive: true,
                SortBy: "Random"

            }).done(function (result) {

                self.play(result.Items);

            });

        };

        self.toggleFullscreen = function () {
            if (isFullScreen()) {
                if (document.cancelFullScreen) { document.cancelFullScreen(); }
                else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); }
                else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else {
                    $('.itemVideo').removeClass('fullscreenVideo');

                }
            } else {
                requestFullScreen(document.body);
            }
        };

        self.removeFromPlaylist = function (index) {

            self.playlist.remove(index);

        };

        // Gets or sets the current playlist index
        self.currentPlaylistIndex = function (i) {

            if (i == null) {
                return currentPlaylistIndex;
            }

            var newItem = self.playlist[i];

            Dashboard.getCurrentUser().done(function (user) {

                self.playInternal(newItem, 0, user);
                currentPlaylistIndex = i;
            });
        };

        self.nextTrack = function () {

            var newIndex = currentPlaylistIndex + 1;
            var newItem = self.playlist[newIndex];

            if (newItem) {
                Dashboard.getCurrentUser().done(function (user) {

                    self.playInternal(newItem, 0, user);
                    currentPlaylistIndex = newIndex;
                });
            }
        };

        self.previousTrack = function () {
            var newIndex = currentPlaylistIndex - 1;
            if (newIndex >= 0) {
                var newItem = self.playlist[newIndex];

                if (newItem) {
                    Dashboard.getCurrentUser().done(function (user) {

                        self.playInternal(newItem, 0, user);
                        currentPlaylistIndex = newIndex;
                    });
                }
            }
        };

        self.queueItemsNext = function (items) {

            var insertIndex = 1;

            for (var i = 0, length = items.length; i < length; i++) {

                self.playlist.splice(insertIndex, 0, items[i]);

                insertIndex++;
            }
        };

        self.queueItems = function (items) {

            for (var i = 0, length = items.length; i < length; i++) {

                self.playlist.push(items[i]);
            }
        };

        self.queue = function (id) {

            ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(function (item) {

                if (item.IsFolder) {

                    self.getItemsForPlayback({

                        ParentId: id,
                        Recursive: true,
                        SortBy: "SortName"

                    }).done(function (result) {

                        self.queueItems(result.Items);

                    });

                } else {
                    self.queueItems([item]);
                }

            });
        };

        self.queueArtist = function (artist) {

            self.getItemsForPlayback({

                Artists: artist,
                Recursive: true,
                SortBy: "Album,SortName",
                IncludeItemTypes: "Audio"

            }).done(function (result) {

                self.queueItems(result.Items);

            });

        };

        self.pause = function () {
            currentMediaElement.pause();
        };

        self.unpause = function () {
            currentMediaElement.play();
        };

        self.seek = function (position) {

            changeStream(position);

        };

        self.mute = function () {

            if (currentMediaElement) {
                currentMediaElement.volume = 0;
            }
        };

        self.unmute = function () {
            if (currentMediaElement) {
                currentMediaElement.volume = volumeSlider.val();
            }
        };

        self.toggleMute = function () {

            if (currentMediaElement) {
                currentMediaElement.volume = currentMediaElement.volume ? 0 : volumeSlider.val();
            }
        };

        self.volumeDown = function () {

            if (currentMediaElement) {
                currentMediaElement.volume = Math.max(currentMediaElement.volume - .02, 0);

                volumeSlider.val(currentMediaElement.volume).slider('refresh');
            }
        };

        self.volumeUp = function () {

            if (currentMediaElement) {
                currentMediaElement.volume = Math.min(currentMediaElement.volume + .02, 1);

                volumeSlider.val(currentMediaElement.volume).slider('refresh');
            }
        };

        self.stop = function () {

            var elem = currentMediaElement;

            elem.pause();

            $(elem).off('ended.playnext').on('ended', function () {

                $(this).remove();
                elem.src = "";
                currentMediaElement = null;

            }).trigger('ended');

            $('#nowPlayingBar').hide();

            if (isFullScreen()) {
                exitFullScreen();
            }
        };

        self.isPlaying = function () {
            return currentMediaElement;
        };

        function hideFlyout(flyout) {

            flyout.hide().empty();

            $(document.body).off("mousedown.hidesearchhints");
        }

        function showFlyout(flyout, button) {

            $(document.body).off("mousedown.mediaflyout").on("mousedown.mediaflyout", function (e) {

                var elem = $(e.target);

                var flyoutId = flyout[0].id;
                var safeItems = button + ',#' + flyoutId;

                if (!elem.is(safeItems) && !elem.parents(safeItems).length) {
                    hideFlyout(flyout);
                }

            });

            flyout.show();
        }

        function getChaptersFlyoutHtml(item) {

            var html = '';

            var currentTicks = getCurrentTicks();

            var chapters = item.Chapters || [];

            for (var i = 0, length = chapters.length; i < length; i++) {

                var chapter = chapters[i];

                var isSelected = false;

                if (currentTicks >= chapter.StartPositionTicks) {

                    var nextChapter = chapters[i + 1];

                    isSelected = !nextChapter || currentTicks < nextChapter.StartPositionTicks;
                }

                if (isSelected) {
                    html += '<div data-positionticks="' + chapter.StartPositionTicks + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
                } else {
                    html += '<div data-positionticks="' + chapter.StartPositionTicks + '" class="mediaFlyoutOption">';
                }

                var imgUrl;

                if (chapter.ImageTag) {

                    imgUrl = ApiClient.getImageUrl(item.Id, {
                        maxwidth: 200,
                        tag: chapter.ImageTag,
                        type: "Chapter",
                        index: i
                    });

                } else {
                    imgUrl = "css/images/media/chapterflyout.png";
                }

                html += '<img class="mediaFlyoutOptionImage" src="' + imgUrl + '" />';

                html += '<div class="mediaFlyoutOptionContent">';

                var name = chapter.Name || "Chapter " + (i + 1);

                html += '<div class="mediaFlyoutOptionName">' + name + '</div>';
                html += '<div class="mediaFlyoutOptionSecondaryText">' + Dashboard.getDisplayTime(chapter.StartPositionTicks) + '</div>';

                html += '</div>';

                html += "</div>";
            }

            return html;
        }

        function getAudioTracksHtml(item, cultures) {

            var streams = item.MediaStreams.filter(function (i) {
                return i.Type == "Audio";
            });

            var currentIndex = getParameterByName('AudioStreamIndex', currentMediaElement.currentSrc);

            var html = '';

            for (var i = 0, length = streams.length; i < length; i++) {

                var stream = streams[i];

                if (stream.Index == currentIndex) {
                    html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
                } else {
                    html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption">';
                }

                html += '<img class="mediaFlyoutOptionImage" src="css/images/media/audioflyout.png" />';

                html += '<div class="mediaFlyoutOptionContent">';

                var language = null;

                if (stream.Language && stream.Language != "und") {

                    var culture = cultures.filter(function (current) {
                        return current.ThreeLetterISOLanguageName.toLowerCase() == stream.Language.toLowerCase();
                    });

                    if (culture.length) {
                        language = culture[0].DisplayName;
                    }
                }

                html += '<div class="mediaFlyoutOptionName">' + (language || 'Unknown language') + '</div>';

                var options = [];

                if (stream.Codec) {
                    options.push(stream.Codec);
                }
                if (stream.Profile) {
                    options.push(stream.Profile);
                }

                if (stream.BitRate) {
                    options.push((Math.floor(stream.BitRate / 1000)) + ' kbps');
                }

                if (stream.Channels) {
                    options.push(stream.Channels + ' ch');
                }

                if (options.length) {
                    html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join('&nbsp;&#149;&nbsp;') + '</div>';
                }

                options = [];

                if (stream.IsDefault) {
                    options.push('Default');
                }
                if (stream.IsForced) {
                    options.push('Forced');
                }

                if (options.length) {
                    html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join('&nbsp;&#149;&nbsp;') + '</div>';
                }

                html += "</div>";

                html += "</div>";
            }

            return html;
        }

        function getSubtitleTracksHtml(item, cultures) {

            var streams = item.MediaStreams.filter(function (i) {
                return i.Type == "Subtitle";
            });

            var currentIndex = getParameterByName('SubtitleStreamIndex', currentMediaElement.currentSrc) || -1;

            var html = '';

            for (var i = 0, length = streams.length; i < length; i++) {

                var stream = streams[i];

                if (stream.Index == currentIndex) {
                    html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption selectedMediaFlyoutOption">';
                } else {
                    html += '<div data-index="' + stream.Index + '" class="mediaFlyoutOption">';
                }

                html += '<img class="mediaFlyoutOptionImage" src="css/images/media/subtitleflyout.png" />';

                html += '<div class="mediaFlyoutOptionContent">';

                var language = null;

                if (stream.Language && stream.Language != "und") {

                    var culture = cultures.filter(function (current) {
                        return current.ThreeLetterISOLanguageName.toLowerCase() == stream.Language.toLowerCase();
                    });

                    if (culture.length) {
                        language = culture[0].DisplayName;
                    }
                }

                html += '<div class="mediaFlyoutOptionName">' + (language || 'Unknown language') + '</div>';

                var options = [];

                if (stream.Codec) {
                    options.push(stream.Codec);
                }

                if (options.length) {
                    html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join('&nbsp;&#149;&nbsp;') + '</div>';
                }

                options = [];

                if (stream.IsDefault) {
                    options.push('Default');
                }
                if (stream.IsForced) {
                    options.push('Forced');
                }
                if (stream.IsExternal) {
                    options.push('External');
                }

                if (options.length) {
                    html += '<div class="mediaFlyoutOptionSecondaryText">' + options.join('&nbsp;&#149;&nbsp;') + '</div>';
                }

                html += "</div>";

                html += "</div>";
            }

            return html;
        }

        function getQualityFlyoutHtml(item) {

            var html = '';

            var currentAudioStreamIndex = getParameterByName('AudioStreamIndex', currentMediaElement.currentSrc);

            var options = getVideoQualityOptions(item, currentAudioStreamIndex);

            for (var i = 0, length = options.length; i < length; i++) {

                var option = options[i];

                var cssClass = "mediaFlyoutOption";

                if (option.selected) {
                    cssClass += " selectedMediaFlyoutOption";
                }

                html += '<div data-static="' + option.isStatic + '" data-mp4video="' + option.mp4VideoCodec + '" data-mp4audio="' + option.mp4AudioCodec + '" data-maxwidth="' + option.maxWidth + '" data-videobitrate="' + option.videoBitrate + '" data-audiobitrate="' + option.audioBitrate + '" class="' + cssClass + '">';

                html += '<div class="mediaFlyoutOptionContent">';

                html += '<div class="mediaFlyoutOptionName" style="padding:.5em;">' + option.name + '</div>';

                html += "</div>";

                html += "</div>";
            }

            return html;
        }

        function getChannelsFlyoutHtml(channels) {

            var html = '';

            for (var i = 0, length = channels.length; i < length; i++) {

                var channel = channels[i];

                html += '<div data-channelid="' + channel.Id + '" class="mediaFlyoutOption">';

                var imgUrl;

                if (channel.ImageTags.Primary) {

                    imgUrl = ApiClient.getUrl("LiveTV/Channels/" + channel.Id + "/Images/Primary", {
                        maxwidth: 200,
                        tag: channel.ImageTags.Primary,
                        type: "Primary"
                    });
                }
                else {
                    imgUrl = "css/images/media/tvflyout.png";
                }

                html += '<img class="mediaFlyoutOptionImage" src="' + imgUrl + '" />';

                html += '<div class="mediaFlyoutOptionContent">';

                var name = channel.Number + ' ' + channel.Name;

                html += '<div class="mediaFlyoutOptionName">' + name + '</div>';
                html += '<div class="mediaFlyoutOptionSecondaryText">' + channel.CurrentProgram.Name + '</div>';

                html += '</div>';

                html += "</div>";
            }

            return html;
        }

        self.showChannelsFlyout = function () {

            var flyout = $('#channelsFlyout');

            if (!flyout.is(':visible')) {
                getChannelsListPromise().done(function (result) {

                    showFlyout(flyout, '#channelsButton');

                    flyout.html(getChannelsFlyoutHtml(result.Items)).scrollTop(0);
                });
            }
        };

        self.showAudioTracksFlyout = function () {

            var flyout = $('#audioTracksFlyout');

            if (!flyout.is(':visible')) {

                culturesPromise = culturesPromise || ApiClient.getCultures();

                culturesPromise.done(function (cultures) {

                    showFlyout(flyout, '#audioTracksButton');

                    flyout.html(getAudioTracksHtml(currentItem, cultures)).scrollTop(0);
                });
            }
        };

        self.showChaptersFlyout = function () {

            var flyout = $('#chaptersFlyout');

            if (!flyout.is(':visible')) {

                showFlyout(flyout, '#chaptersButton');

                flyout.html(getChaptersFlyoutHtml(currentItem)).scrollTop(0);
            }
        };

        self.showQualityFlyout = function () {

            var flyout = $('#qualityFlyout');

            if (!flyout.is(':visible')) {

                showFlyout(flyout, '#qualityButton');

                flyout.html(getQualityFlyoutHtml(currentItem)).scrollTop(0);
            }
        };

        self.showSubtitleMenu = function () {

            var flyout = $('#subtitleFlyout');

            if (!flyout.is(':visible')) {

                culturesPromise = culturesPromise || ApiClient.getCultures();

                culturesPromise.done(function (cultures) {

                    showFlyout(flyout, '#subtitleButton');

                    flyout.html(getSubtitleTracksHtml(currentItem, cultures)).scrollTop(0);
                });

            }
        };

        self.showSendMediaMenu = function () {

            RemoteControl.showMenuForItem({
                item: currentItem
            });

        };
    }

    window.MediaPlayer = new mediaPlayer();

})(document, setTimeout, clearTimeout, screen, localStorage, $, setInterval, window);