samples/web/Sample/Tizen/Web App/Modello_Multimediaplayer/project/js/main.js

   1 /*global MultimediaLibrary, Utils*/
   2
   3 /**
   4  * Multimedia player application allows user to play back audio and video content from local sources via
   5  * [tizen.content API](https://developer.tizen.org/dev-guide/2.2.1/org.tizen.web.device.apireference/tizen/content.html) and
   6  * remote DLNA content via [IVI WRT MediaServer API](https://review.tizen.org/git/?p=profile/ivi/wrt-plugins-ivi.git;a=tree;f=src/MediaServer).
   7  * Application uses HTML5 [audio](http://www.w3.org/wiki/HTML/Elements/audio) and [video](http://www.w3.org/wiki/HTML/Elements/video) elements
   8  * to playback content from sources.
   9  *
  10  * Upper part of application contains a media content carousel (carouFredSel) in case audio content is selected or a rendered video (HTML5 video element).
  11  *
  12  * Lower part of application contains basic information about played audio/video content like thumbnail, title, artist name, album name, duration and controls like play, pause, next, previous, volume.
  13  * Additionaly Multimedia player application can be controlled using speech recognition via {{#crossLink "Speech"}}{{/crossLink}} component.
  14  *
  15  * Audio/video content to be played can be selected from {{#crossLink "MultimediaLibrary"}}{{/crossLink}} component. Playback of audio and video content is controlled by {{#crossLink "AudioPlayer"}}{{/crossLink}} component.
  16  *
  17  * Hover and click on elements in images below to navigate to components of Multimedia Player application.
  18  *
  19  * <img id="Image-Maps_1201312180420487" src="../assets/img/music.png" usemap="#Image-Maps_1201312180420487" border="0" width="649" height="1152" alt="" />
  20  *   <map id="_Image-Maps_1201312180420487" name="Image-Maps_1201312180420487">
  21  *     <area shape="rect" coords="0,0,573,78" href="../classes/TopBarIcons.html" alt="top bar icons" title="Top bar icons" />
  22  *     <area shape="rect" coords="0,77,644,132" href="../classes/Clock.html" alt="clock" title="Clock"    />
  23  *     <area shape="rect" coords="0,994,644,1147" href="../classes/BottomPanel.html" alt="bottom panel" title="Bottom panel" />
  24  *     <area shape="rect" coords="573,1,644,76" href="../modules/Settings.html" alt="Settings" title="Settings"    />
  25  *     <area  shape="rect" coords="512,135,648,181" href="../classes/MultimediaLibrary.html" alt="Multimedia library" title="Multimedia library" />
  26  *     <area  shape="rect" coords="0,206,648,476" href="../classes/Carousel.html" alt="Multimedia carousel" title="Multimedia Carousel" />
  27  *     <area  shape="rect" coords="21,823,634,885" href="../classes/AudioPlayer.html#method_setVolumeControlSelector" alt="Volume control" title="Volume control" />
  28  *     <area  shape="rect" coords="23,890,636,961" href="../classes/AudioPlayer.html#method_setControlButtonsSelector" alt="Control buttons" title="Control buttons" />
  29  *     <area  shape="rect" coords="298,530,612,585" href="../classes/AudioPlayer.html#method_setTimeProgressBarSelector" alt="Time progress bar" title="Time progress bar" />
  30  *     <area  shape="rect" coords="297,589,611,721" href="../classes/AudioPlayer.html#method_setInfoPanelSelector" alt="Info panel" title="Info panel" />
  31  *     <area  shape="rect" coords="267,725,626,818" href="../classes/AudioPlayer.html#method_setSpectrumAnalyzerSelector" alt="Spectrum analyzer" title="Spectrum analyzer" />
  32  *     <area  shape="rect" coords="45,517,267,738" href="../classes/AudioPlayer.html#method_setThumbnailSelector" alt="Thumbnail" title="Thumbnail" />
  33  *   </map>
  34  *
  35  * @module MultimediaPlayerApplication
  36  * @main MultimediaPlayerApplication
  37  * @class MultimediaPlayer
  38  */
  39
  40  /**
  41  * Adds the listener object to receive notifications when the speech recognizer returns a speech command to control multimedia player: PLAY, STOP, NEXT, PREVIOUS.
  42  *
  43  * @method initVoiceRecognition
  44  */
  45 var initVoiceRecognition = function() {
  46     "use strict";
  47     /* global Speech */
  48     if (typeof (Speech) !== 'undefined') {
  49         Speech.addVoiceRecognitionListener({
  50             onplay : function() {
  51                 $('#multimediaPlayer').audioAPI('playPause', true);
  52             },
  53             onstop : function() {
  54                 $('#multimediaPlayer').audioAPI('playPause', false);
  55             },
  56             onnext : function() {
  57                 $('#multimediaPlayer').audioAPI('next');
  58                 $('#multimediaPlayer').audioAPI('playPause', true);
  59             },
  60             onprevious : function() {
  61                 $('#multimediaPlayer').audioAPI('previous');
  62                 $('#multimediaPlayer').audioAPI('playPause', true);
  63             }
  64         });
  65     } else {
  66         console.warn("Speech API is not available.");
  67     }
  68 };
  69
  70 /**
  71  * Method which provides methods to initialize UI and create listener for
  72  * changing themes of music player.
  73  *
  74  * @method init
  75  * @constructor
  76  */
  77 var bootstrap;
  78 var init = function() {
  79     "use strict";
  80     /*global Bootstrap */
  81     bootstrap = new Bootstrap(function(status) {
  82         $("#libraryButton").on("click", function() {
  83             MultimediaLibrary.show();
  84         });
  85
  86         $("#videoPlayer").on("click", function() {
  87             Utils.launchFullScreen(this);
  88         });
  89
  90         $("#topBarIcons").topBarIconsPlugin('init');
  91         $("#clockElement").ClockPlugin('init', 5);
  92         $("#clockElement").ClockPlugin('startTimer');
  93         $('#bottomPanel').bottomPanel('init');
  94
  95         $('#multimediaPlayer').audioAPI('setControlButtonsSelector', '#controlButtons');
  96         $('#multimediaPlayer').audioAPI('setTimeProgressBarSelector', '#timeBar');
  97         $('#multimediaPlayer').audioAPI('setSpectrumAnalyzerSelector', '#spectAnalyzer');
  98         $('#multimediaPlayer').audioAPI('setInfoPanelSelector', '#infoPanel');
  99         $('#multimediaPlayer').audioAPI('setThumbnailSelector', '#thumbnail');
 100         $('#multimediaPlayer').audioAPI('setVolumeControlSelector', '.noVolumeSlider');
 101         $('#multimediaPlayer').audioAPI('init', [], "#audioPlayer", "#videoPlayer");
 102
 103         MultimediaLibrary.init();
 104         initVoiceRecognition();
 105     });
 106 };
 107
 108 $(document).ready(function() {
 109     "use strict";
 110     // debug mode - window.setTimeout("init()", 20000);
 111     init();
 112 });