src/js/widgets/jquery.mobile.tizen.multimediaview.js

   1 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
   2 //>>description: Shows multimedia and its controls
   3 //>>label: Multimedia view
   4 //>>group: Tizen:Widgets
   5
   6 define( [ '../jquery.mobile.tizen.scrollview' ], function ( ) {
   7 //>>excludeEnd("jqmBuildExclude");
   8
   9 /* ***************************************************************************
  10  * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
  11  *
  12  * Permission is hereby granted, free of charge, to any person obtaining a
  13  * copy of this software and associated documentation files (the "Software"),
  14  * to deal in the Software without restriction, including without limitation
  15  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
  16  * and/or sell copies of the Software, and to permit persons to whom the
  17  * Software is furnished to do so, subject to the following conditions:
  18  *
  19  * The above copyright notice and this permission notice shall be included in
  20  * all copies or substantial portions of the Software.
  21  *
  22  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  23  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  24  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  25  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  26  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  27  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  28  * DEALINGS IN THE SOFTWARE.
  29  * ***************************************************************************
  30  *
  31  * Authors: Yonghwi Park <yonghwi0324.park@samsung.com>
  32  *               Wonseop Kim <wonseop.kim@samsung.com>
  33 */
  34
  35 /**
  36  *
  37  * MultiMediaView is a widget that lets the user view and handle multimedia contents.
  38  * Video and audio elements are coded as standard HTML elements and enhanced by the
  39  * MultiMediaview to make them attractive and usable on a mobile device.
  40  *
  41  * HTML Attributes:
  42  *                      data-theme : Set a theme of widget.
  43  *                              If this value is not defined, widget will use parent`s theme. (optional)
  44  *                      data-controls : If this value is 'true', widget will use belonging controller.
  45  *                              If this value is 'false', widget will use browser`s controller.
  46  *                              Default value is 'true'.
  47  *                      data-full-screen : Set a status that full-screen when inital start.
  48  *                              Default value is 'false'.
  49  *
  50  * APIs:
  51  *                      width( [number] )
  52  *                                      : Get or set the width of widget.
  53  *                                      The first argument is the width of widget.
  54  *                                      If no first argument is specified, will act as a getter.
  55  *                      height( [number] )
  56  *                                      : Get or set the height of widget.
  57  *                                      The first argument is the height of widget.
  58  *                                      If no first argument is specified, will act as a getter.
  59  *                      fullScreen( [boolean] )
  60  *                                      : Get or Set the status of full-screen.
  61  *                                      If no first argument is specified, will act as a getter.
  62  *
  63  * Events:
  64  *
  65  *                      create :  triggered when a multimediaview is created.
  66  *
  67  * Examples:
  68  *
  69  *                      VIDEO :
  70  *                              <video data-controls="true" style="width:100%;">
  71  *                                      <source src="media/oceans-clip.mp4" type="video/mp4" />
  72  *                                      Your browser does not support the video tag.
  73  *                              </video>
  74  *
  75  *                      AUDIO :
  76  *                              <audio data-controls="true" style="width:100%;">
  77  *                                      <source src="media/Over the horizon.mp3" type="audio/mp3" />
  78  *                                      Your browser does not support the audio tag.
  79  *                              </audio>
  80  *
  81  */
  82 /**
  83         @class MutimediaView
  84         The multimedia view widget shows a player control that you can use to view and handle multimedia content. This widget uses the standard HTML video and audio elements, which have been enhanced for use on a mobile device.
  85
  86         To add a multimedia view widget to the application, use the following code:
  87
  88                 // Video player control
  89                 <video data-controls="true" style="width:100%;">
  90                 <source src="<VIDEO_FILE_URL>" type="video/mp4" /> Your browser does not support the video tag. </video>
  91                 // Audio player control
  92                 <audio data-controls="true" style="width:100%;"> <source src="<AUDIO_FILE_URL>" type="audio/mp3" /> Your browser does not support the audio tag.
  93                 </audio>
  94
  95         The multimedia view can define a callback for the create event, which is fired when the widget is created.
  96                 $('.selector').multimediaview({
  97                         create:function(event, u){...}
  98                 });
  99                 $(".selector").bind("create", function(event, ui)
 100                 {
 101                         // Respond to the multimedia view widget creation
 102                 });
 103 */
 104 /**
 105         @property {Boolean} data-control
 106         Sets the controls for the widget.
 107         The default value is true. If the value is set to true, the widget uses its own player controls. If the value is set to false, the widget uses the browser's player controls.
 108 */
 109 /**
 110         @property {Boolean} data-full-screen
 111         Defines whether the widget opens in the fullscreen view mode.
 112         The default value is false.
 113 */
 114 /**
 115         @property {String} data-theme
 116         Sets the widget theme.
 117         If the value is not set, the parent control's theme is used
 118 */
 119 /**
 120         @method width
 121         The width method is used to get (if no value is defined) or set the multimedia view widget width:
 122                 <video>
 123                          <source src="test.mp4" type="video/mp4" />
 124                 </video>
 125                 $(".selector").multimediaview("width", [value]);
 126 */
 127 /**
 128         @method height
 129         The height method is used to get (if no value is defined) or set the multimedia view widget height:
 130                 <video>
 131                         <source src="test.mp4" type="video/mp4" />
 132                 </video>
 133                 $(".selector").multimediaview("height", [value]);
 134 */
 135 /**
 136         @method fullScreen
 137         The fullScreen method is used to get (if no value is defined) or set the full-screen mode of the multimedia view widget. If the value is true, the full-screen mode is used; otherwise the multimedia view widget runs in the normal mode.
 138
 139                 <video>
 140                         <source src="test.mp4" type="video/mp4" />
 141                 </video>
 142                 $(".selector").multimediaview("fullScreen", [value]);
 143 */
 144 ( function ( $, document, window, undefined ) {
 145         $.widget( "tizen.multimediaview", $.mobile.widget, {
 146                 options: {
 147                         theme: null,
 148                         controls: true,
 149                         fullScreen: false,
 150                         initSelector: "video, audio"
 151                 },
 152
 153                 _create: function () {
 154                         var self = this,
 155                                 view = self.element,
 156                                 viewElement = view[0],
 157                                 isVideo = ( viewElement.nodeName === "VIDEO" ),
 158                                 option = self.options,
 159                                 parentTheme = $.mobile.getInheritedTheme( view, "s" ),
 160                                 theme = option.theme || parentTheme,
 161                                 control = null;
 162
 163                         $.extend( this, {
 164                                 role: null,
 165                                 isControlHide: false,
 166                                 controlTimer: null,
 167                                 isVolumeHide: true,
 168                                 backupView: null,
 169                                 _reserveVolume: -1,
 170                                 _isVideo: isVideo
 171                         });
 172
 173                         view.addClass( "ui-multimediaview" );
 174                         control = self._createControl();
 175                         control.find( ".ui-button" ).each( function ( index ) {
 176                                 $( this ).buttonMarkup( { corners: true, theme: theme, shadow: true } );
 177                         });
 178
 179                         if ( isVideo ) {
 180                                 control.addClass( "ui-multimediaview-video" );
 181                         }
 182
 183                         view.wrap( "<div class='ui-multimediaview-wrap ui-multimediaview-" + theme + "'>" ).after( control );
 184                         if ( option.controls && view.attr( "controls" ) ) {
 185                                 view.removeAttr( "controls" );
 186                         }
 187
 188                         self._addEvent();
 189                 },
 190
 191                 _resize: function () {
 192                         this._resizeFullscreen( this.options.fullScreen );
 193                         this._resizeControl();
 194                         this._updateSeekBar();
 195                         this._updateVolumeState();
 196                 },
 197
 198                 _resizeControl: function () {
 199                         var self = this,
 200                                 view = self.element,
 201                                 viewElement = view[0],
 202                                 isVideo = self._isVideo,
 203                                 wrap = view.parent( ".ui-multimediaview-wrap" ),
 204                                 control = wrap.find( ".ui-multimediaview-control" ),
 205                                 buttons = control.find( ".ui-button" ),
 206                                 playpauseButton = control.find( ".ui-playpausebutton" ),
 207                                 seekBar = control.find( ".ui-seekbar" ),
 208                                 durationLabel = control.find( ".ui-durationlabel" ),
 209                                 timestampLabel = control.find( ".ui-timestamplabel" ),
 210                                 volumeControl = control.find( ".ui-volumecontrol" ),
 211                                 volumeBar = volumeControl.find( ".ui-volumebar" ),
 212                                 width = ( isVideo ? view.width() : wrap.width() ),
 213                                 height = ( isVideo ? view.height() : control.height() ),
 214                                 offset = view.offset(),
 215                                 controlHeight = control.height(),
 216                                 availableWidth = 0,
 217                                 controlOffset = null;
 218
 219                         if ( control ) {
 220                                 if ( isVideo ) {
 221                                         controlOffset = control.offset();
 222                                         controlOffset.left = offset.left;
 223                                         controlOffset.top = offset.top + height - controlHeight;
 224                                         control.offset( controlOffset );
 225                                 }
 226                                 control.width( width );
 227                         }
 228
 229                         if ( seekBar ) {
 230                                 availableWidth = control.width() - ( buttons.outerWidth( true ) * buttons.length );
 231                                 availableWidth -= ( parseInt( buttons.eq( 0 ).css( "margin-left" ), 10 ) + parseInt( buttons.eq( 0 ).css( "margin-right" ), 10 ) ) * buttons.length;
 232                                 if ( !self.isVolumeHide ) {
 233                                         availableWidth -= volumeControl.outerWidth( true );
 234                                 }
 235                                 seekBar.width( availableWidth );
 236                         }
 237
 238                         if ( durationLabel && !isNaN( viewElement.duration ) ) {
 239                                 durationLabel.find( "p" ).text( self._convertTimeFormat( viewElement.duration ) );
 240                         }
 241
 242                         if ( viewElement.autoplay && viewElement.paused === false ) {
 243                                 playpauseButton.removeClass( "ui-play-icon" ).addClass( "ui-pause-icon" );
 244                         }
 245
 246                         if ( seekBar.width() < ( volumeBar.width() + timestampLabel.width() + durationLabel.width() ) ) {
 247                                 durationLabel.hide();
 248                         } else {
 249                                 durationLabel.show();
 250                         }
 251                 },
 252
 253                 _resizeFullscreen: function ( isFullscreen ) {
 254                         var self = this,
 255                                 view = self.element,
 256                                 viewElement = view[0],
 257                                 wrap = view.parent( ".ui-multimediaview-wrap" ),
 258                                 control = wrap.find( ".ui-multimediaview-control" ),
 259                                 playpauseButton = control.find( ".ui-playpausebutton" ),
 260                                 timestampLabel = control.find( ".ui-timestamplabel" ),
 261                                 seekBar = control.find( ".ui-seekbar" ),
 262                                 durationBar = seekBar.find( ".ui-duration" ),
 263                                 currenttimeBar = seekBar.find( ".ui-currenttime" ),
 264                                 body = $( "body" )[0],
 265                                 docWidth = 0,
 266                                 docHeight = 0;
 267
 268                         if ( isFullscreen ) {
 269                                 if ( !self.backupView ) {
 270                                         self.backupView = {
 271                                                 width: viewElement.style.getPropertyValue( "width" ) || "",
 272                                                 height: viewElement.style.getPropertyValue( "height" ) || "",
 273                                                 position: view.css( "position" ),
 274                                                 zindex: view.css( "z-index" ),
 275                                                 wrapHeight: wrap[0].style.getPropertyValue( "height" ) || ""
 276                                         };
 277                                 }
 278                                 docWidth = body.clientWidth;
 279                                 docHeight = body.clientHeight;
 280
 281                                 view.width( docWidth ).height( docHeight - 1 );
 282                                 wrap.height( docHeight - 1 )
 283                                         .siblings()
 284                                         .addClass( "ui-multimediaview-siblings-off" );
 285                                 view.offset( {
 286                                         top: 0,
 287                                         left: 0
 288                                 }).addClass( "ui-multimediaview-fullscreen" );
 289                         } else {
 290                                 if ( !self.backupView ) {
 291                                         return;
 292                                 }
 293                                 wrap.css( "height", self.backupView.wrapHeight )
 294                                         .siblings()
 295                                         .removeClass( "ui-multimediaview-siblings-off" );
 296                                 view.css( {
 297                                         "width": self.backupView.width,
 298                                         "height": self.backupView.height,
 299                                         "position": self.backupView.position,
 300                                         "z-index": self.backupView.zindex
 301                                 }).removeClass( "ui-multimediaview-fullscreen" );
 302                                 self.backupView = null;
 303                         }
 304                 },
 305
 306                 _addEvent: function () {
 307                         var self = this,
 308                                 view = self.element,
 309                                 option = self.options,
 310                                 viewElement = view[0],
 311                                 isVideo = self._isVideo,
 312                                 control = view.parent( ".ui-multimediaview-wrap" ).find( ".ui-multimediaview-control" ),
 313                                 playpauseButton = control.find( ".ui-playpausebutton" ),
 314                                 timestampLabel = control.find( ".ui-timestamplabel" ),
 315                                 durationLabel = control.find( ".ui-durationlabel" ),
 316                                 volumeButton = control.find( ".ui-volumebutton" ),
 317                                 volumeControl = control.find( ".ui-volumecontrol" ),
 318                                 volumeBar = volumeControl.find( ".ui-volumebar" ),
 319                                 volumeGuide = volumeControl.find( ".ui-guide" ),
 320                                 volumeHandle = volumeControl.find( ".ui-handle" ),
 321                                 fullscreenButton = control.find( ".ui-fullscreenbutton" ),
 322                                 seekBar = control.find( ".ui-seekbar" ),
 323                                 durationBar = seekBar.find( ".ui-duration" ),
 324                                 currenttimeBar = seekBar.find( ".ui-currenttime" ),
 325                                 $document = $( document );
 326
 327                         $document.unbind( ".multimediaview" ).bind( "pagechange.multimediaview", function ( e ) {
 328                                 var $page = $( e.target );
 329                                 if ( $page.find( view ).length > 0 && viewElement.autoplay ) {
 330                                         viewElement.play();
 331                                 }
 332
 333                                 if ( option.controls ) {
 334                                         self._resize();
 335                                 }
 336                         }).bind( "pagebeforechange.multimediaview", function ( e ) {
 337                                 if ( viewElement.played.length !== 0 ) {
 338                                         viewElement.pause();
 339                                 }
 340                         });
 341
 342                         $( window ).unbind( ".multimediaview" ).bind( "resize.multimediaview orientationchange.multimediaview", function ( e ) {
 343                                 if ( !option.controls ) {
 344                                         return;
 345                                 }
 346                                 var $page = $( e.target ),
 347                                         $scrollview = view.parents( ".ui-scrollview-clip" );
 348
 349                                 $scrollview.each( function ( i ) {
 350                                         if ( $.data( this, "scrollview" ) ) {
 351                                                 $( this ).scrollview( "scrollTo", 0, 0 );
 352                                         }
 353                                 });
 354
 355                                 // for maintaining page layout
 356                                 if ( !option.fullScreen ) {
 357                                         $( ".ui-footer:visible" ).show();
 358                                 } else {
 359                                         $( ".ui-footer" ).hide();
 360                                         self._fitContentArea( $page );
 361                                 }
 362
 363                                 if ( control.css( "display" ) !== "none" ) {
 364                                         self._resize();
 365                                 }
 366                         });
 367
 368                         view.bind( "loadedmetadata.multimediaview", function ( e ) {
 369                                 if ( !isNaN( viewElement.duration ) ) {
 370                                         durationLabel.find( "p" ).text( self._convertTimeFormat( viewElement.duration ) );
 371                                 }
 372                                 self._resize();
 373                         }).bind( "timeupdate.multimediaview", function ( e ) {
 374                                 self._updateSeekBar();
 375                         }).bind( "play.multimediaview", function ( e ) {
 376                                 playpauseButton.removeClass( "ui-play-icon" ).addClass( "ui-pause-icon" );
 377                         }).bind( "pause.multimediaview", function ( e ) {
 378                                 playpauseButton.removeClass( "ui-pause-icon" ).addClass( "ui-play-icon" );
 379                         }).bind( "ended.multimediaview", function ( e ) {
 380                                 if ( typeof viewElement.loop == "undefined" || viewElement.loop === "" ) {
 381                                         self.stop();
 382                                 }
 383                         }).bind( "volumechange.multimediaview", function ( e ) {
 384                                 if ( viewElement.muted && viewElement.volume > 0.1 ) {
 385                                         volumeButton.removeClass( "ui-volume-icon" ).addClass( "ui-mute-icon" );
 386                                         self._reserveVolume = viewElement.volume;
 387                                         viewElement.volume = 0;
 388                                 } else if ( self._reserveVolume !== -1 && !viewElement.muted ) {
 389                                         volumeButton.removeClass( "ui-mute-icon" ).addClass( "ui-volume-icon" );
 390                                         viewElement.volume = self._reserveVolume;
 391                                         self._reserveVolume = -1;
 392                                 } else if ( viewElement.volume < 0.1 ) {
 393                                         volumeButton.removeClass( "ui-volume-icon" ).addClass( "ui-mute-icon" );
 394                                 } else {
 395                                         volumeButton.removeClass( "ui-mute-icon" ).addClass( "ui-volume-icon" );
 396                                 }
 397
 398                                 if ( !self.isVolumeHide ) {
 399                                         self._updateVolumeState();
 400                                 }
 401                         }).bind( "durationchange.multimediaview", function ( e ) {
 402                                 if ( !isNaN( viewElement.duration ) ) {
 403                                         durationLabel.find( "p" ).text( self._convertTimeFormat( viewElement.duration ) );
 404                                 }
 405                                 self._resize();
 406                         }).bind( "click.multimediaview", function ( e ) {
 407                                 if ( !self.options.controls ) {
 408                                         return;
 409                                 }
 410
 411                                 control.fadeToggle( "fast", function () {
 412                                         self.isControlHide = !self.isControlHide;
 413                                 });
 414                                 self._resize();
 415                         });
 416
 417                         playpauseButton.bind( "click.multimediaview", function () {
 418                                 self._endTimer();
 419
 420                                 if ( viewElement.paused ) {
 421                                         viewElement.play();
 422                                 } else {
 423                                         viewElement.pause();
 424                                 }
 425
 426                                 if ( isVideo ) {
 427                                         self._startTimer();
 428                                 }
 429                         });
 430
 431                         fullscreenButton.bind( "click.multimediaview", function ( e ) {
 432                                 self.fullScreen( !self.options.fullScreen );
 433                                 control.fadeIn( "fast", function () {
 434                                         self._resize();
 435                                 });
 436                                 self._endTimer();
 437                                 e.stopPropagation();
 438                         });
 439
 440                         seekBar.bind( "vmousedown.multimediaview", function ( e ) {
 441                                 var x = e.clientX,
 442                                         duration = viewElement.duration,
 443                                         durationOffset = durationBar.offset(),
 444                                         durationWidth = durationBar.width(),
 445                                         timerate = ( x - durationOffset.left ) / durationWidth,
 446                                         time = duration * timerate;
 447
 448                                 if ( !viewElement.played.length ) {
 449                                         return;
 450                                 }
 451
 452                                 viewElement.currentTime = time;
 453
 454                                 self._endTimer();
 455
 456                                 e.preventDefault();
 457
 458                                 $document.bind( "vmousemove.multimediaview", function ( e ) {
 459                                         var x = e.clientX,
 460                                                 timerate = ( x - durationOffset.left ) / durationWidth;
 461
 462                                         viewElement.currentTime = duration * timerate;
 463
 464                                         e.preventDefault();
 465                                 }).bind( "vmouseup.multimediaview", function () {
 466                                         $document.unbind( "vmousemove.multimediaview vmouseup.multimediaview" );
 467                                         if ( viewElement.paused ) {
 468                                                 viewElement.pause();
 469                                         } else {
 470                                                 viewElement.play();
 471                                         }
 472                                 });
 473                         });
 474
 475                         volumeButton.bind( "click.multimediaview", function () {
 476                                 if ( self.isVolumeHide ) {
 477                                         var view = self.element,
 478                                                 volume = viewElement.volume;
 479
 480                                         self.isVolumeHide = false;
 481                                         volumeControl.fadeIn( "fast", function () {
 482                                                 self._updateVolumeState();
 483                                                 self._updateSeekBar();
 484                                         });
 485                                         self._resize();
 486                                 } else {
 487                                         self.isVolumeHide = true;
 488                                         volumeControl.fadeOut( "fast", function () {
 489                                                 self._resize();
 490                                         });
 491                                 }
 492                         });
 493
 494                         volumeBar.bind( "vmousedown.multimediaview", function ( e ) {
 495                                 var baseX = e.clientX,
 496                                         volumeGuideLeft = volumeGuide.offset().left,
 497                                         volumeGuideWidth = volumeGuide.width(),
 498                                         volumeBase = volumeGuideLeft + volumeGuideWidth,
 499                                         handlerOffset = volumeHandle.offset(),
 500                                         volumerate = ( baseX - volumeGuideLeft ) / volumeGuideWidth,
 501                                         currentVolume = ( baseX - volumeGuideLeft ) / volumeGuideWidth;
 502
 503                                 self._endTimer();
 504                                 self._setVolume( currentVolume.toFixed( 2 ) );
 505
 506                                 e.preventDefault();
 507
 508                                 $document.bind( "vmousemove.multimediaview", function ( e ) {
 509                                         var currentX = e.clientX,
 510                                                 currentVolume = ( currentX - volumeGuideLeft ) / volumeGuideWidth;
 511
 512                                         self._setVolume( currentVolume.toFixed( 2 ) );
 513
 514                                         e.preventDefault();
 515                                 }).bind( "vmouseup.multimediaview", function () {
 516                                         $document.unbind( "vmousemove.multimediaview vmouseup.multimediaview" );
 517                                 });
 518                         });
 519                 },
 520
 521                 _removeEvent: function () {
 522                         var view = this.element,
 523                                 control = view.parent( ".ui-multimediaview-wrap" ).find( ".ui-multimediaview-control" ),
 524                                 playpauseButton = control.find( ".ui-playpausebutton" ),
 525                                 fullscreenButton = control.find( ".ui-fullscreenbutton" ),
 526                                 seekBar = control.find( ".ui-seekbar" ),
 527                                 volumeControl = control.find( ".ui-volumecontrol" ),
 528                                 volumeBar = volumeControl.find( ".ui-volumebar" ),
 529                                 volumeHandle = volumeControl.find( ".ui-handle" );
 530
 531                         view.unbind( ".multimediaview" );
 532                         playpauseButton.unbind( ".multimediaview" );
 533                         fullscreenButton.unbind( ".multimediaview" );
 534                         seekBar.unbind( ".multimediaview" );
 535                         volumeBar.unbind( ".multimediaview" );
 536                         volumeHandle.unbind( ".multimediaview" );
 537                 },
 538
 539                 _createControl: function () {
 540                         var view = this.element,
 541                                 viewElement = view[0],
 542                                 control = $( "<span></span>" ).addClass( "ui-multimediaview-control" ),
 543                                 playpauseButton = $( "<span></span>" ).addClass( "ui-playpausebutton ui-button" ),
 544                                 seekBar = $( "<span></span>" ).addClass( "ui-seekbar ui-multimediaview-bar" ),
 545                                 timestampLabel = $( "<span><p>00:00:00</p></span>" ).addClass( "ui-timestamplabel" ),
 546                                 durationLabel = $( "<span><p>00:00:00</p></span>" ).addClass( "ui-durationlabel" ),
 547                                 volumeButton = $( "<span></span>" ).addClass( "ui-volumebutton ui-button" ),
 548                                 volumeControl = $( "<span></span>" ).addClass( "ui-volumecontrol" ),
 549                                 volumeBar = $( "<div></div>" ).addClass( "ui-volumebar ui-multimediaview-bar" ),
 550                                 volumeGuide = $( "<span></span>" ).addClass( "ui-guide ui-multimediaview-bar-bg" ),
 551                                 volumeValue = $( "<span></span>" ).addClass( "ui-value ui-multimediaview-bar-highlight" ),
 552                                 volumeHandle = $( "<span></span>" ).addClass( "ui-handle" ),
 553                                 fullscreenButton = $( "<span></span>" ).addClass( "ui-fullscreenbutton ui-button" ),
 554                                 durationBar = $( "<span></span>" ).addClass( "ui-duration ui-multimediaview-bar-bg" ),
 555                                 currenttimeBar = $( "<span></span>" ).addClass( "ui-currenttime ui-multimediaview-bar-highlight" );
 556
 557                         seekBar.append( durationBar ).append( currenttimeBar ).append( durationLabel ).append( timestampLabel );
 558
 559                         playpauseButton.addClass( "ui-play-icon" );
 560                         volumeButton.addClass( viewElement.muted ? "ui-mute-icon" : "ui-volume-icon" );
 561                         volumeBar.append( volumeGuide ).append( volumeValue ).append( volumeHandle );
 562                         volumeControl.append( volumeBar );
 563
 564                         control.append( playpauseButton ).append( seekBar ).append( volumeControl ).append( volumeButton );
 565
 566                         if ( this._isVideo ) {
 567                                 $( fullscreenButton ).addClass( "ui-fullscreen-on" );
 568                                 control.append( fullscreenButton );
 569                         }
 570                         volumeControl.hide();
 571
 572                         return control;
 573                 },
 574
 575                 _startTimer: function ( duration ) {
 576                         this._endTimer();
 577
 578                         if ( !duration ) {
 579                                 duration = 3000;
 580                         }
 581
 582                         var self = this,
 583                                 view = self.element,
 584                                 control = view.parent( ".ui-multimediaview-wrap" ).find( ".ui-multimediaview-control" ),
 585                                 volumeControl = control.find( ".ui-volumecontrol" );
 586
 587                         self.controlTimer = setTimeout( function () {
 588                                 self.isVolumeHide = true;
 589                                 self.isControlHide = true;
 590                                 self.controlTimer = null;
 591                                 volumeControl.hide();
 592                                 control.fadeOut( "fast" );
 593                         }, duration );
 594                 },
 595
 596                 _endTimer: function () {
 597                         if ( this.controlTimer ) {
 598                                 clearTimeout( this.controlTimer );
 599                                 this.controlTimer = null;
 600                         }
 601                 },
 602
 603                 _convertTimeFormat: function ( systime ) {
 604                         if ( isNaN( systime ) ) {
 605                                 return "00:00:00";
 606                         }
 607
 608                         var ss = parseInt( systime % 60, 10 ).toString(),
 609                                 mm = parseInt( ( systime / 60 ) % 60, 10 ).toString(),
 610                                 hh = parseInt( systime / 3600, 10 ).toString(),
 611                                 time =  ( ( hh.length < 2  ) ? "0" + hh : hh ) + ":" +
 612                                                 ( ( mm.length < 2  ) ? "0" + mm : mm ) + ":" +
 613                                                 ( ( ss.length < 2  ) ? "0" + ss : ss );
 614
 615                         return time;
 616                 },
 617
 618                 _updateSeekBar: function ( currenttime ) {
 619                         var view = this.element,
 620                                 viewElement = view[0],
 621                                 duration = viewElement.duration,
 622                                 control = view.parent( ".ui-multimediaview-wrap" ).find( ".ui-multimediaview-control" ),
 623                                 seekBar = control.find(  ".ui-seekbar"  ),
 624                                 durationBar = seekBar.find( ".ui-duration" ),
 625                                 currenttimeBar = seekBar.find( ".ui-currenttime" ),
 626                                 timestampLabel = control.find( ".ui-timestamplabel" ),
 627                                 durationOffset = durationBar.offset(),
 628                                 durationWidth = durationBar.width(),
 629                                 durationHeight = durationBar.height(),
 630                                 timebarWidth = 0;
 631
 632                         if ( typeof currenttime === "undefined" ) {
 633                                 currenttime = viewElement.currentTime;
 634                         }
 635                         timebarWidth = parseInt( currenttime / duration * durationWidth, 10 );
 636                         durationBar.offset( durationOffset );
 637                         currenttimeBar.offset( durationOffset ).width( timebarWidth );
 638                         timestampLabel.find( "p" ).text( this._convertTimeFormat( currenttime ) );
 639                 },
 640
 641                 _updateVolumeState: function () {
 642                         var view = this.element,
 643                                 control = view.parent( ".ui-multimediaview-wrap" ).find( ".ui-multimediaview-control" ),
 644                                 volumeControl = control.find( ".ui-volumecontrol" ),
 645                                 volumeButton = control.find( ".ui-volumebutton" ),
 646                                 volumeBar = volumeControl.find( ".ui-volumebar" ),
 647                                 volumeGuide = volumeControl.find( ".ui-guide" ),
 648                                 volumeValue = volumeControl.find( ".ui-value" ),
 649                                 volumeHandle = volumeControl.find( ".ui-handle" ),
 650                                 handlerWidth = volumeHandle.width(),
 651                                 handlerHeight = volumeHandle.height(),
 652                                 volumeGuideHeight = volumeGuide.height(),
 653                                 volumeGuideWidth = volumeGuide.width(),
 654                                 volumeGuideTop = 0,
 655                                 volumeGuideLeft = 0,
 656                                 volumeBase = 0,
 657                                 handlerOffset = null,
 658                                 volume = view[0].volume;
 659
 660                         volumeGuideTop = parseInt( volumeGuide.offset().top, 10 );
 661                         volumeGuideLeft = parseInt( volumeGuide.offset().left, 10 );
 662                         volumeBase = volumeGuideLeft;
 663                         handlerOffset = volumeHandle.offset();
 664                         handlerOffset.top = volumeGuideTop - parseInt( ( handlerHeight - volumeGuideHeight ) / 2, 10 );
 665                         handlerOffset.left = volumeBase + parseInt( volumeGuideWidth * volume, 10 ) - parseInt( handlerWidth / 2, 10 );
 666                         volumeHandle.offset( handlerOffset );
 667                         volumeValue.offset( volumeGuide.offset() ).width( parseInt( volumeGuideWidth * ( volume ), 10 ) );
 668                 },
 669
 670                 _setVolume: function ( value ) {
 671                         var viewElement = this.element[0];
 672
 673                         if ( value < 0.0 || value > 1.0 ) {
 674                                 return;
 675                         }
 676
 677                         viewElement.volume = value;
 678                 },
 679
 680                 _fitContentArea: function ( page, parent ) {
 681                         if ( typeof parent === "undefined" ) {
 682                                 parent = window;
 683                         }
 684
 685                         var $page = $( page ),
 686                                 $content = $( ".ui-content:visible:first" ),
 687                                 hh = $( ".ui-header:visible" ).outerHeight() || 0,
 688                                 fh = $( ".ui-footer:visible" ).outerHeight() || 0,
 689                                 pt = parseFloat( $content.css( "padding-top" ) ),
 690                                 pb = parseFloat( $content.css( "padding-bottom" ) ),
 691                                 wh = ( ( parent === window ) ? window.innerHeight : $( parent ).height() ),
 692                                 height = wh - ( hh + fh ) - ( pt + pb );
 693
 694                         $content.offset( {
 695                                 top: ( hh + pt )
 696                         }).height( height );
 697                 },
 698
 699                 width: function ( value ) {
 700                         var view = this.element;
 701
 702                         if ( arguments.length === 0 ) {
 703                                 return view.width();
 704                         }
 705
 706                         view.width( value );
 707                         this._resize();
 708                 },
 709
 710                 height: function ( value ) {
 711                         var view = this.element;
 712
 713                         if ( !this._isVideo ) {
 714                                 return;
 715                         }
 716
 717                         if ( arguments.length === 0 ) {
 718                                 return view.height();
 719                         }
 720
 721                         view.height( value );
 722                         this._resize();
 723                 },
 724
 725                 fullScreen: function ( value ) {
 726                         var view = this.element,
 727                                 option = this.options,
 728                                 control = view.parent( ".ui-multimediaview-wrap" ).find( ".ui-multimediaview-control" ),
 729                                 fullscreenButton = control.find( ".ui-fullscreenbutton" ),
 730                                 currentPage = $( ".ui-page-active" );
 731
 732                         if ( arguments.length === 0 ) {
 733                                 return option.fullScreen;
 734                         }
 735
 736                         view.parents( ".ui-scrollview-clip" ).scrollview( "scrollTo", 0, 0 );
 737
 738                         this.options.fullScreen = value;
 739                         if ( value ) {
 740                                 currentPage.children( ".ui-header" ).hide();
 741                                 currentPage.children( ".ui-footer" ).hide();
 742                                 view.parents().addClass( "ui-fullscreen-parents" );
 743                                 this._fitContentArea( currentPage );
 744                                 fullscreenButton.removeClass( "ui-fullscreen-on" ).addClass( "ui-fullscreen-off" );
 745                         } else {
 746                                 currentPage.children( ".ui-header" ).show();
 747                                 currentPage.children( ".ui-footer" ).show();
 748                                 view.parents().removeClass( "ui-fullscreen-parents" );
 749                                 this._fitContentArea( currentPage );
 750                                 fullscreenButton.removeClass( "ui-fullscreen-off" ).addClass( "ui-fullscreen-on" );
 751                         }
 752                         this._resize();
 753                 },
 754
 755                 refresh: function () {
 756                         this._resize();
 757                 }
 758         });
 759
 760         $( document ).bind( "pagecreate create", function ( e ) {
 761                 $.tizen.multimediaview.prototype.enhanceWithin( e.target );
 762         });
 763 } ( jQuery, document, window ) );
 764
 765 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
 766 } );
 767 //>>excludeEnd("jqmBuildExclude");