mods/atutor_opencaps/opencaps/editor.php

   1 <?php \r
   2 /*\r
   3  * OpenCaps\r
   4  * http://opencaps.atrc.utoronto.ca\r
   5  * \r
   6  * Copyright 2009 Heidi Hazelton\r
   7  * Adaptive Technology Resource Centre, University of Toronto\r
   8  * \r
   9  * Licensed under the Educational Community License (ECL), Version 2.0. \r
  10  * You may not use this file except in compliance with this License.\r
  11  * http://www.opensource.org/licenses/ecl2.php\r
  12  * \r
  13  */\r
  14 \r
  15 define('INCLUDE_PATH', 'include/');\r
  16 require(INCLUDE_PATH.'vitals.inc.php');\r
  17 \r
  18 require(INCLUDE_PATH.'header.inc.php'); \r
  19 ?>      \r
  20 \r
  21 <script language="javascript" type="text/javascript" src="js/editor.js"></script>                                       \r
  22 \r
  23         <div id="movie_status"></div>                           \r
  24         \r
  25         <div id="movie-container">              \r
  26                 <object id="mymovie" width="340" height="<?php echo $this_proj->media_height; ?>" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0">\r
  27                 <param name="src" value="<?php echo $this_proj->media_loc; ?>" />\r
  28                 <param name="enablejavascript" value="true" />\r
  29                 <param name="postdomevents" value="true" />\r
  30                 <param name="controller" value="false" />\r
  31                 <param name="autoplay" value="false" />\r
  32                 <param name="scale" value="aspect" />\r
  33                 <embed src="<?php echo $this_proj->media_loc; ?>" width="340" height="<?php echo $this_proj->media_height; ?>" pluginspage="http://www.apple.com/quicktime/download/" enablejavascript="true" name="mymovie" id="mymovie_embed" postdomevents="true" controller="false" autoplay="false" scale="aspect" />\r
  34                 </object>               \r
  35                                 \r
  36                 <div id="movie-controls">\r
  37                         <div style="text-align:center; margin-top:-3px;">\r
  38                                 <div id="current-time"></div> / <div id="duration"></div>\r
  39                         </div>\r
  40                         \r
  41                         <div id='m_timeline'>\r
  42                                 <div id="m_handle"></div>       \r
  43                         </div>                                  \r
  44                                 \r
  45                         <div style="float:left;"><a href="#" onclick="clip.previous();"><img src="images/clip_prev.png" alt="Previous Clip" title="Previous Clip" /></a></div> \r
  46                         <div style="float:right;"><a href="#" onclick="clip.next();"><img src="images/clip_next.png" alt="Next Clip" title="Next Clip" /></a></div>\r
  47         \r
  48                         <div style="text-align:center;">\r
  49                                 <!--  a href="#" onmousedown="movie.pressPlay()" onmouseup="movie.pressStop()"><img src="images/pressplay.png" alt="Press Play" title="Press Play" id="pressButton" /></a>&nbsp; --> \r
  50                                 <a href="#" onmousedown="movie.normPlay()"><img src="images/play.png" alt="Play" title="Play" id="playButton" /></a>\r
  51                         </div>\r
  52 \r
  53                 </div>\r
  54                 \r
  55                 <div id="clip-info">\r
  56                         <div style="font-weight:bold;text-decoration:underline; text-align:left;" id="clip-name"></div><br />\r
  57                         <!--  div style="text-align:left">Total Clips: <div id="numclips" style="display:inline"></div></div -->\r
  58                 </div>\r
  59 \r
  60                 \r
  61                 <div id="make-clip">\r
  62                         <input type="button" name="Make Clip" value="Make Clip" class="button" style="width:7em" onclick="movie.saveClip()" id="makeclip"  />\r
  63                 </div>\r
  64                                         \r
  65                 <div id="clip-controls">\r
  66                         <!--  div id="clip-time"></div> / <div id="clip-duration"></div -->\r
  67 \r
  68                         <div id="in-info">\r
  69                                 <div style="float:left" id="in-time"></div><div style="float:right" id="in-undo"></div><br />\r
  70                                 <a href="#" onclick="clip.addPrevSpace()" id="addprev"><img src="images/clip_leftedge.png" alt="Add previous space to clip" title="Add previous space to clip" style="padding-top:10px; padding-right:5px;" /></a> \r
  71                                 <input type="button" id="in" name="in" value="In" class="button" onclick="clip.newInTime();" />\r
  72                         </div>\r
  73 \r
  74                         <div id="out-info">\r
  75                                 <div style="float:left" id="out-undo"></div><div style="float:right" id="out-time"></div><br />\r
  76                                 <input type="button" id="out" name="out" value="Out" class="button" onclick="clip.newOutTime();" /> \r
  77                                 <a href="#" onclick="clip.addNextSpace()" id="addnext"><img src="images/clip_rightedge.png" alt="Add next space to clip" title="Add next space to clip" style="padding-top:10px; padding-left:5px;" /></a>\r
  78                         </div>                          \r
  79 \r
  80                         <div id="clip-timeline">\r
  81                                 <div id='c_timeline' class='ui-slider-clip' >\r
  82                                         <div id="c_handle"></div>       \r
  83                                 </div>                                  \r
  84                         </div>  \r
  85                                         \r
  86                         <div id="clip-buttons">                 \r
  87                         <div style="float:left;margin-top:1.4em;">\r
  88                                 <a href="#" onclick="clip.goToStart()"><img src="images/start.png" alt="Go to start of clip" title="Go to start of clip" /></a>&nbsp;\r
  89                                 <a href="#" onclick="clip.stepBack(33)"><img src="images/rewind2.png" alt="Step back .033 second" title="Step back .033 seconds" /></a>&nbsp;\r
  90                                 <a href="#" onclick="clip.stepBack(100)"><img src="images/rewind.png" alt="Step back .100 second" title="Step back .100 second" /></a>\r
  91                         </div>  \r
  92 \r
  93                         <div style="float:right;margin-top:1.4em;">\r
  94                                 <a href="#" onclick="clip.stepForward(100)"><img src="images/ffwd.png" alt="Step forward .100 second" title="Step forward .100 second" /></a>&nbsp;\r
  95                                 <a href="#" onclick="clip.stepForward(33)"><img src="images/ffwd2.png" alt="Step forward .033 second" title="Step forward .033 second" /></a>&nbsp; \r
  96                                 <a href="#" onclick="clip.goToEnd()"><img src="images/end.png" alt="Go to end of clip" title="Go to end of clip" /></a> \r
  97                         </div>                                          \r
  98                                                                         \r
  99                         <div style="text-align:center; margin-top:5px;">                \r
 100                                 <!--  a href="#" onmousedown="clip.pressPlay()" onmouseup="clip.pressStop()"><img src="images/pressplay.png" alt="Press Play" title="Press Play" id="clip-pressButton" /></a>&nbsp; --> \r
 101                                 <a href="#" onclick="clip.normPlay()"><img src="images/play.png" alt="Play Clip" title="Play Clip" id="clip-playButton" /></a>&nbsp;\r
 102                                 <a href="#" onclick="clip.lastPlay();"><img src="images/last_start.png" alt="Last play" title="Last play" /></a>\r
 103                         </div>\r
 104                         </div>\r
 105                 </div>          \r
 106                 <div id="captions">\r
 107                         <textarea cols="5" rows="4" style="margin-left:-5px;width:250px; height:75px;font-size:15px;" id="caption-text"></textarea><br />\r
 108                 </div>\r
 109         \r
 110         </div>\r
 111 \r
 112         <div id="info-container">\r
 113                 <!-- div id="submenubar">\r
 114                         <ul>\r
 115                                 <li id="clips-subtab"><a id="clip-tab" href="#" onclick="displayClips();">Clip Timeline</a></li>\r
 116                                 <li id="detail-subtab"><a id="detail-tab" href="#" onclick="displayDetails()">Details</a></li>\r
 117                         </ul>\r
 118                 </div -->\r
 119                 <div style="background-color:#b5c3d9; padding:5px;"><div id="show_hide_caps"></div></div>       \r
 120                 <div id="info-tab"></div>\r
 121         </div>\r
 122 \r
 123 <?php require('include/footer.inc.php'); ?>