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

(function (window, document, $) {

    function showMenu(sessions, options) {

        var html = '<div data-role="popup" data-transition="slidedown" class="remoteControlFlyout" data-theme="a">';

        html += '<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right" data-theme="b">Close</a>';

        html += '<div class="ui-bar-b" style="text-align:center;">';
        html += '<div style="margin:.5em 0;">Remote Control</div>';
        html += '</div>';

        html += '<div style="padding: 1em;">';

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

        // Add controls here
        html += '<div>';
        html += '<select id="selectSession" name="selectSession" data-mini="true"></select></div>';

        html += '</div>';

        html += '<div class="nowPlayingInfo" style="margin:1em 0;">';

        html += '<div class="nowPlaying" style="display:none;">';

        html += getPlaybackHtml(sessions.currentSession);

        html += '</div>';

        html += '<p class="nothingPlaying" style="display:none;">Nothing is currently playing.</p>';

        html += '</div>';

        html += '<div class="commandsCollapsible" data-role="collapsible" data-collapsed="true" data-mini="true" style="margin-top: 1em;display:none;">';
        html += '<h4>Send Command</h4>';
        html += '<div>';

        html += '<p class="sessionButtons" style="text-align:center;">';

        html += '<button class="btnGoHome" type="button" data-icon="home" data-mini="true" data-inline="true">Go Home</button>';
        html += '<button class="btnGoToSettings" type="button" data-icon="gear" data-mini="true" data-inline="true">View Settings</button>';

        html += '</p>';

        html += '<p style="text-align:center;">';

        html += '<div><label for="txtMessage">Message text</label></div>';

        html += '<input id="txtMessage" name="txtMessage" type="text" />';

        html += '<button type="button" data-icon="mail" class="btnSendMessage" data-mini="true">Send Message</button>';

        html += '</p>';

        html += '</div>';
        html += '</div>';

        html += '</div>';

        html += '</div>';

        $(document.body).append(html);

        var popup = $('.remoteControlFlyout').popup({ history: false, tolerance: 0, corners: false }).trigger('create').popup("open").on("popupafterclose", function () {

            if (ApiClient.isWebSocketOpen()) {
                ApiClient.sendWebSocketMessage("SessionsStop");
            }

            $(ApiClient).off("websocketmessage.remotecontrol");

            $(this).off("popupafterclose").remove();

            $('.remoteControlFlyout').popup("destroy").remove();
        });

        renderSessionsInControlMenu(popup, sessions, options);
        updateSessionInfo(popup, sessions, options);

        if (ApiClient.isWebSocketOpen()) {
            ApiClient.sendWebSocketMessage("SessionsStart", "1000,1000");

            $(ApiClient).on("websocketmessage.remotecontrol", function (e, msg) {

                if (msg.MessageType === "Sessions") {

                    // Update existing data
                    updateSessionInfo(popup, msg.Data);
                }
            });

        }

        $('.btnGoHome', popup).on('click', function () {

            var id = $('#selectSession', popup).val();

            ApiClient.sendCommand(id, 'GoHome');
        });

        $('.btnGoToSettings', popup).on('click', function () {

            var id = $('#selectSession', popup).val();

            ApiClient.sendCommand(id, 'GoToSettings');
        });

        $('.btnSendMessage', popup).on('click', function () {

            var id = $('#selectSession', popup).val();

            var messageText = $('#txtMessage', popup).val();

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

                    ApiClient.sendMessageCommand(id, {
                        Header: "Message from " + user.Name,
                        Text: messageText
                    });
                });
            } else {
                $('#txtMessage', popup)[0].focus();
            }
        });

        $('.btnVolumeDown', popup).on('click', function () {

            var id = $('#selectSession', popup).val();

            ApiClient.sendCommand(id, 'VolumeDown');
        });

        $('.btnVolumeUp', popup).on('click', function () {

            var id = $('#selectSession', popup).val();

            ApiClient.sendCommand(id, 'VolumeUp');
        });

        $('.btnToggleMute', popup).on('click', function () {

            var id = $('#selectSession', popup).val();

            ApiClient.sendCommand(id, 'ToggleMute');
        });

        $('.btnStop', popup).on('click', function () {

            var id = $('#selectSession', popup).val();

            ApiClient.sendPlayStateCommand(id, 'Stop');
        });

        $('.btnPause', popup).on('click', function () {

            var id = $('#selectSession', popup).val();

            ApiClient.sendPlayStateCommand(id, 'Pause');
        });

        $('.btnPlay', popup).on('click', function () {

            var id = $('#selectSession', popup).val();

            ApiClient.sendPlayStateCommand(id, 'Unpause');
        });

        $('.btnNextTrack', popup).on('click', function () {

            var id = $('#selectSession', popup).val();

            ApiClient.sendPlayStateCommand(id, 'NextTrack');
        });

        $('.btnPreviousTrack', popup).on('click', function () {

            var id = $('#selectSession', popup).val();

            ApiClient.sendPlayStateCommand(id, 'PreviousTrack');
        });

        $("#positionSlider", popup).on("slidestart", function () {

            this.isSliding = true;

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

            var id = $('#selectSession', popup).val();

            var percent = $(this).val();

            var duration = parseInt($(this).attr('data-duration'));

            var position = duration * percent / 100;

            ApiClient.sendPlayStateCommand(id, 'Seek',
                {
                    SeekPositionTicks: parseInt(position)
                });

            this.isSliding = false;
        });

        $('.btnFullscreen', popup).on('click', function () {

            var id = $('#selectSession', popup).val();

            ApiClient.sendPlayStateCommand(id, 'Fullscreen');
        });
    }

    function getPlaybackHtml(session) {

        var html = '';

        html += '<p class="nowPlayingTitle" style="text-align:center;margin:1.5em 0 0;"></p>';

        html += '<p class="nowPlayingImage" style="text-align:center;margin-top:.5em;"></p>';

        html += '<div style="text-align:center;margin: 1em 0;">';

        html += '<div style="text-align:right;vertical-align:middle;padding-right:20px;font-weight: bold;">';
        html += '<span class="nowPlayingTime"></span>';
        html += '<span> / </span>';
        html += '<span class="duration"></span>';
        html += '</div>';

        html += '<div class="remotePositionSliderContainer"><input type="range" name="positionSlider" id="positionSlider" min="0" max="100" value="50" step=".1" style="display:none;" /></div>';
        html += '</div>';

        html += '<div style="text-align:center; margin: 0 0 2em;">';
        html += '<button class="btnPreviousTrack" type="button" data-icon="previous-track" data-inline="true" data-iconpos="notext">Previous track</button>';
        html += '<span class="btnPauseParent"><button class="btnPause" type="button" data-icon="pause" data-inline="true" data-iconpos="notext">Pause</button></span>';
        html += '<span class="btnPlayParent"><button class="btnPlay" type="button" data-icon="play" data-inline="true" data-iconpos="notext">Play</button></span>';
        html += '<button class="btnStop" type="button" data-icon="stop" data-inline="true" data-iconpos="notext">Stop</button>';
        html += '<button class="btnNextTrack" type="button" data-icon="next-track" data-inline="true" data-iconpos="notext">Next track</button>';
        html += '<button class="btnVolumeDown" type="button" data-icon="volume-down" data-inline="true" data-iconpos="notext">Decrease volume</button>';
        html += '<button class="btnVolumeUp" type="button" data-icon="volume-up" data-inline="true" data-iconpos="notext">Increase volume</button>';
        html += '<button class="btnToggleMute" type="button" data-icon="volume-off" data-inline="true" data-iconpos="notext">Toggle mute</button>';

        if (session && session.SupportsFullscreenToggle) {
            html += '<button class="btnFullscreen" type="button" data-icon="action" data-inline="true" data-iconpos="notext">Toggle fullscreen</button>';
        }

        html += '</div>';


        return html;
    }

    function updateSessionInfo(popup, sessions) {

        var id = $('#selectSession', popup).val();

        // don't display the current session
        var session = sessions.filter(function (s) {
            return s.Id == id;
        })[0];

        if (!session) {

            $('.nothingPlaying', popup).hide();
            $('.nowPlaying', popup).hide();
            $('.commandsCollapsible', popup).hide();

        }
        else if (session.NowPlayingItem) {

            $('.commandsCollapsible', popup).show();
            $('.nothingPlaying', popup).hide();

            var elem = $('.nowPlaying', popup).show();

            updateNowPlaying(elem, session);

        } else {

            $('.commandsCollapsible', popup).show();
            $('.nothingPlaying', popup).show();
            $('.nowPlaying', popup).hide();
        }
    }

    function updateNowPlaying(elem, session) {

        var item = session.NowPlayingItem;

        $('.nowPlayingTitle', elem).html(item.Name);

        var imageContainer = $('.nowPlayingImage', elem);

        if (item.PrimaryImageTag) {
            imageContainer.show();

            var img = $('img', imageContainer)[0];

            var imgUrl = ApiClient.getImageUrl(item.Id, {
                maxheight: 300,
                type: 'Primary',
                tag: item.PrimaryImageTag
            });

            if (!img || img.src.toLowerCase().indexOf(imgUrl.toLowerCase()) == -1) {
                imageContainer.html('<img style="max-height:150px;" src="' + imgUrl + '" />');
            }

        } else {
            imageContainer.hide();
        }

        if (session.CanSeek) {
            $('.remotePositionSliderContainer', elem).show();
        } else {
            $('.remotePositionSliderContainer', elem).hide();
        }

        var time = session.NowPlayingPositionTicks || 0;
        var duration = item.RunTimeTicks || 0;

        var percent = duration ? 100 * time / duration : 0;

        var slider = $('#positionSlider', elem);

        if (!slider[0].isSliding) {
            slider.val(percent).slider('refresh');
        }

        slider.attr('data-duration', duration);

        $('.nowPlayingTime', elem).html(Dashboard.getDisplayTime(time));
        $('.duration', elem).html(Dashboard.getDisplayTime(duration));

        if (session.IsPaused) {
            $('.btnPauseParent', elem).hide();
            $('.btnPlayParent', elem).show();
        } else {
            $('.btnPauseParent', elem).show();
            $('.btnPlayParent', elem).hide();
        }
    }

    function renderSessionsInControlMenu(popup, sessions, options) {

        options = options || {};

        var deviceId = ApiClient.deviceId();

        // don't display the current session
        sessions = sessions.filter(function (s) {
            return s.DeviceId != deviceId && s.SupportsRemoteControl;
        });

        var elem = $('#selectSession', popup);

        var currentValue = options.sessionId || elem.val();

        if (currentValue) {

            // Make sure the session is still active
            var currentSession = sessions.filter(function (s) {
                return s.Id == currentValue;
            })[0];

            if (!currentSession) {
                currentValue = null;
            }
        }

        if (!currentValue && sessions.length) {
            currentValue = sessions[0].Id;
        }

        var html = '';

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

            var session = sessions[i];

            var text = session.DeviceName;

            if (session.UserName) {
                text += ' - ' + session.UserName;
            }

            html += '<option value="' + session.Id + '">' + text + '</option>';
        }

        elem.html(html).val(currentValue).selectmenu('refresh');

    }

    function remoteControl() {

        var self = this;

        var sessionQuery = {
            SupportsRemoteControl: true,
            ControllableByUserId: Dashboard.getCurrentUserId()
        };

        self.showMenu = function (options) {
            ApiClient.getSessions(sessionQuery).done(function (sessions) {

                showMenu(sessions, options);

            });
        };
    }

    window.RemoteControl = new remoteControl();

    function sendPlayCommand(options, playType) {

        var sessionId = MediaController.getPlayerInfo().id;

        var ids = options.ids || options.items.map(function (i) {
            return i.Id;
        });

        var remoteOptions = {
            ItemIds: ids.join(','),

            PlayCommand: playType
        };

        if (options.startPositionTicks) {
            remoteOptions.startPositionTicks = options.startPositionTicks;
        }

        ApiClient.sendPlayCommand(sessionId, remoteOptions);
    }

    function sendPlayStateCommand(command, options) {

        var sessionId = MediaController.getPlayerInfo().id;

        ApiClient.sendPlayStateCommand(sessionId, command, options);
    }

    function sendCommand(command, options) {

        var sessionId = MediaController.getPlayerInfo().id;

        ApiClient.sendCommand(sessionId, command, options);
    }

    function remoteControlPlayer() {

        var self = this;

        self.name = 'Remote Control';

        self.play = function (options) {

            sendPlayCommand(options, 'PlayNow');
        };

        self.shuffle = function (id) {

            sendPlayCommand({ ids: [id] }, 'PlayShuffle');
        };

        self.instantMix = function (id) {

            sendPlayCommand({ ids: [id] }, 'PlayInstantMix');
        };

        self.queue = function (options) {

            sendPlayCommand(options, 'PlayNext');
        };

        self.queueNext = function (options) {

            sendPlayCommand(options, 'PlayLast');
        };

        self.canQueueMediaType = function (mediaType) {

            return mediaType == 'Audio' || mediaType == 'Video';
        };

        self.stop = function () {
            sendPlayStateCommand('stop');
        };

        self.nextTrack = function () {
            sendPlayStateCommand('nextTrack');
        };

        self.previousTrack = function () {
            sendPlayStateCommand('previousTrack');
        };

        self.seek = function (positionTicks) {
            sendPlayStateCommand('seek',
                {
                    SeekPositionTicks: positionTicks
                });
        };

        self.pause = function () {
            sendPlayStateCommand('Pause');
        };

        self.unpause = function () {
            sendPlayStateCommand('Unpause');
        };

        self.mute = function () {
            sendCommand('Mute');
        };

        self.unMute = function () {
            sendCommand('Unmnute');
        };

        self.toggleMute = function () {
            sendCommand('ToggleMute');
        };

        self.setVolume = function (vol) {
            sendCommand('SetVolume', {

                Volume: vol

            });
        };

        self.displayContent = function (options) {

            sendCommand('DisplayContent', {

                ItemName: options.itemName,
                ItemType: options.itemType,
                ItemId: options.itemId,
                Context: options.context

            });
        };

        self.getPlayerState = function () {

            var deferred = $.Deferred();

            ApiClient.getSessions().done(function (sessions) {

                var currentTargetId = MediaController.getPlayerInfo().id;

                // Update existing data
                //updateSessionInfo(popup, msg.Data);
                var session = sessions.filter(function (s) {
                    return s.Id == currentTargetId;
                })[0];
                
                if (session) {
                    session = getPlayerState(session);
                }

                deferred.resolveWith(null, [session]);
            });

            return deferred.promise();
        };

        function subscribeToPlayerUpdates() {

            if (ApiClient.isWebSocketOpen()) {

                ApiClient.sendWebSocketMessage("SessionsStart", "100,700");
            }
        }

        function unsubscribeFromPlayerUpdates() {

            if (ApiClient.isWebSocketOpen()) {

                ApiClient.sendWebSocketMessage("SessionsStop");
            }
        }

        var playerListenerCount = 0;
        self.beginPlayerUpdates = function () {

            if (playerListenerCount <= 0) {

                playerListenerCount = 0;

                subscribeToPlayerUpdates();
            }

            playerListenerCount++;
        };

        self.endPlayerUpdates = function () {

            playerListenerCount--;

            if (playerListenerCount <= 0) {

                unsubscribeFromPlayerUpdates();
                playerListenerCount = 0;
            }
        };

        self.getTargets = function () {

            var deferred = $.Deferred();

            var sessionQuery = {
                SupportsRemoteControl: true,
                ControllableByUserId: Dashboard.getCurrentUserId()
            };

            ApiClient.getSessions(sessionQuery).done(function (sessions) {

                var targets = sessions.filter(function (s) {

                    return s.DeviceId != ApiClient.deviceId();

                }).map(function (s) {
                    return {
                        name: s.DeviceName,
                        id: s.Id,
                        playerName: self.name,
                        appName: s.Client,
                        playableMediaTypes: s.PlayableMediaTypes,
                        isLocalPlayer: false,
                        supportedCommands: s.SupportedCommands
                    };
                });

                deferred.resolveWith(null, [targets]);

            }).fail(function () {

                deferred.reject();
            });

            return deferred.promise();
        };
    }

    var player = new remoteControlPlayer();

    MediaController.registerPlayer(player);

    function getPlayerState(session) {

        var state = {
            volumeLevel: session.VolumeLevel,
            isMuted: session.IsMuted,
            isPaused: session.IsPaused,
            canSeek: session.CanSeek
        };

        var item = session.NowPlayingItem;

        if (item) {

            state.itemId = item.Id;
            state.mediaType = item.MediaType;
            state.itemType = item.Type;
            state.indexNumber = item.IndexNumber;
            state.indexNumberEnd = item.IndexNumberEnd;
            state.parentIndexNumber = item.ParentIndexNumber;
            state.productionYear = item.ProductionYear;
            state.premiereDate = item.PremiereDate;
            state.seriesName = item.SeriesName;
            state.album = item.Album;
            state.itemName = item.Name;
            state.artists = item.Artists;

            state.primaryImageItemId = item.PrimaryImageItemId;
            state.primaryImageTag = item.PrimaryImageTag;

            state.backdropItemId = item.BackdropItemId;
            state.backdropImageTag = item.BackdropImageTag;

            state.thumbItemId = item.ThumbItemId;
            state.thumbImageTag = item.ThumbImageTag;

            state.mediaSource = item.MediaSourceId;
            state.positionTicks = session.NowPlayingPositionTicks || 0;
            state.runtimeTicks = item.RunTimeTicks;
        }

        return state;
    }

    function firePlaybackEvent(name, session) {

        $(player).trigger(name, [getPlayerState(session)]);
    }

    function onWebSocketMessageReceived(e, msg) {

        if (msg.MessageType === "Sessions") {

            var currentTargetId = MediaController.getPlayerInfo().id;

            // Update existing data
            //updateSessionInfo(popup, msg.Data);
            var session = msg.Data.filter(function (s) {
                return s.Id == currentTargetId;
            })[0];

            if (session) {
                firePlaybackEvent('playstatechange', session);
            }
        }
        else if (msg.MessageType === "SessionEnded") {

            console.log("Server reports another session ended");

            if (MediaController.getPlayerInfo().id == msg.Data.Id) {
                MediaController.setDefaultPlayerActive();
            }
        }
        else if (msg.MessageType === "PlaybackStart") {
            firePlaybackEvent('playbackstart', msg.Data);
        }
        else if (msg.MessageType === "PlaybackStopped") {
            firePlaybackEvent('playbackstop', msg.Data);
        }
    }

    $(ApiClient).on("websocketmessage", onWebSocketMessageReceived);

})(window, document, jQuery);