incubator-wookie-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Ross Gardler <rgard...@opendirective.com>
Subject Re: svn commit: r1138459 - in /incubator/wookie/trunk/scratchpad/widgets/vtt: ./ build.xml config.xml icon.png index.html scripts/ scripts/controller.js
Date Wed, 22 Jun 2011 23:43:34 GMT
This is a really cool widget that Scott built at an event we attended
over the last couple of days. I wanted to see it go straight into the
main trunk, but he wanted to leave it in scratchpad until fully
tested.

So, can people please test this widget - it enables you to add
captions to a video that plays in the widget itself, great stuff. A
widget with a real use case and thus more likely to attract
enhancements.

Ross

On 22 June 2011 14:36,  <scottbw@apache.org> wrote:
> Author: scottbw
> Date: Wed Jun 22 13:36:21 2011
> New Revision: 1138459
>
> URL: http://svn.apache.org/viewvc?rev=1138459&view=rev
> Log:
> Committed first version of VTT closed-captioning HTML5 widget
>
> Added:
>    incubator/wookie/trunk/scratchpad/widgets/vtt/
>    incubator/wookie/trunk/scratchpad/widgets/vtt/build.xml
>    incubator/wookie/trunk/scratchpad/widgets/vtt/config.xml
>    incubator/wookie/trunk/scratchpad/widgets/vtt/icon.png   (with props)
>    incubator/wookie/trunk/scratchpad/widgets/vtt/index.html
>    incubator/wookie/trunk/scratchpad/widgets/vtt/scripts/
>    incubator/wookie/trunk/scratchpad/widgets/vtt/scripts/controller.js
>
> Added: incubator/wookie/trunk/scratchpad/widgets/vtt/build.xml
> URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/scratchpad/widgets/vtt/build.xml?rev=1138459&view=auto
> ==============================================================================
> --- incubator/wookie/trunk/scratchpad/widgets/vtt/build.xml (added)
> +++ incubator/wookie/trunk/scratchpad/widgets/vtt/build.xml Wed Jun 22 13:36:21 2011
> @@ -0,0 +1,23 @@
> +<?xml version="1.0"?>
> +<!--
> +  Licensed to the Apache Software Foundation (ASF) under one or more
> +  contributor license agreements.  See the NOTICE file distributed with
> +  this work for additional information regarding copyright ownership.
> +  The ASF licenses this file to You under the Apache License, Version 2.0
> +  (the "License"); you may not use this file except in compliance with
> +  the License.  You may obtain a copy of the License at
> +
> +      http://www.apache.org/licenses/LICENSE-2.0
> +
> +  Unless required by applicable law or agreed to in writing, software
> +  distributed under the License is distributed on an "AS IS" BASIS,
> +  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> +  See the License for the specific language governing permissions and
> +  limitations under the License.
> +-->
> +<project default="build-widget" basedir="." name="widget build file">
> +       <property name="wookie.widgets.dir" location="../"/>
> +       <property name="widget.shortname" value="vtt"/>
> +
> +       <import file="../build.xml"/>
> +</project>
> \ No newline at end of file
>
> Added: incubator/wookie/trunk/scratchpad/widgets/vtt/config.xml
> URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/scratchpad/widgets/vtt/config.xml?rev=1138459&view=auto
> ==============================================================================
> --- incubator/wookie/trunk/scratchpad/widgets/vtt/config.xml (added)
> +++ incubator/wookie/trunk/scratchpad/widgets/vtt/config.xml Wed Jun 22 13:36:21 2011
> @@ -0,0 +1,46 @@
> +<!--
> +  Licensed to the Apache Software Foundation (ASF) under one or more
> +  contributor license agreements.  See the NOTICE file distributed with
> +  this work for additional information regarding copyright ownership.
> +  The ASF licenses this file to You under the Apache License, Version 2.0
> +  (the "License"); you may not use this file except in compliance with
> +  the License.  You may obtain a copy of the License at
> +
> +      http://www.apache.org/licenses/LICENSE-2.0
> +
> +  Unless required by applicable law or agreed to in writing, software
> +  distributed under the License is distributed on an "AS IS" BASIS,
> +  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> +  See the License for the specific language governing permissions and
> +  limitations under the License.
> +-->
> +<widget xmlns="http://www.w3.org/ns/widgets"
> +               id="http://wookie.apache.org/widgets/vtt"
> +               version="0.1"
> +        width="520"
> +        height="480"
> +        >
> +  <name>VTT</name>
> +  <description>A Widget for creating web-VTT caption files</description>
> +  <author>Apache Wookie (Incubating) Team</author>
> +  <feature name="http://jquerymobile.com" required="true"/>
> +
> +  <licence>Licensed to the Apache Software Foundation (ASF) under one or more
> +  contributor license agreements.  See the NOTICE file distributed with
> +  this work for additional information regarding copyright ownership.
> +  The ASF licenses this file to You under the Apache License, Version 2.0
> +  (the "License"); you may not use this file except in compliance with
> +  the License.  You may obtain a copy of the License at
> +
> +      http://www.apache.org/licenses/LICENSE-2.0
> +
> +  Unless required by applicable law or agreed to in writing, software
> +  distributed under the License is distributed on an "AS IS" BASIS,
> +  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> +  See the License for the specific language governing permissions and
> +  limitations under the License.</licence>
> +
> +</widget>
> +
> +
> +
>
> Added: incubator/wookie/trunk/scratchpad/widgets/vtt/icon.png
> URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/scratchpad/widgets/vtt/icon.png?rev=1138459&view=auto
> ==============================================================================
> Binary file - no diff available.
>
> Propchange: incubator/wookie/trunk/scratchpad/widgets/vtt/icon.png
> ------------------------------------------------------------------------------
>    svn:mime-type = application/octet-stream
>
> Added: incubator/wookie/trunk/scratchpad/widgets/vtt/index.html
> URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/scratchpad/widgets/vtt/index.html?rev=1138459&view=auto
> ==============================================================================
> --- incubator/wookie/trunk/scratchpad/widgets/vtt/index.html (added)
> +++ incubator/wookie/trunk/scratchpad/widgets/vtt/index.html Wed Jun 22 13:36:21 2011
> @@ -0,0 +1,141 @@
> +<!--
> +  Licensed to the Apache Software Foundation (ASF) under one or more
> +  contributor license agreements.  See the NOTICE file distributed with
> +  this work for additional information regarding copyright ownership.
> +  The ASF licenses this file to You under the Apache License, Version 2.0
> +  (the "License"); you may not use this file except in compliance with
> +  the License.  You may obtain a copy of the License at
> +
> +      http://www.apache.org/licenses/LICENSE-2.0
> +
> +  Unless required by applicable law or agreed to in writing, software
> +  distributed under the License is distributed on an "AS IS" BASIS,
> +  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> +  See the License for the specific language governing permissions and
> +  limitations under the License.
> +-->
> +<!DOCTYPE html>
> +<html>
> +       <head>
> +        <meta http-equiv="pragma" content="no-cache"/>
> +        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
> +        <script type="text/javascript" src="scripts/controller.js" charset="utf-8"></script>
> +
> +        <!--
> +
> +        // Removed for now - we may be able to use Playr to do previewing, but it
isn't
> +        // necessary for creating the web-vtt file
> +        // See http://www.delphiki.com/html5/playr/
> +
> +        <script type="text/javascript" src="lib/playr.js" charset="utf-8"></script>
> +        <link rel="stylesheet" href="lib/playr.css"/>
> +
> +        -->
> +
> +        <!--
> +
> +        // If you aren't using this in Apache Wookie, uncommment this section
> +
> +        <script type="text/javascript" src="lib/jquery-1.5.min.js"></script>
> +        <script type="text/javascript" src="lib/jquery.mobile-1.0a4-patched.min.js"></script>
> +        <link type="text/css" rel="stylesheet" href="lib/jquery.mobile-1.0a4.min.css"
/>
> +
> +        -->
> +
> +               <title>VTT</title>
> +       </head>
> +
> +       <body onLoad="Controller.init()">
> +               <div data-role="page" id="home">
> +
> +                   <div data-role="header">
> +                               <h4>VTT Caption Creator</h4>
> +                               <a href="#add" data-rel="dialog" data-transition="pop"
data-role="button" data-icon="plus">Video</a>
> +                <a href="#output" data-rel="dialog" data-transition="pop"
data-role="button" data-icon="grid">VTT</a>
> +                       </div> <!-- /header -->
> +
> +                       <div data-role="content" class="ui-content">
> +                <div id="video_container">
> +                    <!-- video is placed here -->
> +                    <div id="no-video">
> +                        <p>
> +                            Welcome to the VTT subtitle track creator.
Click the "Video" button to select a video to subtitle.
> +                        </p>
> +                    </div>
> +                </div>
> +
> +                <div>
> +                    <!-- these are the caption creation tools -->
> +                    <div id="captionTrigger">
> +                        <button id="startButton" onclick="Controller.startCaption()">Pause
and create caption</button>
> +                    </div>
> +                    <div id="captionTools">
> +                        <div data-role="controlgroup" data-type="horizontal">
> +                            <input id="captionText"/>
> +                            <button id="okButton" onclick="Controller.endCaption()">OK</button>
> +                            <button id="cancelButton" onclick="Controller.cancelCaption()">Cancel</button>
> +                        </div>
> +                    </div>
> +                </div>
> +                       </div><!-- /content -->
> +
> +               </div><!-- /page -->
> +
> +        <!--
> +        This is the dialog box that shows the Web-VTT output you've created.
> +        --->
> +        <div data-role="dialog" id="output">
> +                   <div data-role="header">
> +                               <h4>VTT Output</h4>
> +                       </div> <!-- /header -->
> +                       <div data-role="content" class="ui-content">
> +                <div>
> +                    <textarea style="width:100%; height:250px; font-family:
courier" id="vtt_out"></textarea>
> +                    <a href="#preview" data-transition="pop" data-role="button"
onclick="Controller.preview()">Preview</a>
> +                    <a href="#home" data-transition="pop" data-direction="reverse"
data-role="button">OK</a>
> +                </div>
> +                       </div><!-- /content -->
> +               </div><!-- /page -->
> +
> +
> +        <!--
> +        This is the dialog box that lets you set the video to show and work on.
> +        --->
> +               <div data-role="dialog" id="add">
> +                       <div data-role="header">
> +                               <h4>Select Video to Use</h4>
> +                       </div> <!-- /header -->
> +                       <div data-role="content" class="ui-content">
> +                               <div data-role="fieldcontain">
> +                               <label for="input-url-mp4">MP4 URL:</label>
> +                               <input type="text" name="input-url-mp4"
id="input-url-mp4" value=""  />
> +                    <label for="input-url-ogg">Ogg URL:</label>
> +                               <input type="text" name="input-url-ogg"
id="input-url-ogg" value=""  />
> +                               </div>
> +                               <button id="submit-button" onclick="Controller.setVideo()">OK</button>
> +                               <a href="#home" data-transition="pop"
data-direction="reverse" data-role="button">Cancel</a>
> +                       </div><!-- /content -->
> +               </div><!-- /page -->
> +
> +        <!--
> +        This is the dialog box that shows a preview of the video with the subtitle
track
> +        --->
> +        <div data-role="page" id="preview">
> +                   <div data-role="header">
> +                               <h4>VTT Preview</h4>
> +                       </div> <!-- /header -->
> +                       <div data-role="content" class="ui-content">
> +                <div>
> +                    <p>Unfortunately, Preview doesn't work at the moment
- please fix!</p>
> +                    <div id="video_preview_container">
> +                    <!-- video is placed here -->
> +                    </div>
> +                    <a href="#home" data-transition="pop" data-direction="reverse"
data-role="button">OK</a>
> +                </div>
> +                       </div><!-- /content -->
> +               </div><!-- /page -->
> +
> +
> +
> +       </body>
> +</html>
> \ No newline at end of file
>
> Added: incubator/wookie/trunk/scratchpad/widgets/vtt/scripts/controller.js
> URL: http://svn.apache.org/viewvc/incubator/wookie/trunk/scratchpad/widgets/vtt/scripts/controller.js?rev=1138459&view=auto
> ==============================================================================
> --- incubator/wookie/trunk/scratchpad/widgets/vtt/scripts/controller.js (added)
> +++ incubator/wookie/trunk/scratchpad/widgets/vtt/scripts/controller.js Wed Jun 22 13:36:21
2011
> @@ -0,0 +1,228 @@
> +/*
> + * Licensed to the Apache Software Foundation (ASF) under one or more
> + * contributor license agreements.  See the NOTICE file distributed with
> + * this work for additional information regarding copyright ownership.
> + * The ASF licenses this file to You under the Apache License, Version 2.0
> + * (the "License"); you may not use this file except in compliance with
> + * the License.  You may obtain a copy of the License at
> + *
> + *      http://www.apache.org/licenses/LICENSE-2.0
> + *
> + * Unless required by applicable law or agreed to in writing, software
> + * distributed under the License is distributed on an "AS IS" BASIS,
> + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
> + * See the License for the specific language governing permissions and
> + * limitations under the License.
> + */
> +
> +
> +/**
> + * TODO LIST
> + *
> + * Fix video-with-captions preview
> + * Clear input after user puts in a subtitle
> + * Add keyboard input controls
> + * Cool styling of captions
> + * Dynamic length setting
> + */
> +
> +/**
> + * The Controller object
> + * This is used to wire up the view and model with actions
> + */
> +var Controller = {
> +
> +    // Setup the controller
> +       init:function() {
> +        // Set some defaults up in the "video" dialog
> +        $("#input-url-mp4").attr("value","http://www.delphiki.com/html5/playr/examples/dw_trailer_low.mp4");
> +        $("#input-url-ogg").attr("value","http://www.delphiki.com/html5/playr/examples/dw_trailer_low.ogg");
> +
> +        // Create new caption set
> +        this.captions = [];
> +        // Hide the caption editing tools until we have a video
> +        $("#captionTrigger").hide();
> +        $("#captionTools").hide();
> +       },
> +
> +    select: function(){
> +    },
> +
> +    // Called when the user wants to pause the video
> +    // and write a caption. Enables the caption editing controls.
> +    startCaption: function(){
> +        this.video.pause();
> +        this.now = this.video.currentTime;
> +        $("#captionTrigger").hide();
> +        $("#captionTools").show();
> +    },
> +
> +    // Called when the user has finished writing a caption
> +    // Saves the caption and resumes the video
> +    endCaption: function(){
> +        var caption = {};
> +        caption.text = document.getElementById('captionText').value;
> +        // We start the captioning 250 milliseconds before the current frame
> +        caption.start = this.formatDate(this.now * 1000 - 250);
> +        // We end the caption 2 seconds after the caption start
> +        caption.end = this.formatDate((this.now + 2) * 1000);
> +        this.captions.push(caption);
> +        this.updateCaptions();
> +        $("#captionTrigger").show();
> +        $("#captionTools").hide();
> +        this.video.play();
> +    },
> +
> +    // Called if the user cancels writing a caption
> +    cancelCaption: function(){
> +        $("#captionTrigger").show();
> +        $("#captionTools").hide();
> +
> +        this.video.play();
> +    },
> +
> +    // Update the Web-VTT serialization of the captions
> +    updateCaptions: function(){
> +        var vtt = "WEBVTT FILE";
> +        for(i=0;i<this.captions.length;i++){
> +            vtt += "\n";
> +            var x = i + 1;
> +            vtt += "\n" + x;
> +            vtt += "\n" + this.captions[i].start +" --> " + this.captions[i].end;
> +            vtt += "\n" +this.captions[i].text;
> +        }
> +        document.getElementById('vtt_out').innerHTML = vtt;
> +    },
> +
> +    // Turns a JS date into a Web-VTT timestamp
> +    formatDate: function(inputDate){
> +        var date = new Date(inputDate);
> +        var timestamp;
> +        if (date.getHours() < 10){
> +            timestamp = "0"+date.getHours();
> +        } else {
> +            timestamp = date.getHours();
> +        }
> +        timestamp +=":";
> +        if (date.getMinutes() < 10){
> +            timestamp += "0"+date.getMinutes();
> +        } else {
> +            timestamp += date.getMinutes();
> +        }
> +        timestamp +=":";
> +        if (date.getSeconds() < 10){
> +            timestamp += "0"+date.getSeconds();
> +        } else {
> +            timestamp += date.getSeconds();
> +        }
> +        timestamp += ".";
> +        if (date.getMilliseconds() < 100){
> +            timestamp += "0";
> +        }
> +        timestamp += date.getMilliseconds();
> +        return timestamp;
> +    },
> +
> +    // Called when OK is clicked in the add video dialog
> +    setVideo: function(){
> +        // Get the form values
> +        var video_src_mp4 = $("#input-url-mp4").attr("value");
> +        var video_src_ogg = $("#input-url-ogg").attr("value");
> +
> +        // Set the video if there is at least one src value
> +        if (video_src_mp4 != "" || video_src_ogg != ""){
> +            this.resetVideo(video_src_mp4,video_src_ogg, null);
> +
> +            // Make the caption trigger visible only if there is a valid video
> +            $("#captionTrigger").show();
> +        }
> +
> +        // Close the dialog
> +        $.mobile.changePage("#home", "pop", true);
> +    },
> +
> +    // Reset the preview dialog
> +    preview: function(){
> +
> +        // Create video tag
> +        var video_src_mp4 = $("#input-url-mp4").attr("value");
> +        var video_src_ogg = $("#input-url-ogg").attr("value");
> +        var track_src = "data:text/plain,"+"\n"+$("#vtt_out").val();
> +        var video = this.createVideoTag(video_src_mp4, video_src_ogg, track_src);
> +
> +        // Remove any existing preview
> +        $('#video_preview_container').empty();
> +
> +        // Set video tag in the preview container
> +        $('#video_preview_container').append(video);
> +
> +        // Update video tags using Playr
> +        this.updateVideoTags();
> +    },
> +
> +    // Reset the video selection
> +    resetVideo: function(video_src_mp4, video_src_ogg, track_src){
> +
> +        // Remove placeholder
> +        $("#no-video").remove();
> +
> +        // Remove old video
> +        $("#video_container").empty();
> +
> +        // Create video tag
> +        var video = this.createVideoTag(video_src_mp4, video_src_ogg, track_src);
> +
> +        // Set video tag in the container
> +        $('#video_container').append(video);
> +
> +        this.video = document.getElementsByTagName('video')[0];
> +
> +        // Update video tags using Playr
> +        // this.updateVideoTags();
> +
> +    },
> +
> +    // Create a video tag
> +    createVideoTag: function(video_src_mp4, video_src_ogg, track_src){
> +
> +        // Create video tag
> +        var video = $(document.createElement('video'))
> +        .attr('id', 'video')
> +        .attr('controls', 'controls')
> +        .attr('class','playr_video');
> +
> +        // Create source tags
> +        var mp4source = $(document.createElement('source'))
> +        .attr('type','video/mp4')
> +        .attr('src', video_src_mp4);
> +        video.append(mp4source);
> +        var oggsource = $(document.createElement('source'))
> +        .attr('type','video/ogg')
> +        .attr('src', video_src_ogg);
> +        video.append(oggsource);
> +
> +        // Create subtitle tag
> +        if (track_src){
> +            var track = $(document.createElement('track'))
> +            .attr('kind', 'subtitles')
> +            .attr('label', 'WebVTT')
> +            .attr('src', track_src)
> +            .attr('srclang', 'en')
> +            video.append(track);
> +        }
> +
> +        return video;
> +    },
> +
> +    // NOTE I've removed this capability as its not clear what the license
> +    // is for Playr.
> +    //
> +    // Tell Playr to update all video tags in the app
> +    updateVideoTags: function(){
> +        var video_tags = document.querySelectorAll('video.playr_video');
> +        var video_objects = [];
> +        for(v = 0; v < video_tags.length; v++){
> +            video_objects.push(new Playr(v, video_tags[v]));
> +        }
> +    }
> +}
> \ No newline at end of file
>
>
>



-- 
Ross Gardler <rgardler@opendirective.com>
Programme Leader (Open Development)
OpenDirective http://opendirective.com

Mime
View raw message