Rello / audioplayer

js/sidebar.js

/**
 * Audio Player
 *
 * This file is licensed under the Affero General Public License version 3 or
 * later. See the LICENSE.md file.
 *
 * @author Marcel Scherello <audioplayer@scherello.de>
 * @copyright 2016-2019 Marcel Scherello
 */

'use strict';

Use the function form of "use strict".

if (!OCA.Audioplayer) {

OCA does not seem to be defined.

    /**
     * @namespace
     */
    OCA.Audioplayer = {};

OCA does not seem to be defined.

}
if (!OCA.Audioplayer.Sidebar) {

OCA does not seem to be defined.

    /**
     * @namespace
     */
    OCA.Audioplayer.Sidebar = {};

OCA does not seem to be defined.

}

/**
 * @namespace OCA.Audioplayer.Sidebar
 */
OCA.Audioplayer.Sidebar = {

OCA does not seem to be defined.

    sidebar_tabs: {},

    showSidebar: function (evt) {

        var trackid = $(evt.target).closest('li').attr('data-trackid');

$ does not seem to be defined.

        var $appsidebar = $('#app-sidebar');

$ does not seem to be defined.

        if ($appsidebar.data('trackid') === trackid) {
            OCA.Audioplayer.Sidebar.hideSidebar();

OCA does not seem to be defined.

        } else {
            var getcoverUrl = OC.generateUrl('apps/audioplayer/getcover/');
            var trackData = $('li[data-trackid=\'' + trackid + '\']');

$ does not seem to be defined.

            var cover = trackData.attr('data-cover');
            var sidebarThumbnail = $('#sidebarThumbnail');

$ does not seem to be defined.

            $('.thumbnailContainer').addClass('portrait large');

$ does not seem to be defined.

            if (cover !== '') {
                sidebarThumbnail.attr({
                    'style': 'background-image:url(' + getcoverUrl + cover + ')'
                });
            } else {
                sidebarThumbnail.attr({
                    'style': 'display: none;'
                });
            }

            $('#sidebarTitle').html(decodeURIComponent(trackData.attr('data-path')));

$ does not seem to be defined.

            $('#sidebarMime').html(trackData.attr('data-mimetype'));

$ does not seem to be defined.

            var starIcon = $('#sidebarFavorite').attr({'data-trackid': trackid});

$ does not seem to be defined.

            starIcon.off();
            starIcon.on('click',
                OCA.Audioplayer.audiosInstance.favoriteUpdate.bind(OCA.Audioplayer.audiosInstance)

OCA does not seem to be defined.

            );

            if ($appsidebar.data('trackid') === '') {
                $('#sidebarClose').on('click', OCA.Audioplayer.Sidebar.hideSidebar);

OCA does not seem to be defined.

$ does not seem to be defined.

                OCA.Audioplayer.Sidebar.constructTabs();

OCA does not seem to be defined.

                $('#tabHeaderMetadata').addClass('selected');

$ does not seem to be defined.

                OC.Apps.showAppSidebar();
            }

            $appsidebar.data('trackid', trackid);
            document.getElementById('app-sidebar').dataset.trackid = trackid; //start moving to vanilla js
            $('.tabHeader.selected').trigger('click');

$ does not seem to be defined.

        }
    },

    registerSidebarTab: function (tab) {
        var id = tab.id;
        this.sidebar_tabs[id] = tab;
    },

    constructTabs: function () {
        var tab = {};

        $('.tabHeaders').empty();

$ does not seem to be defined.

        $('.tabsContainer').empty();

$ does not seem to be defined.

        OCA.Audioplayer.Sidebar.registerSidebarTab({

OCA does not seem to be defined.

            id: 'tabHeaderAddons',
            class: 'addonsTabView',
            tabindex: '9',
            name: t('audioplayer', 'Add-ons'),
            action: OCA.Audioplayer.Sidebar.addonsTabView,

OCA does not seem to be defined.

        });

        OCA.Audioplayer.Sidebar.registerSidebarTab({

OCA does not seem to be defined.

            id: 'tabHeaderMetadata',
            class: 'metadataTabView',
            tabindex: '1',
            name: t('audioplayer', 'Metadata'),
            action: OCA.Audioplayer.Sidebar.metadataTabView,

OCA does not seem to be defined.

        });

        OCA.Audioplayer.Sidebar.registerSidebarTab({

OCA does not seem to be defined.

            id: 'tabHeaderPlaylists',
            class: 'playlistsTabView',
            tabindex: '2',
            name: t('audioplayer', 'Playlists'),
            action: OCA.Audioplayer.Sidebar.playlistsTabView,

OCA does not seem to be defined.

        });

        var items = _.map(OCA.Audioplayer.Sidebar.sidebar_tabs, function (item) {

OCA does not seem to be defined.

            return item;
        });
        items.sort(OCA.Audioplayer.Sidebar.sortByName);

OCA does not seem to be defined.

        for (tab in items) {
            var li = $('<li/>').addClass('tabHeader')

$ does not seem to be defined.

                .attr({
                    'id': items[tab].id,
                    'tabindex': items[tab].tabindex
                });
            var atag = $('<a/>').text(items[tab].name);

$ does not seem to be defined.

            li.append(atag);
            $('.tabHeaders').append(li);

$ does not seem to be defined.

            var div = $('<div/>').addClass('tab ' + items[tab].class)

$ does not seem to be defined.

                .attr({
                    'id': items[tab].class
                });
            $('.tabsContainer').append(div);

$ does not seem to be defined.

            $('#' + items[tab].id).on('click', items[tab].action);

$ does not seem to be defined.

        }
    },

    hideSidebar: function () {
        $('#app-sidebar').data('trackid', '');

$ does not seem to be defined.

        OC.Apps.hideAppSidebar();
        $('.tabHeaders').empty();

$ does not seem to be defined.

        $('.tabsContainer').empty();

$ does not seem to be defined.

    },

    metadataTabView: function () {
        var trackid = $('#app-sidebar').data('trackid');

$ does not seem to be defined.

        OCA.Audioplayer.Sidebar.resetView();

OCA does not seem to be defined.

        $('#tabHeaderMetadata').addClass('selected');

$ does not seem to be defined.

There were too many errors found in this file; checking aborted after 43%.

        $('#metadataTabView').removeClass('hidden').html('<div style="text-align:center; word-wrap:break-word;" class="get-metadata"><p><img src="' + OC.imagePath('core', 'loading.gif') + '"><br><br></p><p>' + t('audioplayer', 'Reading data') + '</p></div>');

        $.ajax({
            type: 'GET',
            url: OC.generateUrl('apps/audioplayer/getaudioinfo'),
            data: {trackid: trackid},
            success: function (jsondata) {
                var table;
                if (jsondata.status === 'success') {

                    table = $('<div>').css('display', 'table').addClass('table');
                    var tablerow;
                    var m;
                    var tablekey;
                    var tablevalue;

                    var audioinfo = jsondata.data;
                    for (m in audioinfo) {
                        tablerow = $('<div>').css('display', 'table-row');
                        tablekey = $('<div>').addClass('key').text(t('audioplayer', m));
                        tablevalue = $('<div>').addClass('value')
                            .text(audioinfo[m]);
                        tablerow.append(tablekey).append(tablevalue);

                        if (m === 'fav' && audioinfo[m] === 't') {
                            $('#sidebarFavorite').removeClass('icon-star')
                                .addClass('icon-starred')
                                .prop('title', t('files', 'Favorited'));
                            audioinfo[m] = '';
                        } else if (m === 'fav') {
                            $('#sidebarFavorite').removeClass('icon-starred')
                                .addClass('icon-star')
                                .prop('title', t('files', 'Favorite'));
                            audioinfo[m] = '';
                        }

                        if (audioinfo[m] !== '' && audioinfo[m] !== null) {
                            table.append(tablerow);
                        }
                    }
                } else {
                    table = '<div style="margin-left: 2em;" class="get-metadata"><p>' + t('audioplayer', 'No data') + '</p></div>';
                }

                $('#metadataTabView').html(table);
            }
        });
    },

    playlistsTabView: function () {
        var trackid = $('#app-sidebar').data('trackid');

        OCA.Audioplayer.Sidebar.resetView();

OCA does not seem to be defined.

        $('#tabHeaderPlaylists').addClass('selected');
        $('#playlistsTabView').removeClass('hidden').html('<div style="text-align:center; word-wrap:break-word;" class="get-metadata"><p><img src="' + OC.imagePath('core', 'loading.gif') + '"><br><br></p><p>' + t('audioplayer', 'Reading data') + '</p></div>');

        $.ajax({
            type: 'POST',
            url: OC.generateUrl('apps/audioplayer/getplaylists'),
            data: {trackid: trackid},
            success: function (jsondata) {
                var table;
                if (jsondata.status === 'success') {

                    table = $('<div>').css('display', 'table').addClass('table');
                    var tablerow;
                    var m;
                    var tablekey;
                    var tablevalue;

                    var audioinfo = jsondata.data;
                    for (m in audioinfo) {
                        var spanDelete = $('<a/>').attr({
                            'class': 'icon icon-delete toolTip',
                            'data-listid': audioinfo[m].playlist_id,
                            'data-trackid': trackid,
                            'title': t('audioplayer', 'Remove')
                        }).on('click', OCA.Audioplayer.audiosInstance.removeSongFromPlaylist.bind(OCA.Audioplayer.audiosInstance));

OCA does not seem to be defined.

                        tablerow = $('<div>').css('display', 'table-row').attr({'data-id': audioinfo[m].playlist_id});
                        tablekey = $('<div>').addClass('key').append(spanDelete);

                        tablevalue = $('<div>').addClass('value')
                            .text(audioinfo[m].name);
                        tablerow.append(tablekey).append(tablevalue);
                        table.append(tablerow);
                    }
                } else {
                    table = '<div style="margin-left: 2em;" class="get-metadata"><p>' + t('audioplayer', 'No playlist entry') + '</p></div>';
                }

                $('#playlistsTabView').html(table);
            }
        });

    },

    addonsTabView: function () {
        OCA.Audioplayer.Sidebar.resetView();

OCA does not seem to be defined.

        $('#tabHeaderAddons').addClass('selected');
        var html = '<div style="margin-left: 2em; background-position: initial;" class="icon-info">';
        html += '<p style="margin-left: 2em;">' + t('audioplayer', 'Available Audio Player Add-Ons:') + '</p>';
        html += '<p style="margin-left: 2em;"><br></p>';
        html += '<a href="https://github.com/rello/audioplayer_editor"  target="_blank" >';
        html += '<p style="margin-left: 2em;">- ' + t('audioplayer', 'ID3 editor') + '</p>';
        html += '</a>';
        html += '<a href="https://github.com/rello/audioplayer_sonos"  target="_blank" >';
        html += '<p style="margin-left: 2em;">- ' + t('audioplayer', 'SONOS playback') + '</p>';
        html += '</a></div>';
        $('#addonsTabView').removeClass('hidden').html(html);
    },

    resetView: function () {
        $('.tabHeader.selected').removeClass('selected');
        $('.tab').addClass('hidden');
    },

    removeSongFromPlaylist: function (evt) {

        var trackid = $(evt.target).attr('data-trackid');
        var playlist = $(evt.target).attr('data-listid');

        $.ajax({
            type: 'POST',
            url: OC.generateUrl('apps/audioplayer/removetrackfromplaylist'),
            data: {
                'playlistid': playlist,
                'songid': trackid
            },
            success: function (jsondata) {
                if (jsondata === true) {
                    var currentCount = $('#myCategory li[data-id="' + playlist + '"]').find('.counter');
                    currentCount.text(currentCount.text() - 1);
                    $('#playlistsTabView div[data-id="' + playlist + '"]').remove();
                }
            }
        });
    },

    sortByName: function (a, b) {
        var aName = a.tabindex;
        var bName = b.tabindex;
        return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
    },

    registerSONOSTab: function () {
        var li = $('<li/>').addClass('tabHeader')
            .attr({
                'id': 'tabHeaderSONOS',
                'data-tabid': '4',
                'data-tabindex': '4'
            });
        var atag = $('<a/>').text(t('audioplayer', 'SONOS'));
        li.append(atag);
        $('.tabHeaders').append(li);

        var div = $('<div/>').addClass('tab SONOSTabView')
            .attr({
                'id': 'SONOSTabView'
            });
        $('.tabsContainer').append(div);

        $('#tabHeaderSONOS').on('click', OCA.Audioplayer.Sidebar.SONOSTabView);

OCA does not seem to be defined.

    },
    SONOSTabView: function () {
        var trackid = $('#app-sidebar').data('trackid');
        OCA.Audioplayer.audiosInstance.resetView();

OCA does not seem to be defined.

        $('#tabHeaderSONOS').addClass('selected');

        var html = '<div style="margin-left: 2em; background-position: initial;" class="icon-info">';
        html += '<p style="margin-left: 2em;">' + t('audioplayer', 'Details for error analysis') + '</p>';
        html += '<br>';
        html += '</div>';
        $('#SONOSTabView').removeClass('hidden').html(html);

        $.ajax({
            type: 'POST',
            url: OC.generateUrl('apps/audioplayer/sonosdebug'),
            data: {'trackid': trackid},
            success: function (jsondata) {
                html = $('#SONOSTabView').html();
                html += '<p style="margin-left: 2em;">' + t('audioplayer', 'SMB link from user settings:') + '</p>';
                html += '<p style="margin-left: 2em;">' + jsondata.smb + '</p>';
                html += '<br>';
                html += '<p style="margin-left: 2em;">' + t('audioplayer', 'Combined link for your SONOS controller:') + '</p>';
                html += '<p style="margin-left: 2em;">' + jsondata.sonos + '</p>';
                $('#SONOSTabView').html(html);
            }
        });
    },

};