pandora/static/js/mediaView.js

'use strict';

pandora.ui.mediaView = function(options) {

    var canRemove = pandora.hasCapability('canRemoveItems') || options.editable,
        self = {},
        keys = ['title', 'director', 'year', 'id'],
        listKeys = keys.filter(function(key) {
            var itemKey = Ox.getObjectById(pandora.site.itemKeys, key)
            return itemKey ? Ox.isArray(itemKey.type) : false;
        }),
        that = Ox.Element({}, self)
            .defaults({
                id: ''
            })
            .options({});

    self.filesQuery = {
        conditions: [{
            key: 'id',
            value: options.id,
            operator: '=='
        }]
    };
    self.numberOfItems = 0;
    self.selected = [];
    self.wasChecked = false;

    self.$toolbar = Ox.Bar({
        size: 24
    });

    self.$menu = Ox.MenuButton({
            items: [
                {
                    disabled: true,
                    id: 'ignore',
                    title: Ox._('Ignore Selected Files')
                },
                {},
                {
                    disabled: !canRemove,
                    id: 'delete',
                    title: Ox._('Delete {0}...', [Ox._(pandora.site.itemName.singular)])
                }
            ],
            title: 'set',
            type: 'image'
        })
        .css({
            float: 'left',
            margin: '4px'
        })
        .bindEvent({
            click: function(data) {
                if (data.id == 'ignore') {
                    ignoreFiles();
                } else if (data.id == 'delete') {
                    deleteItem();
                }
            }
        })
        .appendTo(self.$toolbar);

    self.$saveButton = Ox.Button({
            disabled: true,
            title: Ox._('Save Changes'),
            width: 128
        })
        .css({
            float: 'right',
            margin: '4px'
        })
        .bindEvent({
            click: saveChanges
        })
        .appendTo(self.$toolbar);

    self.$filesList = Ox.TableList({
            columns: [
                {
                    clickable: function(data) {
                        return ['uploading', 'queued', 'encoding'].indexOf(data.state) == -1;
                    },
                    format: function(value, data) {
                        var opacity = value
                            || ['encoding', 'failed', 'queued', 'uploading', 'wanted'].indexOf(data.state) > -1
                            ? 1 : 0;
                        return $('<img>')
                            .attr({
                                src: Ox.UI.getImageURL('symbol' + ({
                                    'available': 'Check',
                                    'encoding': 'Sync',
                                    'failed': 'Warning',
                                    'queued': 'Data',
                                    'uploading': 'Upload',
                                    'wanted': 'Up',
                                }[data.state] || 'Check'))
                            })
                            .css({
                                width: '10px',
                                height: '10px',
                                padding: '3px',
                                opacity: opacity
                            });
                    },
                    id: 'selected',
                    operator: '-',
                    title: Ox._('Status'),
                    titleImage: 'check',
                    tooltip: function (data) {
                        return ['uploading', 'queued', 'encoding', 'failed'].indexOf(data.state) > -1
                            ? Ox._({
                                'uploading': 'Video is currently uploaded to server',
                                'queued': 'Waiting for server to process video',
                                'encoding': 'Processing video on server',
                                'failed': 'Encoding failed'
                            }[data.state])
                            : (
                                data.instances.filter(function(i) {return i.ignore; }).length > 0 ||
                                (data.instances.length == 0 && !data.selected)
                            )
                            ? Ox._('Use this file')
                            : Ox._('Dont use this file');
                    },
                    visible: true,
                    width: 16
                },
                {
                    align: 'left',
                    id: 'users',
                    operator: '+',
                    title: Ox._('Users'),
                    visible: true,
                    width: 60
                },
                {
                    align: 'left',
                    id: 'path',
                    operator: '+',
                    title: Ox._('Path'),
                    visible: true,
                    width: 360
                },
                {
                    editable: true,
                    id: 'version',
                    operator: '+',
                    title: Ox._('Version'),
                    visible: true,
                    width: 120
                },
                {
                    editable: true,
                    id: 'part',
                    operator: '+',
                    title: Ox._('Part'),
                    visible: true,
                    width: 60
                },
                {
                    editable: true,
                    id: 'partTitle',
                    operator: '+',
                    title: Ox._('Part Title'),
                    visible: true,
                    width: 120
                },
                {
                    editable: true,
                    id: 'language',
                    operator: '+',
                    title: Ox._('Language'),
                    visible: true,
                    width: 60
                },
                {
                    editable: true,
                    id: 'extension',
                    operator: '+',
                    title: Ox._('Extension'),
                    visible: true,
                    width: 60
                },
                {
                    align: 'left',
                    id: 'type',
                    operator: '+',
                    title: Ox._('Type'),
                    visible: true,
                    width: 60
                },
                {
                    align: 'right',
                    format: {type: 'value', args: ['B']},
                    id: 'size',
                    operator: '-',
                    title: Ox._('Size'),
                    visible: true,
                    width: 90
                },
                {
                    align: 'right',
                    format: {type: 'resolution', args: ['px']},
                    id: 'resolution',
                    operator: '-',
                    title: Ox._('Resolution'),
                    visible: true,
                    width: 112
                },
                {
                    align: 'right',
                    format: function(value) {
                        value = value.split(':').map(function(v) {
                            return Math.round(v);
                        });
                        return (value[1] != 1
                            ? Ox.formatNumber(value[0] / (value[1] || 1), 2)
                            : value[0]
                        ) + ' fps';
                    },
                    id: 'framerate',
                    operator: '-',
                    title: Ox._('Framerate'),
                    visible: true,
                    width: 70
                },
                {
                    align: 'right',
                    format: {type: 'duration', args: [0, 'short']},
                    id: 'duration',
                    operator: '-',
                    title: Ox._('Duration'),
                    visible: true,
                    width: 90
                },
                {
                    align: 'left',
                    id: 'id',
                    operator: '+',
                    title: Ox._('ID'),
                    visible: false,
                    width: 128
                },
                {
                    align: 'left',
                    id: 'instances',
                    operator: '+',
                    title: Ox._('Instances'),
                    visible: false,
                    width: 120
                }
            ],
            columnsMovable: true,
            columnsRemovable: true,
            columnsResizable: true,
            columnsVisible: true,
            id: 'files',
            items: function(data, callback) {
                pandora.api.findMedia(Ox.extend(data, {
                    query: self.filesQuery
                }), callback);
            },
            keys: ['state', 'instances', 'wanted', 'error'],
            pageLength: 1000,
            scrollbarVisible: true,
            sort: [{key: 'path', operator: '+'}],
            unique: 'id'
        })
        .bindEvent({
            click: function(data) {
                if (data.key == 'selected') {
                    var value = self.$filesList.value(data.id);
                    if (value.state == 'failed') {
                        var $dialog = Ox.Dialog({
                            buttons: [
                                Ox.Button({
                                    id: 'close',
                                    title: Ox._('Close')
                                })
                                .bindEvent({
                                    click: function() {
                                        $dialog.close();
                                    }
                                })
                            ],
                            closeButton: true,
                            content: $('<code>').append(
                                $('<pre>')
                                    .addClass('OxSelectable')
                                    .css({margin: '16px'})
                                    .text(value.error)
                            ),
                            height: Math.round((window.innerHeight - 48) * 0.9),
                            keys: {enter: 'close', escape: 'close'},
                            maximizeButton: true,
                            removeOnClose: true,
                            title: 'Encoding Failed',
                            width: Math.round(window.innerWidth * 0.9)
                        })
                        .open();
                    } else {
                        var instances = self.$filesList.value(data.id, 'instances'),
                            selected = self.$filesList.value(data.id, 'selected'),
                            ignored = (instances.length == 0 && ! selected) ||
                                instances.filter(function(i) {return i.ignore; }).length > 0;
                        pandora.api.editMedia({
                            files: [{
                                id: data.id,
                                ignore: !ignored
                            }]
                        }, function(result) {
                            Ox.Request.clearCache();
                            self.$filesList.reloadList();
                        });
                    }
                }
            },
            'delete': function(data) {
                var ids = data.ids.filter(function(id) {
                    return self.$filesList.value(id, 'instances').length == 0;
                });
                if (ids.length > 0 && pandora.user.level == 'admin') {
                    pandora.api.removeMedia({
                        ids: ids
                    }, function(result) {
                        Ox.Request.clearCache();
                        self.$filesList.reloadList();
                    });
                }
            },
            init: function(data) {
                self.numberOfItems = data.items;
                updateStatus();
            },
            select: selectFiles,
            open: openVideo,
            submit: function(data) {
                var value = self.$filesList.value(data.id, data.key);
                if (data.value != value && !(data.value === '' && value === null)) {
                    self.$saveButton.options({disabled: false});
                    self.$filesList.value(data.id, data.key, data.value || null);
                }
            }
        });

    self.$instancesList = Ox.TableList({
            columns: [
                {
                    align: 'left',
                    id: 'user',
                    operator: '+',
                    title: Ox._('User'),
                    visible: true,
                    width: 120
                },
                {
                    align: 'left',
                    id: 'volume',
                    operator: '+',
                    title: Ox._('Volume'),
                    visible: true,
                    width: 120
                },
                {
                    align: 'left',
                    id: 'path',
                    operator: '+',
                    title: Ox._('Path'),
                    visible: true,
                    width: 480
                },
            ],
            columnsMovable: true,
            columnsRemovable: true,
            columnsResizable: true,
            columnsVisible: true,
            id: 'files',
            items: [],
            scrollbarVisible: true,
            sort: [{key: 'user', operator: '+'}],
            unique: 'path'
        })
        .bindEvent({
            open: openFiles
        });

    self.$movieLabel = Ox.Label({
            textAlign: 'center',
            title: Ox._('Move selected files to another {0}',
                [Ox._(pandora.site.itemName.singular.toLowerCase())]),
            width: 240
        })
        .css({margin: '8px'});

    keys.forEach(function(key) {
        var itemKey = Ox.getObjectById(pandora.site.itemKeys, key);
        self['$' + key + 'Input'] = Ox.Input({
            label: Ox._(key == 'id' ? 'ID'
                : itemKey ? itemKey.title : Ox.toTitleCase(key)),
            labelWidth: 64,
            width: 240
        })
        .bindEvent({
            change: function(data) {
                var conditions, matches;
                if (key == 'id' && data.value.substr(0, 2) != '0x') {
                    if (pandora.site.site.id == '0xdb') {
                        matches = data.value.match(/\d+/);
                    } else {
                        matches = data.value.match(/[A-Z]+/);
                    }
                    data.value = matches ? matches[0] : '';
                    self.$idInput.value(data.value);
                }
                if (data.value.length) {
                    conditions = {};
                    keys.map(function(key) {
                        var value = self['$' + key + 'Input'].value();
                        if (value.length) {
                            conditions[key] = Ox.contains(listKeys, key) ? value.split(', ') : value;
                        }
                    });
                    pandora.api.findId(conditions, function(result) {
                        var length = result.data.items.length;
                        if (length == 0) {
                            if (key != 'id') {
                                self.$idInput.value('');
                            }
                        } else if (result.data.items.length == 1) {
                            keys.forEach(function(key) {
                                self['$' + key + 'Input'].value(
                                    Ox.contains(listKeys, key)
                                        ? result.data.items[0][key].join(', ')
                                        : result.data.items[0][key]
                                );
                            });
                        } else {
                            self.$idInput.value('');
                        }
                    });
                }
            }
        });
    });

    self.$switch = Ox.Checkbox({
        title: Ox._('Switch to this {0} after moving files',
            [Ox._(pandora.site.itemName.singular.toLowerCase())]),
        value: false,
        width: 240
    });

    self.$movieForm = Ox.Form({
            items: keys.map(function(key) {
                return self['$' + key + 'Input'];
            }).concat([
                self.$switch
            ]),
            width: 240
        })
        .css({margin: '8px'});

    self.$clearButton = Ox.Button({
            title: Ox._('Clear Form'),
            width: 116
        })
        .css({margin: '0 4px 4px 8px'})
        .bindEvent({
            click: function() {
                keys.forEach(function(key) {
                    self['$' + key + 'Input'].value('');
                });
            }
        });

    self.$moveButton = Ox.Button({
            disabled: true,
            title: Ox._('Move Files'),
            width: 116
        })
        .css({margin: '0 4px 4px 4px'})
        .bindEvent({
            click: moveFiles
        });
    

    self.$moviePanel = Ox.Element()
        .append(self.$movieLabel)
        .append(self.$movieForm)
        .append(self.$clearButton)
        .append(self.$moveButton);

    that.setElement(Ox.SplitPanel({
            elements: [
                {
                    element: Ox.SplitPanel({
                        elements: [
                            {
                                element: self.$toolbar,
                                size: 24
                            },
                            {
                                element: self.$filesList
                            },
                            {
                                element: self.$instancesList,
                                size: 80
                            }
                        ],
                        orientation: 'vertical'
                    })
                },
                {
                    collapsible: true,
                    element: self.$moviePanel,
                    size: 256
                }
            ],
            orientation: 'horizontal'
        })
    );

    function deleteItem(data) {
        pandora.api.get({
            id: pandora.user.ui.item,
            keys: ['id', 'title']
        },function(result) {
            pandora.$ui.deleteItemsDialog = pandora.ui.deleteItemsDialog({
                items: [result.data]
            }).open();
        });
    }

    function ignoreFiles() {
        pandora.api.editMedia({
            files: self.selected.map(function(id) {
                return {id: id, ignore: true};
            })
        }, function(result) {
            Ox.Request.clearCache();
            self.$filesList.reloadList();
        });
    }

    function isActive() {
        return pandora.user.ui.item == options.id
            && pandora.user.ui.itemView == 'media';
    }

    function moveFiles(data) {
        var data = {
            ids: self.selected,
        };
        keys.forEach(function(key) {
            data[key == 'id' ? 'item' : key] = Ox.encodeHTMLEntities(self['$' + key + 'Input'].value());
        });
        self.$moveButton.options(
            {disabled: true, title: Ox._('Moving Files...')}
        );
        pandora.api.moveMedia(data, function(result) {
            pandora.wait(result.data.taskId, function(result) {
                if (isActive()) {
                    Ox.Request.clearCache(); // fixme: remove
                    if (self.$switch.value()) {
                        pandora.UI.set({item: result.data.item});
                        pandora.updateItemContext();
                    } else {
                        self.$filesList.reloadList();
                        self.$instancesList.reloadList();
                        self.$moveButton.options(
                            {disabled: false, title: Ox._('Move Files')}
                        );
                    }
                }
            });
        });
    }


    function openFiles(data) {
        data.ids.length == 1 && pandora.api.parsePath({
            path: self.$instancesList.value(data.ids[0], 'path')
        }, function(result) {
            self.$idInput.value('');
            keys.forEach(function(key) {
                if (result.data[key]) {
                    self['$' + key + 'Input'].value(
                        Ox.decodeHTMLEntities(Ox.contains(listKeys, key)
                            ? result.data[key].join(', ')
                            : result.data[key]
                    ));
                }
            });
            updateForm();
            self.$titleInput.triggerEvent('change', {value: result.data['title']});
        });
    }

    function openVideo(data) {
        if (data.ids.length == 1) {
            var stream = data.ids[0];
            pandora.api.get({id: pandora.user.ui.item, keys: ['streams', 'durations']}, function(result) {
                var offset = result.data.streams.indexOf(stream),
                    set = {
                        itemView: pandora.user.ui.videoView
                    },
                    videoPoints = {};
                if (offset > -1) {
                    videoPoints['position'] = videoPoints['in'] = Ox.sum(result.data.durations.slice(0, offset));
                    videoPoints['out'] = videoPoints['in'] + result.data.durations[offset];
                    set['videoPoints.' + pandora.user.ui.item] = videoPoints;
                    pandora.UI.set(set);
                }
            });
        }
    }

    function selectFiles(data) {
        self.selected = data.ids;
        self.$instancesList.options({
            items: Ox.flatten(data.ids.map(function(id) {
                return self.$filesList.value(id, 'instances');
            }))
        });
        updateForm();
    }

    function saveChanges() {
        self.$saveButton.options({disabled: true, title: Ox._('Saving Changes...')});
        pandora.api.findMedia({
            keys: ['id'],
            query: self.filesQuery
        }, function(result) {
            pandora.api.editMedia({
                files: result.data.items.map(function(item) {
                    [
                        'version', 'part', 'partTitle', 'language', 'extension'
                    ].forEach(function(key) {
                        Ox.extend(item, key, self.$filesList.value(item.id, key));
                    })
                    return item;
                })
            }, function(result) {
                self.$saveButton.options({title: Ox._('Save Changes')});
                Ox.Request.clearCache(); // fixme: remove
                self.$filesList.reloadList();
            });
        });
    }

    function updateForm() {
        if (pandora.site.itemRequiresVideo && self.selected.length == self.numberOfItems) {
            self.wasChecked = self.$switch.value();
            self.$switch.options({
                disabled: true,
                value: true
            });
        } else {
            self.$switch.options({
                disabled: false,
                value: self.wasChecked
            });
        }
        self.$moveButton.options({
            disabled: self.selected.length == 0
        });
        self.$menu[
            self.selected.length == 0 ? 'disableItem' : 'enableItem'
        ]('ignore');
    }

    function updateStatus() {
        if (self.numberOfItems) {
            setTimeout(function() {
                if (isActive() && self.numberOfItems) {
                    Ox.Request.clearCache();
                    pandora.api.findMedia({
                        query: self.filesQuery,
                        range: [0, self.numberOfItems],
                        keys: ['id', 'state']
                    }, function(result) {
                        if (isActive()) {
                            var done = false,
                                update = false;
                            result.data.items.forEach(function(item) {
                                if (self.$filesList.value(item.id, 'state') == 'encoding'
                                    && item.state != 'encoding') {
                                    self.$filesList.value(item.id, 'state', item.state);
                                    done = true;
                                }
                                if (!update && item.state == 'encoding') {
                                    update = true;
                                }
                            });
                            if (update) {
                                updateStatus();
                            } else if (done) {
                                Ox.Request.clearCache();
                                pandora.updateItemContext();
                                pandora.$ui.info && pandora.$ui.info.updateInfo();
                                pandora.$ui.mainPanel.replaceElement(1,
                                    pandora.$ui.rightPanel = pandora.ui.rightPanel());
                            }
                        }
                    });
                }
            }, 10000);
        }
    }

    that.reload = function() {
        self.$filesList.reloadList();
    }
    return that;

};