oxspeed/js/pandora-ui.js

// vim: et:ts=4:sw=4:sts=4:ft=javascript

"use strict";

pandora.ui.appPanel = function() {
    var that = Ox.SplitPanel({
            elements: [
                {
                    element: pandora.$ui.mainMenu = pandora.ui.mainMenu(),
                    size: 20
                },
                {
                    element: pandora.$ui.mainPanel = pandora.ui.mainPanel()
                }
            ],
            orientation: 'vertical'
    });

    return that;
}

pandora.ui.mainMenu = function() {
    var that = Ox.MainMenu({
        extras: [],
        id: 'mainMenu',
        menus: [
            {
                'id': 'speedtransMenu',
                'title': 'Speedtrans',
                'items': [
                    { id: 'TestMenu1', title: 'Test Menu Item'},
                    { id: 'TestMenu2', title: 'Test Menu Itemm'}
                ]

            },
            {
                'id': 'fileMenu',
                'title': 'File',
                'items': [
                    { id: 'openFileMenu', title: 'Open File'},
                    { id: 'saveFileMenu', title: 'Save File', keyboard: 'shift control s'}
                ]
            }

        ]
    })
    .bindKeyboard()
    .bindEvent({
        click: function(data) {
//            Ox.print(data);
            var selected = data.id;
            if (data.id == 'saveFileMenu') {
                pandora.$ui.textArea.speedtrans.save();
    //            speedtrans.saveFile();
            } else if (data.id == 'openFileMenu') {
                pandora.$ui.textArea.speedtrans.load("/A/480p.webm");
            }
        },
        key_control_shift_s: function() {
            pandora.$ui.textArea.speedtrans.save();
        }
    });

    return that;
}

pandora.ui.mainPanel = function() {
    var that = Ox.SplitPanel({
        elements: [
            {
                element: pandora.$ui.videoPanel = pandora.ui.videoPanel(),
                size: 400,
                resizable: true,
                resize: [0,600]
            },
            {
                element: pandora.$ui.textPanel = pandora.ui.textPanel()
            }
        ],
        orientation: 'horizontal'
    });
    return that;
}

pandora.ui.videoPanel = function() {
    var that = Ox.SplitPanel({
        elements: [
            {
                element: pandora.$ui.videoPlayer = pandora.ui.videoPlayer(),
                size: 300
            },
            {
                element: pandora.$ui.helpPanel = pandora.ui.helpPanel()
            }
        ],
        orientation: 'vertical'
    });
    return that;
}

pandora.ui.videoPlayer = function() {
    var that = Ox.VideoPlayer({
        video: '/A/480p.webm',
        controlsTop: ['play', 'fullscreen', 'scale', 'position'],
        controlsBottom: ['timeline'],
        height: 300,
        width: 400,
        showControlsOnLoad: true,
        duration: 35,
        timeline: '/speedtrans/img/timeline16p.png',
        title: 'Test Video',
        enableTimeline: true,
        enableKeyboard: true,
        enableMouse: true,
        externalControls: true
//        enableTimeline: true                
    });
    return that;
}

pandora.ui.helpPanel = function() {
    var that = $('<div>').text("Help Panel");
    return that;
}

pandora.ui.textPanel = function() {
    var that = Ox.SplitPanel({
        elements: [
            {
                element: pandora.$ui.textArea = pandora.ui.textArea()
            },
            {
                element: pandora.$ui.textToolBar = pandora.ui.textToolBar(),
                size: 20
            }
        ],
        orientation: 'vertical'
    });
    return that;
}

pandora.ui.textArea = function() {
    var that = Ox.Input({
        type: 'textarea',
        width: 400,
        height: 400,
        changeOnKeypress: true
    });       
    var $video = pandora.$ui.videoPlayer;

    that.speedtrans = {
        spans: [],
        insertTc: function() {
            var eDom = that.find("textarea").get(0); //FIXME
            var scrollTop = eDom.scrollTop;
            var val = that.value();
            var pos = eDom.selectionStart;
            var tcNpt = ms2npt($video.options("position") * 1000);
            var newVal = val.substring(0,pos) + "\n" + tcNpt + "\n" + val.substring(pos, val.length);   
            that.value(newVal);
            that.find("textarea").focus(); //FIXME
            eDom.selectionStart = pos + tcNpt.length + 2;
            eDom.selectionEnd = pos + tcNpt.length + 2;
            eDom.scrollTop = scrollTop + 15;
        },
        isTc: function() {
            var eDom = that.find("textarea").get(0);  
            var val = that.value();
            var pos = eDom.selectionStart;
            var word = that.speedtrans.getWord(pos, val);

            if (isValidTimecode(word)) {
                return npt2ms(word);
            } else {
                return false;
            }            
        },
        getWord: function(pos, val) {
            var c;
            var i = pos;
            var j = pos;
            while (c != " " && c != "\n") {
                if (i==0) {
                    i = -1;
                    break;
                }   
                i--;      
                c = val.substring(i,i+1);    
            }
            var firstLetter = i+1;
            var d;
            while (d != " " && d != "\n") {
                if (j >= val.length) {
                    break;
                }
                j++;    
                d = val.substring(j,j+1);    
            }
            var lastLetter = j;
            var word = val.substring(firstLetter, lastLetter);
            return word;
        },
        toSrt: function(fmt) {
            if (!fmt) var fmt = 'srt';
            var text = cleanNewlines(that.value());
            var lines = [];
            lines = text.split("\n");
            var i=0;
            var j=0;
            var spans = this.spans = [];
            while (i < lines.length) {
                var l = lines[i];
                if (isValidTimecode(l.trim())) {
                    var tcIn = l.trim();
                    var t = "";
                    var thisLine = '';
                    while (!isValidTimecode(thisLine.trim())) {
                        i++;
                        if (i >= lines.length) {
                            break;
                        } 
                        thisLine = lines[i];
                        if (!isValidTimecode(thisLine.trim())) {
                            t += thisLine + "\n";
                        }       
                    }
                    var tcOut = $.trim(thisLine);
                    spans[j] = {
                        tcInMs: npt2ms(tcIn),
                        tcOutMs: npt2ms(tcOut),
                        text: t,
                        index: j
                    };
                    //this.spans.push(spans[j]);
                    j++;
                } else {
                    i++;
                }
            }
            this.spans = spans;
            var duration = $video.options("duration");
            var srt = spansToSrt(duration, spans, fmt);
        //  console.log(srt);
            return srt;
        },

        save: function() {
            var filename = $video.options("video");
            localStorage[filename] = that.value();
        },
        load: function(filename) {
            var val = localStorage[filename] || '';
            that.value(val);
        }
    };
    that.bindEvent({
        key_control_space: function() {
            $video.options("paused", !$video.options("paused"));
            that.find("textarea").focus(); //FIXME
        },
        key_control_x: function() {
            that.speedtrans.insertTc();
        },
        key_control_shift_s: function() {
            that.speedtrans.save();
        }
    });
    that.dblclick(function() {
        var tc = that.speedtrans.isTc();
        if (tc) {
            $video.options("position", tc / 1000);
        }
    });
    return that;
}

pandora.ui.textToolBar = function() {
    var that = Ox.Bar();
    return that;
}