← Back to branch summary

~azzar1/unity/add-show-desktop-key

« back to all changes in this revision

Viewing changes to ivle/webapp/filesystem/browser/media/browser.js

  • Committer: David Coles
  • Date: 2010-07-28 10:52:48 UTC
  • mfrom: (1791.2.10 mediahandlers)
  • Revision ID: coles.david@gmail.com-20100728105248-zvbn9g72v1nsskvd
A series of HTML5 based media handlers using the <audio> and <video> tags.  
This replaces the previous page that just showed a download link (which is 
already available on the menu).

Also solves issue where media files were downloaded by the client twice (once 
in an AJAX request intended only for text).

Known issues:
    * Bug #588285: External BHO will not be able to play media due to not
      having IVLE cookie.
    * Bug #610745: Does not correctly preview revisions
    * Bug #610780: Ogg media does not work in Chromium

Show diffs side-by-side

added added

removed removed

Lines of Context:
ivle/webapp/filesystem/browser/media/browser.js
31
31
 * "text" : When navigating to a text file, the text editor is opened.
32
32
 * "image" : When navigating to an image, the image is displayed (rather than
33
33
 *              going to the text editor).
 
34
 * "video" : When navigation to a video file, a "play" button is presented.
34
35
 * "audio" : When navigating to an audio file, a "play" button is presented.
35
36
 * "binary" : When navigating to a binary file, offer it as a download through
36
37
 *              "serve".
43
44
    "application/x-javascript" : "text",
44
45
    "application/javascript" : "text",
45
46
    "application/json" : "text",
46
 
    "application/xml" : "text"
 
47
    "application/xml" : "text",
 
48
    "application/ogg" : "audio",
 
49
    "image/svg+xml": "object"
47
50
};
48
51
 
49
52
/* Mapping MIME types to icons, just the file's basename */
193
196
}
194
197
 
195
198
/** Determines the "handler type" from a MIME type.
196
 
 * The handler type is a string, either "text", "image", "audio" or "binary".
 
199
 * The handler type is a string, either "text", "image", "video", "audio", 
 
200
 * "object" or "binary".
197
201
 */
198
202
function get_handler_type(content_type)
199
203
{
205
209
    {   /* Based on the first part of the MIME type */
206
210
        var handler_type = content_type.split('/')[0];
207
211
        if (handler_type != "text" && handler_type != "image" &&
208
 
            handler_type != "audio")
 
212
            handler_type != "video" && handler_type != "audio")
209
213
            handler_type = "binary";
210
214
        return handler_type;
211
215
    }
329
333
    }
330
334
    else
331
335
    {
332
 
        /* Need to make a 2nd ajax call, this time get the actual file
333
 
         * contents */
334
 
        callback = function(response)
335
 
            {
336
 
                /* Read the response and set up the page accordingly */
337
 
                handle_contents_response(path, response);
338
 
            }
339
 
        /* Call the server and request the listing. */
340
 
        if (url_args)
341
 
            args = shallow_clone_object(url_args);
342
 
        else
343
 
            args = {};
344
 
        /* This time, get the contents of the file, not its metadata */
345
 
        args['return'] = "contents";
346
 
        ajax_call(callback, service_app, path, args, "GET");
 
336
        /* Read the response and set up the page accordingly */
 
337
        var content_type = current_file.type;
 
338
        handle_contents_response(path, content_type, url_args);
 
339
 
347
340
    }
348
341
    update_actions(isdir);
349
342
}
350
343
 
351
 
function handle_contents_response(path, response)
 
344
function handle_contents_response(path, content_type)
352
345
{
353
346
    /* Treat this as an ordinary file. Get the file type. */
354
 
    var content_type = response.getResponseHeader("Content-Type");
 
347
    //var content_type = response.getResponseHeader("Content-Type");
355
348
    var handler_type = get_handler_type(content_type);
356
 
    would_be_handler_type = handler_type;
357
349
    /* handler_type should now be set to either
358
 
     * "text", "image", "audio" or "binary". */
 
350
     * "text", "image", "video", "audio" or "binary". */
359
351
    switch (handler_type)
360
352
    {
361
353
    case "text":
362
 
        handle_text(path, response.responseText,
363
 
            would_be_handler_type);
 
354
        handle_text(path, content_type);
364
355
        break;
365
356
    case "image":
366
 
        /* TODO: Custom image handler */
367
 
        handle_binary(path, response.responseText);
 
357
        handle_image(path);
 
358
        break;
 
359
    case "video":
 
360
        handle_video(path, content_type);
368
361
        break;
369
362
    case "audio":
370
 
        /* TODO: Custom audio handler */
371
 
        handle_binary(path, response.responseText);
 
363
        handle_audio(path, content_type);
 
364
        break;
 
365
    case "object":
 
366
        handle_object(path, content_type);
372
367
        break;
373
368
    case "binary":
374
369
        handle_binary(path);
540
535
 */
541
536
function handle_binary(path)
542
537
{
 
538
    // Disable save button
 
539
    using_codepress = false;
 
540
    disable_save_if_safe();
 
541
 
 
542
    // Show download link
543
543
    var files = document.getElementById("filesbody");
544
544
    var div = document.createElement("div");
545
545
    files.appendChild(div);
554
554
    div.appendChild(par2);
555
555
}
556
556
 
 
557
/** Displays an image file.
 
558
 */
 
559
function handle_image(path)
 
560
{
 
561
    /* Disable save button */
 
562
    using_codepress = false;
 
563
    disable_save_if_safe();
 
564
 
 
565
    /* URL */
 
566
    var url = app_url(service_app, path) + "?return=contents";
 
567
 
 
568
    /* Image Preview */
 
569
    var img = $("<img />");
 
570
    img.attr("alt", path);
 
571
    img.attr("src", url);
 
572
 
 
573
    /* Show Preview */
 
574
    var div = $('<div class="padding" />');
 
575
    div.append('<h1>Image Preview</h1>');
 
576
    div.append(img);
 
577
    $("#filesbody").append(div);
 
578
}
 
579
 
 
580
/** Displays a video.
 
581
 */
 
582
function handle_video(path, type)
 
583
{
 
584
    /* Disable save button and hide the save panel */
 
585
    using_codepress = false;
 
586
    disable_save_if_safe();
 
587
 
 
588
    /* URL */
 
589
    var url = app_url(service_app, path) + "?return=contents";
 
590
    var download_url = app_url(download_app, path);
 
591
 
 
592
    /* Fallback Download Link */
 
593
    var link = $('<p>Could not display video in browser.<p><p><a /></p>');
 
594
    var a = link.find('a');
 
595
    a.attr("href", download_url);
 
596
    a.text("Download " + path);
 
597
 
 
598
    /* Fallback Object Tag */
 
599
    var obj = $('<object />');
 
600
    obj.attr("type", type);
 
601
    obj.attr("data", url);
 
602
    obj.append(link);
 
603
 
 
604
    /* HTML 5 Video Tag */
 
605
    var video = $('<video controls="true" autoplay="true" />');
 
606
    video.attr("src", url);
 
607
    var support = video[0].canPlayType && video[0].canPlayType(type);
 
608
    if (support != "probably" && support != "maybe") {
 
609
        // Use Fallback
 
610
        video = obj;
 
611
    }
 
612
 
 
613
    /* Show Preview */
 
614
    var div = $('<div class="padding" />');
 
615
    div.append('<h1>Video Preview</h1>');
 
616
    div.append(video);
 
617
    $("#filesbody").append(div);
 
618
}
 
619
 
 
620
/** Display audio content
 
621
 */
 
622
function handle_audio(path, type)
 
623
{
 
624
    /* Disable save button and hide the save panel */
 
625
    using_codepress = false;
 
626
    disable_save_if_safe();
 
627
 
 
628
    /* URL */
 
629
    var url = app_url(service_app, path) + "?return=contents";
 
630
    var download_url = app_url(download_app, path);
 
631
 
 
632
    /* Fallback Download Link */
 
633
    var link = $('<p>Could not display audio in browser.<p><p><a /></p>');
 
634
    var a = link.find('a');
 
635
    a.attr("href", download_url);
 
636
    a.text("Download " + path);
 
637
 
 
638
    /* Fallback Object Tag */
 
639
    var obj = $('<object />');
 
640
    obj.attr("type", type);
 
641
    obj.attr("data", url);
 
642
    obj.append(link);
 
643
 
 
644
    /* HTML 5 Audio Tag */
 
645
    var audio = $('<audio controls="true" autoplay="true" />');
 
646
    audio.attr("src", url);
 
647
    var support = audio[0].canPlayType && audio[0].canPlayType(type);
 
648
    if (support != "probably" && support != "maybe") {
 
649
        // Use Fallback
 
650
        audio = obj;
 
651
    }
 
652
 
 
653
    /* Show Preview */
 
654
    var div = $('<div class="padding" />');
 
655
    div.append('<h1>Audio Preview</h1>');
 
656
    div.append(audio);
 
657
    $("#filesbody").append(div);
 
658
}
 
659
 
 
660
/** Display generic object content
 
661
 */
 
662
function handle_object(path, content_type)
 
663
{
 
664
    /* Disable save button and hide the save panel */
 
665
    using_codepress = false;
 
666
    disable_save_if_safe();
 
667
 
 
668
    /* URL */
 
669
    var url = app_url(service_app, path) + "?return=contents";
 
670
    var download_url = app_url(download_app, path);
 
671
 
 
672
    /* Fallback Download Link */
 
673
    var link = $('<p><a /></p>');
 
674
    var a = link.find('a');
 
675
    a.attr("href", download_url);
 
676
    a.text("Download " + path);
 
677
 
 
678
    /* Object Tag */
 
679
    var obj = $('<object width="100%" height="500px" />');
 
680
    obj.attr("type", content_type);
 
681
    obj.attr("data", url);
 
682
    obj.append('Could not load object');
 
683
 
 
684
    /* Show Preview */
 
685
    var div = $('<div class="padding" />');
 
686
    div.append('<h1>Preview</h1>');
 
687
    div.append(obj);
 
688
    div.append(link);
 
689
    $("#filesbody").append(div);
 
690
}
 
691
 
557
692
/* Enable or disable actions1 moreactions actions. Takes either a single
558
693
 * name, or an array of them.*/
559
694
function set_action_state(names, which, allow_on_revision)
841
976
        var moreactions = document.getElementById("moreactions_area");
842
977
        moreactions.setAttribute("style", "display: inline;");
843
978
    }
844
 
    else
845
 
    {
846
 
        var actions2_file = document.getElementById("actions2_file");
847
 
        actions2_file.setAttribute("style", "display: inline;");
848
 
    }
849
979
 
850
980
    return;
851
981
}