front_idill/src/mosaic/js/mosaic.js
changeset 83 6070a596014e
parent 79 9eff85166868
child 87 34afef0f9e18
equal deleted inserted replaced
82:d1ddacf71b9e 83:6070a596014e
    44     this.fillingIds = [];
    44     this.fillingIds = [];
    45     this.currentRandomVideoIdx = 0;
    45     this.currentRandomVideoIdx = 0;
    46     
    46     
    47     //Dictionnaire pour les courbes de recherche.
    47     //Dictionnaire pour les courbes de recherche.
    48     this.dictionary = [];
    48     this.dictionary = [];
    49 	
    49     
    50 	//Strings des notifications.
    50     //Strings des notifications.
    51 	this.notificationStrings = {
    51     this.notificationStrings = {
    52 	"select":"Select", 
    52     "select":"Select", 
    53 	"confirm":"Confirm", 
    53     "confirm":"Confirm", 
    54 	"timeline":"Timeline move", 
    54     "timeline":"Timeline move", 
    55 	"move":"Move", 
    55     "move":"Move", 
    56 	"search":"Search", 
    56     "search":"Search", 
    57 	"next":"Next", 
    57     "next":"Next", 
    58 	"previous":"Previous", 
    58     "previous":"Previous", 
    59 	"unzoom":"Unzoom", 
    59     "unzoom":"Unzoom", 
    60 	"unknown":"Unknown gesture", 
    60     "unknown":"Unknown gesture", 
    61 	"fall":"Fall", 
    61     "fall":"Fall", 
    62 	"jump":"Jump", 
    62     "jump":"Jump", 
    63 	"spin":"Spin", 
    63     "spin":"Spin", 
    64 	"screw":"Screw", 
    64     "screw":"Screw", 
    65 	"bend":"Bend", 
    65     "bend":"Bend", 
    66 	"arc":"Arc", 
    66     "arc":"Arc", 
    67 	"knee_up":"Knee up", 
    67     "knee_up":"Knee up", 
    68 	"breakdance":"Breakdance", 
    68     "breakdance":"Breakdance", 
    69 	"wave":"Wave", 
    69     "wave":"Wave", 
    70 	"no_motion":"No motion", 
    70     "no_motion":"No motion", 
    71 	"contact":"Contact"};
    71     "contact":"Contact"};
    72 	
    72     
    73 	this.helpText = {
    73     this.helpText = {
    74 	"search_title":"Search", 
    74     "search_title":"Search", 
    75 	"search_2hands_text":"Curves to be drawn with both hands",  
    75     "search_2hands_text":"Curves to be drawn with both hands",  
    76 	"search_mouse_text":"Curves to be mouse-drawn",  
    76     "search_mouse_text":"Curves to be mouse-drawn",  
    77 	"search_body_text":"Gestures to be performed with your body", 
    77     "search_body_text":"Gestures to be performed with your body", 
    78 	"controls_title":"Controls", 
    78     "controls_title":"Controls", 
    79 	"controls_1hand_text":"Gestures to be performed with your hand", 
    79     "controls_1hand_text":"Gestures to be performed with your hand", 
    80 	"controls_timeline":"Move in timeline", 
    80     "controls_timeline":"Move in timeline", 
    81 	"controls_mos_horizontal":"Unzoom", 
    81     "controls_mos_horizontal":"Unzoom", 
    82 	"controls_mos_vertical":"Unzoom", 
    82     "controls_mos_vertical":"Unzoom", 
    83 	"controls_move_down":"Move", 
    83     "controls_move_down":"Move", 
    84 	"controls_move_left":"Move", 
    84     "controls_move_left":"Move", 
    85 	"controls_move_right":"Move", 
    85     "controls_move_right":"Move", 
    86 	"controls_move_up":"Move", 
    86     "controls_move_up":"Move", 
    87 	"controls_next":"Next", 
    87     "controls_next":"Next", 
    88 	"controls_previous":"Previous", 
    88     "controls_previous":"Previous", 
    89 	"controls_selection":"Selection"
    89     "controls_selection":"Selection"
    90 	}
    90     }
    91     
    91     
    92     //Dernières positions des pointeurs.
    92     //Dernières positions des pointeurs.
    93     this.mainPointerLastX = null;
    93     this.mainPointerLastX = null;
    94     this.mainPointerLastY = null;
    94     this.mainPointerLastY = null;
    95     this.secondPointerLastX = null;
    95     this.secondPointerLastX = null;
   108     this.mousePosLastY = null;
   108     this.mousePosLastY = null;
   109     //Valeur du déplacement entre un mouse up et un mouse down.
   109     //Valeur du déplacement entre un mouse up et un mouse down.
   110     this.mouseUpDownDelta = 0;
   110     this.mouseUpDownDelta = 0;
   111     //Valeur du déplacement entre un touch start et un touch end.
   111     //Valeur du déplacement entre un touch start et un touch end.
   112     this.touchUpDownDelta = 0;
   112     this.touchUpDownDelta = 0;
   113 	//Coordonnées de la souris au dernier mouse down.
   113     //Coordonnées de la souris au dernier mouse down.
   114 	this.mouseDownPosX = null;
   114     this.mouseDownPosX = null;
   115 	this.mouseDownPosY = null;
   115     this.mouseDownPosY = null;
   116     
   116     
   117     //Dimensions de la mosaïque en pixels.
   117     //Dimensions de la mosaïque en pixels.
   118     this.width = null;
   118     this.width = null;
   119     this.height = null;
   119     this.height = null;
   120     //Dimensions d'un snapshot en pixels.
   120     //Dimensions d'un snapshot en pixels.
   187     this.gestureDelRequested = false;
   187     this.gestureDelRequested = false;
   188     //Code de gesture actuellement calculé par les détecteurs de courbes.
   188     //Code de gesture actuellement calculé par les détecteurs de courbes.
   189     this.actualCode = '';
   189     this.actualCode = '';
   190     //Indique si l'utilisateur est entré dans la zone de recherche.
   190     //Indique si l'utilisateur est entré dans la zone de recherche.
   191     this.isUserInSearchZone = false;
   191     this.isUserInSearchZone = false;
   192 	//Indique si on a fait un mouse down.
   192     //Indique si on a fait un mouse down.
   193 	this.isMouseDown = false;
   193     this.isMouseDown = false;
   194 	//Indique si on a fait un touch start.
   194     //Indique si on a fait un touch start.
   195 	this.isTouchStart = false;
   195     this.isTouchStart = false;
   196 	//Indique si on a fait un touch move.
   196     //Indique si on a fait un touch move.
   197 	this.isTouchMove = false;
   197     this.isTouchMove = false;
   198 	//Indique si on est en train de prézoomer.
   198     //Indique si on est en train de prézoomer.
   199 	this.isPrezooming = false;
   199     this.isPrezooming = false;
   200 	//Indique si l'icone d'aide a été agrandie.
   200     //Indique si l'icone d'aide a été agrandie.
   201 	this.isHelpIconZoomed = false;
   201     this.isHelpIconZoomed = false;
   202 	//Indique si l'icone d'aide est dans une interaction de zoom/dezoom en cours.
   202     //Indique si l'icone d'aide est dans une interaction de zoom/dezoom en cours.
   203 	this.isHelpIconZooming = false;
   203     this.isHelpIconZooming = false;
   204 	//Indique à l'utilisateur s'il doit retirer ses mains pour refaire une recherche par courbes.
   204     //Indique à l'utilisateur s'il doit retirer ses mains pour refaire une recherche par courbes.
   205 	this.mustTakeOutHands = false;
   205     this.mustTakeOutHands = false;
   206 	//Indique qu'une vidéo est en lecture.
   206     //Indique qu'une vidéo est en lecture.
   207 	this.isVideoReading = false;
   207     this.isVideoReading = false;
   208 	
   208     
   209 	//Indique si on est sur une tablette.
   209     //Indique si on est sur une tablette.
   210 	this.isTablet = ('ontouchstart' in document.documentElement);
   210     this.isTablet = ('ontouchstart' in document.documentElement);
   211     
   211     
   212     //Timeout (attente) pour le zoom après un préZoom.
   212     //Timeout (attente) pour le zoom après un préZoom.
   213     this.zoomTimeout = null;
   213     this.zoomTimeout = null;
   214     //Timeout (attente) pour le passage vers un voisin.
   214     //Timeout (attente) pour le passage vers un voisin.
   215     this.moveToNeighbourTimeout = null;
   215     this.moveToNeighbourTimeout = null;
   305  * Est appelé dans le fichier :
   305  * Est appelé dans le fichier :
   306  * mosaic > fonction loadMosaic, afin de créer les éléments visuels de la mosaique.
   306  * mosaic > fonction loadMosaic, afin de créer les éléments visuels de la mosaique.
   307  */
   307  */
   308 Mosaic.prototype.createMosaic = function()
   308 Mosaic.prototype.createMosaic = function()
   309 {
   309 {
   310 	var _this = this;
   310     var _this = this;
   311 	
   311     
   312     //On ajoute le player au body pour le lancer la première fois qu'on zoom.
   312     //On ajoute le player au body pour le lancer la première fois qu'on zoom.
   313 	$('body').append('<div class="player" id="video"></div><div class="LdtPlayer" id="LdtPlayer"></div>');
   313     $('body').append('<div class="player" id="video"></div><div class="LdtPlayer" id="LdtPlayer"></div>');
   314 	
   314     
   315 	//On recharge la fenêtre si sa taille a changé.
   315     //On recharge la fenêtre si sa taille a changé si on n'est pas sur une tablette (car le resize est désactivé dans le mode d'interaction pour tablettes).
   316 	$(window).resize(function()
   316     if(!this.isTablet)
   317 	{
   317     {
   318 		// _.debounce(window.location.reload(), _this.config.timeReloadAfterResize);
   318         $(window).resize(function()
   319 	});
   319         {
   320 	
   320             _.debounce(window.location.reload(), _this.config.timeReloadAfterResize);
       
   321         });
       
   322     }
       
   323     
   321     var initPanel = '<div id="initPanel"></div>';
   324     var initPanel = '<div id="initPanel"></div>';
   322     var mp = $('#mainPanel');
   325     var mp = $('#mainPanel');
   323     mp.append(initPanel);
   326     mp.append(initPanel);
   324     $('#initPanel').css(
   327     $('#initPanel').css(
   325     {
   328     {
   378     
   381     
   379     //On affecte les chemins vers les images à la mosaïque.
   382     //On affecte les chemins vers les images à la mosaïque.
   380     this.previousZoomedSN;
   383     this.previousZoomedSN;
   381     //On met à jour la mosaïque.
   384     //On met à jour la mosaïque.
   382     $('#mainPanel').html(createMosaic);
   385     $('#mainPanel').html(createMosaic);
   383 	//On ajoute le panneau de protection (principalement pour le mode tablettes).
   386     //On ajoute le panneau de protection (principalement pour le mode tablettes).
   384 	$('body').append('<div id="ghostPanel"></div>');
   387     $('body').append('<div id="ghostPanel"></div>');
   385     //On récupère la taille des bordures.
   388     //On récupère la taille des bordures.
   386     this.marginWidth = $('.snapshotDivs').css('margin-bottom');
   389     this.marginWidth = $('.snapshotDivs').css('margin-bottom');
   387     this.marginWidth = parseFloat(this.marginWidth)*2;
   390     this.marginWidth = parseFloat(this.marginWidth)*2;
   388     //On calcule la taille des divs contenant les snapshots.
   391     //On calcule la taille des divs contenant les snapshots.
   389     this.width = $('#mainPanel').innerWidth();
   392     this.width = $('#mainPanel').innerWidth();
   435                 // console.log(_this.annotations.length + ' annotations loaded from ' + nbFichiers + ' files.');
   438                 // console.log(_this.annotations.length + ' annotations loaded from ' + nbFichiers + ' files.');
   436                 
   439                 
   437                 //Si on gère les interactions à la souris.
   440                 //Si on gère les interactions à la souris.
   438                 if(_this.config.mouseInteractions)
   441                 if(_this.config.mouseInteractions)
   439                 {
   442                 {
   440 					//On bind les événements utiles.
   443                     //On bind les événements utiles.
   441 					_this.eventBinder();
   444                     _this.eventBinder();
   442                 }
   445                 }
   443                 
   446                 
   444                 //Si on a activé la préphase mais qu'on est en mode Kinect.
   447                 //Si on a activé la préphase mais qu'on est en mode Kinect.
   445                 if(_this.config.noUserModeEnabled && !_this.config.mouseInteractions)
   448                 if(_this.config.noUserModeEnabled && !_this.config.mouseInteractions)
   446                 {
   449                 {
   466 /*
   469 /*
   467  * Bind les événements souris ou touch dans le mode d'interaction souris.
   470  * Bind les événements souris ou touch dans le mode d'interaction souris.
   468 */
   471 */
   469 Mosaic.prototype.eventBinder = function()
   472 Mosaic.prototype.eventBinder = function()
   470 {
   473 {
   471 	var _this = this;
   474     var _this = this;
   472 	
   475     
   473 	//On affiche l'icone d'aide.
   476     //On affiche l'icone d'aide.
   474 	this.helpIcon();
   477     this.helpIcon();
   475 	
   478     
   476 	//Si on est sur tablette, on utilise l'événement touch start.
   479     //Si on est sur tablette, on utilise l'événement touch start.
   477 	if(this.isTablet)
   480     if(this.isTablet)
   478 	{
   481     {
   479 		document.addEventListener('touchstart', function(e)
   482         document.addEventListener('touchstart', function(e)
   480 		{
   483         {
   481 			if(e.touches.length == 1)
   484             if(e.touches.length == 1)
   482 			{
   485             {
   483 				var touch = e.touches[0];
   486                 var touch = e.touches[0];
   484 				_this.onTouchStart(touch);
   487                 _this.onTouchStart(touch);
   485 			}
   488             }
   486 			e.preventDefault();
   489             e.preventDefault();
   487 		}, false);
   490         }, false);
   488 	}
   491     }
   489 	//Sinon souris.
   492     //Sinon souris.
   490 	else
   493     else
   491 	{
   494     {
   492 		//Si on fait un mouse down sur le body, on vérifie enregistre le déplacement de la souris jusqu'au prochain mouse up.
   495         //Si on fait un mouse down sur le body, on vérifie enregistre le déplacement de la souris jusqu'au prochain mouse up.
   493 		$(window).mousedown(function (e)
   496         $(window).mousedown(function (e)
   494 		{
   497         {
   495 			_this.onMouseDown(e);
   498             _this.onMouseDown(e);
   496 			return false;
   499             return false;
   497 		});
   500         });
   498 	}
   501     }
   499 	
   502     
   500 	//Si on est sur tablette, on utilise l'événement touch start.
   503     //Si on est sur tablette, on utilise l'événement touch start.
   501 	if(this.isTablet)
   504     if(this.isTablet)
   502 	{
   505     {
   503 		document.addEventListener('touchmove', function(e)
   506         document.addEventListener('touchmove', function(e)
   504 		{
   507         {
   505 			if(e.touches.length == 1)
   508             if(e.touches.length == 1)
   506 			{
   509             {
   507 				var touch = e.touches[0];
   510                 var touch = e.touches[0];
   508 				_this.refreshPointers(touch.pageX, touch.pageY, true);
   511                 _this.refreshPointers(touch.pageX, touch.pageY, true);
   509 				_this.mousePosX = touch.pageX;
   512                 _this.mousePosX = touch.pageX;
   510 				_this.mousePosY = touch.pageY;
   513                 _this.mousePosY = touch.pageY;
   511 				_this.onTouchMove(touch);
   514                 _this.onTouchMove(touch);
   512 			}
   515             }
   513 			e.preventDefault();
   516             e.preventDefault();
   514 		}, false);
   517         }, false);
   515 	}
   518     }
   516 	//Sinon souris.
   519     //Sinon souris.
   517 	else
   520     else
   518 	{
   521     {
   519 		//On écoute le déplacement de la souris.
   522         //On écoute le déplacement de la souris.
   520 		$(window).mousemove(function(e)
   523         $(window).mousemove(function(e)
   521 		{
   524         {
   522 			_this.refreshPointers(e.pageX, e.pageY, true);
   525             _this.refreshPointers(e.pageX, e.pageY, true);
   523 			_this.mousePosX = e.pageX;
   526             _this.mousePosX = e.pageX;
   524 			_this.mousePosY = e.pageY;
   527             _this.mousePosY = e.pageY;
   525 			_this.onMouseMove(e);
   528             _this.onMouseMove(e);
   526 			return false;
   529             return false;
   527 		});
   530         });
   528 	}
   531     }
   529 	
   532     
   530 	//Si on est sur tablette, on utilise l'événement touch start.
   533     //Si on est sur tablette, on utilise l'événement touch start.
   531 	if(this.isTablet)
   534     if(this.isTablet)
   532 	{
   535     {
   533 		document.addEventListener('touchend', function(e)
   536         document.addEventListener('touchend', function(e)
   534 		{
   537         {
   535 			_this.onTouchEnd(e);
   538             _this.onTouchEnd(e);
   536 			e.preventDefault();
   539             e.preventDefault();
   537 		}, false);
   540         }, false);
   538 	}
   541     }
   539 	//Sinon souris.
   542     //Sinon souris.
   540 	else
   543     else
   541 	{
   544     {
   542 		//Si on fait un mouse up après ce mouse down.
   545         //Si on fait un mouse up après ce mouse down.
   543 		$(window).mouseup(function()
   546         $(window).mouseup(function()
   544 		{
   547         {
   545 			_this.onMouseUp();
   548             _this.onMouseUp();
   546 			return false;
   549             return false;
   547 		});
   550         });
   548 	}
   551     }
   549 	
   552     
   550 	if(!this.isTablet)
   553     if(!this.isTablet)
   551 	{
   554     {
   552 		//Si on fait un clic.
   555         //Si on fait un clic.
   553 		$(window).click(function(e)
   556         $(window).click(function(e)
   554 		{
   557         {
   555 			_this.onClick(e.pageX, e.pageY);
   558             _this.onClick(e.pageX, e.pageY);
   556 			_this.removeSearchNotificationIfOnIt(e.pageX, e.pageY);
   559             _this.removeSearchNotificationIfOnIt(e.pageX, e.pageY);
   557 			return false;
   560             return false;
   558 		});
   561         });
   559 		
   562         
   560 		$(window).on('mousewheel', function(event, delta, deltaX, deltaY)
   563         $(window).on('mousewheel', function(event, delta, deltaX, deltaY)
   561 		{
   564         {
   562 			//Si on est dans un mode autre qu'on mode zoomé ou que l'aide est affichée, on part.
   565             //Si on est dans un mode autre qu'on mode zoomé ou que l'aide est affichée, on part.
   563 			if(_this.currentMode != "VIDEO" && _this.currentMode != "SEARCH" && _this.currentMode != "TIMELINE" || _this.helpDisplayed)
   566             if(_this.currentMode != "VIDEO" && _this.currentMode != "SEARCH" && _this.currentMode != "TIMELINE" || _this.helpDisplayed)
   564 			{
   567             {
   565 				return;
   568                 return;
   566 			}
   569             }
   567 			
   570             
   568 			//Quand on "tire" la molette vers soi, on dezoom.
   571             //Quand on "tire" la molette vers soi, on dezoom.
   569 			if (delta < 0)
   572             if (delta < 0)
   570 			{
   573             {
   571 				_this.unzoom();
   574                 _this.unzoom();
   572 			}
   575             }
   573 		});
   576         });
   574 	}
   577     }
   575 }
   578 }
   576 
   579 
   577 /*
   580 /*
   578  * Charge les paramètres du Front. Local (true/false) est le mode de chargement des données.
   581  * Charge les paramètres du Front. Local (true/false) est le mode de chargement des données.
   579  * Est appelé dans le fichier :
   582  * Est appelé dans le fichier :
   628                     _this.config[key] = floatVal;
   631                     _this.config[key] = floatVal;
   629                 }
   632                 }
   630             }
   633             }
   631             else
   634             else
   632             {
   635             {
   633 				//S'il s'agit de la langue, on met par défaut si la valeur est nulle.
   636                 //S'il s'agit de la langue, on met par défaut si la valeur est nulle.
   634 				if(key == 'lang' && val == '')
   637                 if(key == 'lang' && val == '')
   635 				{
   638                 {
   636 					_this.config[key] = _this.default_config[key];
   639                     _this.config[key] = _this.default_config[key];
   637 				}
   640                 }
   638                 //Sinon si c'est une string, on l'affecte.
   641                 //Sinon si c'est une string, on l'affecte.
   639 				else
   642                 else
   640 				{
   643                 {
   641 					_this.config[key] = val;
   644                     _this.config[key] = val;
   642 				}
   645                 }
   643             }
   646             }
   644         }
   647         }
   645         
   648         
   646         //On remplit le tableau d'ids.
   649         //On remplit le tableau d'ids.
   647         for(var i = 0 ; i < _this.config.totalImages ; i++)
   650         for(var i = 0 ; i < _this.config.totalImages ; i++)
   845         clearTimeout(this.nouserTimeout);
   848         clearTimeout(this.nouserTimeout);
   846         
   849         
   847         //Après un délai d'absence de l'utilisateur on redémarre.
   850         //Après un délai d'absence de l'utilisateur on redémarre.
   848         this.nouserTimeout = setTimeout(function()
   851         this.nouserTimeout = setTimeout(function()
   849         {
   852         {
   850             // window.location.reload();
   853             window.location.reload();
   851         }, this.config.timeoutNouser);
   854         }, this.config.timeoutNouser);
   852     }
   855     }
   853     //S'il n'y a qu'un snapshot à afficher et qu'on est en préphase, on redémarre.
   856     //S'il n'y a qu'un snapshot à afficher et qu'on est en préphase, on redémarre.
   854     else if((event == "NO-USER" || event == "INCOMING-0" || event == "INCOMING-1") && this.config.noUserModeEnabled)
   857     else if((event == "NO-USER" || event == "INCOMING-0" || event == "INCOMING-1") && this.config.noUserModeEnabled)
   855     {
   858     {
   856         // window.location.reload();
   859         window.location.reload();
   857     }
   860     }
   858     //Si on a fait un swipe.
   861     //Si on a fait un swipe.
   859     else if(event.indexOf("SWIPE") != -1)
   862     else if(event.indexOf("SWIPE") != -1)
   860     {
   863     {
   861         //Si le player est près et qu'on n'est pas en train de faire un swipe.
   864         //Si le player est près et qu'on n'est pas en train de faire un swipe.
   869             {
   872             {
   870                 //On passe à la prochaine vidéo qui contient des résultats.
   873                 //On passe à la prochaine vidéo qui contient des résultats.
   871                 this.playNextVideo();
   874                 this.playNextVideo();
   872             }
   875             }
   873             
   876             
   874 			//On spécifie s'il s'agit d'un swipe left ou right.
   877             //On spécifie s'il s'agit d'un swipe left ou right.
   875 			var swipeType = ((event.indexOf("LEFT") != -1) ? 'left' : 'right');
   878             var swipeType = ((event.indexOf("LEFT") != -1) ? 'left' : 'right');
   876 			var isSwipeLeft = ((event.indexOf("LEFT") != -1) ? true : false);
   879             var isSwipeLeft = ((event.indexOf("LEFT") != -1) ? true : false);
   877 			
   880             
   878 			//On passe au marqueur suivant/précédent en fonction du type de swipe.
   881             //On passe au marqueur suivant/précédent en fonction du type de swipe.
   879 			this.player.widgets[0].switchToMarker(isSwipeLeft, this.currentSearchGesture[this.centerId]);
   882             this.player.widgets[0].switchToMarker(isSwipeLeft, this.currentSearchGesture[this.centerId]);
   880 			//Si on est en mode vidéo.
   883             //Si on est en mode vidéo.
   881 			if(this.currentMode == 'VIDEO')
   884             if(this.currentMode == 'VIDEO')
   882 			{
   885             {
   883 				//On affiche la notification.
   886                 //On affiche la notification.
   884 				this.removeNotifications();
   887                 this.removeNotifications();
   885 				this.videoSwipe(swipeType);
   888                 this.videoSwipe(swipeType);
   886 			}
   889             }
   887 			//Si on est en mode recherche dans une vidéo et qu'on n'a pas de gesture de recherche.
   890             //Si on est en mode recherche dans une vidéo et qu'on n'a pas de gesture de recherche.
   888 			else if(this.currentMode == 'SEARCH' && this.currentSearchGesture[this.centerId] == '')
   891             else if(this.currentMode == 'SEARCH' && this.currentSearchGesture[this.centerId] == '')
   889 			{
   892             {
   890 				//On affiche la notification.
   893                 //On affiche la notification.
   891 				this.removeNotifications();
   894                 this.removeNotifications();
   892 				this.searchSearchAndSwipe(swipeType);
   895                 this.searchSearchAndSwipe(swipeType);
   893 			}
   896             }
   894 			//Si on est en mode recherche dans une vidéo et qu'on a une gesture de recherche.
   897             //Si on est en mode recherche dans une vidéo et qu'on a une gesture de recherche.
   895 			else if(this.currentMode == 'SEARCH' && this.currentSearchGesture[this.centerId] != '')
   898             else if(this.currentMode == 'SEARCH' && this.currentSearchGesture[this.centerId] != '')
   896 			{
   899             {
   897 				//On affiche la notification.
   900                 //On affiche la notification.
   898 				this.removeNotifications();
   901                 this.removeNotifications();
   899 				this.searchGestureAndSwipe(this.currentSearchGesture[this.centerId], 'valid', swipeType);
   902                 this.searchGestureAndSwipe(this.currentSearchGesture[this.centerId], 'valid', swipeType);
   900 			}
   903             }
   901             
   904             
   902             //On le fait disparaitre au bout d'un certain temps.
   905             //On le fait disparaitre au bout d'un certain temps.
   903             this.notifySwipeTimeout = setTimeout(function()
   906             this.notifySwipeTimeout = setTimeout(function()
   904             {
   907             {
   905                 _this.isSwipe = false;
   908                 _this.isSwipe = false;
   979  * Est appelé dans le fichier :
   982  * Est appelé dans le fichier :
   980  * mosaic > fonction loadPlayer.
   983  * mosaic > fonction loadPlayer.
   981 */
   984 */
   982 Mosaic.prototype.onPlayerLoad = function()
   985 Mosaic.prototype.onPlayerLoad = function()
   983 {
   986 {
   984 	var _this = this;
   987     var _this = this;
   985 	
   988     
   986 	if(this.currentMode == 'NO-USER')
   989     if(this.currentMode == 'NO-USER')
   987 	{
   990     {
   988 		//On peut s'approcher de la kinect.
   991         //On peut s'approcher de la kinect.
   989 		this.canStart = true;
   992         this.canStart = true;
   990 	}
   993     }
   991 	
   994     
   992 	//Lorsque le player est en pause (par exemple lorsque le curseur arrive à la fin de la timeline).
   995     //Lorsque le player est en pause (par exemple lorsque le curseur arrive à la fin de la timeline).
   993 	if(this.player.popcorn)
   996     if(this.player.popcorn)
   994 	{
   997     {
   995 		// this.player.popcorn.listen('pause', function()
   998         // this.player.popcorn.listen('pause', function()
   996 		this.player.popcorn.listen('ended', function()
   999         this.player.popcorn.listen('ended', function()
   997 		{
  1000         {
   998 			//Si la pause est naturelle (fin de la timeline, dézoom, déplacement vers un voisin).
  1001             //Si la pause est naturelle (fin de la timeline, dézoom, déplacement vers un voisin).
   999 			if(!_this.userPaused)
  1002             if(!_this.userPaused)
  1000 			{
  1003             {
  1001 				//Si c'est en mode sans utilisateur.
  1004                 //Si c'est en mode sans utilisateur.
  1002 				if(_this.currentMode == 'NO-USER')
  1005                 if(_this.currentMode == 'NO-USER')
  1003 				{
  1006                 {
  1004 					//On dézoome.
  1007                     //On dézoome.
  1005 					_this.unzoom();
  1008                     _this.unzoom();
  1006 				}
  1009                 }
  1007 				//Sinon, si ce n'est pas causé par un déplacement ou un dézoom.
  1010                 //Sinon, si ce n'est pas causé par un déplacement ou un dézoom.
  1008 				else if(!_this.currentlyMoving && !_this.currentlyUnzooming)
  1011                 else if(!_this.currentlyMoving && !_this.currentlyUnzooming)
  1009 				{
  1012                 {
  1010 					//Si on est en mode timeline et qu'on est en pause, c'est probablement que l'user a placé le curseur à la fin.
  1013                     //Si on est en mode timeline et qu'on est en pause, c'est probablement que l'user a placé le curseur à la fin.
  1011 					if(_this.currentMode != 'TIMELINE')
  1014                     if(_this.currentMode != 'TIMELINE')
  1012 					{
  1015                     {
  1013 						_this.playNextVideo();
  1016                         _this.playNextVideo();
  1014 					}
  1017                     }
  1015 				}
  1018                 }
  1016 			}
  1019             }
  1017 		});
  1020         });
  1018 		
  1021         
  1019 		//Si les marqueurs ont été chargés.
  1022         //Si les marqueurs ont été chargés.
  1020 		this.player.popcorn.on("markersready", function()
  1023         this.player.popcorn.on("markersready", function()
  1021 		{
  1024         {
  1022 			_this.onMarkersReady();
  1025             _this.onMarkersReady();
  1023 		});
  1026         });
  1024 		
  1027         
  1025 		//On indique à la mosaïque qu'on est en train de lire.
  1028         //On indique à la mosaïque qu'on est en train de lire.
  1026 		this.player.popcorn.on("timeupdate", function()
  1029         this.player.popcorn.on("timeupdate", function()
  1027 		{
  1030         {
  1028 			_this.isVideoReading = true;
  1031             _this.isVideoReading = true;
  1029 		})
  1032         })
  1030 	}
  1033     }
  1031 }
  1034 }
  1032 
  1035 
  1033 /*
  1036 /*
  1034  * Fonction qui s'exécute lorsque les marqueurs d'une video on été placés.
  1037  * Fonction qui s'exécute lorsque les marqueurs d'une video on été placés.
  1035  * Est appelé dans le fichier :
  1038  * Est appelé dans le fichier :
  1036  * mosaic > fonction onPlayerLoad.
  1039  * mosaic > fonction onPlayerLoad.
  1037 */
  1040 */
  1038 Mosaic.prototype.onMarkersReady = function()
  1041 Mosaic.prototype.onMarkersReady = function()
  1039 {
  1042 {
  1040 	var _this = this;
  1043     var _this = this;
  1041 	
  1044     
  1042 	//Le player est prêt.
  1045     //Le player est prêt.
  1043 	this.playerIsReady = true;
  1046     this.playerIsReady = true;
  1044 	
  1047     
  1045 	if(this.player.widgets[0])
  1048     if(this.player.widgets[0])
  1046 	{
  1049     {
  1047 		//On spécifie à la timeline dans quel mode d'intéraction on est.
  1050         //On spécifie à la timeline dans quel mode d'intéraction on est.
  1048 		this.player.widgets[0].setMouseInteractions(this.config.mouseInteractions);
  1051         this.player.widgets[0].setMouseInteractions(this.config.mouseInteractions);
  1049 		//Idem pour la langue.
  1052         //Idem pour la langue.
  1050 		if(this.gesturesText.length > 0)
  1053         if(this.gesturesText.length > 0)
  1051 		{
  1054         {
  1052 			this.player.widgets[0].setLang(this.gesturesText);
  1055             this.player.widgets[0].setLang(this.gesturesText);
  1053 		}
  1056         }
  1054 	}
  1057     }
  1055 	
  1058     
  1056 	//Si on est en mode video ou recherche ou timeline.
  1059     //Si on est en mode video ou recherche ou timeline.
  1057 	if(this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH' || this.currentMode == 'TIMELINE')
  1060     if(this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH' || this.currentMode == 'TIMELINE')
  1058 	{
  1061     {
  1059 		//On peut faire des swipes.
  1062         //On peut faire des swipes.
  1060 		this.canSwipe = true;
  1063         this.canSwipe = true;
  1061 	}
  1064     }
  1062 	
  1065     
  1063 	//Si aucune recherche par gesture n'est effectuée.
  1066     //Si aucune recherche par gesture n'est effectuée.
  1064 	if(this.currentSearchGesture[this.centerId] == '')
  1067     if(this.currentSearchGesture[this.centerId] == '')
  1065 	{
  1068     {
  1066 		//On enlève le filtre.
  1069         //On enlève le filtre.
  1067 		this.removeFilter();
  1070         this.removeFilter();
  1068 	}
  1071     }
  1069 	//Sinon.
  1072     //Sinon.
  1070 	else
  1073     else
  1071 	{
  1074     {
  1072 		//On entre en mode recherche dans une vidéo.
  1075         //On entre en mode recherche dans une vidéo.
  1073 		this.currentMode = 'SEARCH';
  1076         this.currentMode = 'SEARCH';
  1074 		//On recherche la gesture.
  1077         //On recherche la gesture.
  1075 		this.player.widgets[0].searchByGesture(this.currentSearchGesture[this.centerId]);
  1078         this.player.widgets[0].searchByGesture(this.currentSearchGesture[this.centerId]);
  1076 		this.isCurrentlyInASearchByGesture = this.player.widgets[0].isCurrentlyInASearchByGesture;
  1079         this.isCurrentlyInASearchByGesture = this.player.widgets[0].isCurrentlyInASearchByGesture;
  1077 		
  1080         
  1078 		//On va au premier marqueur trouvé.
  1081         //On va au premier marqueur trouvé.
  1079 		if(this.timeToGoAt[this.centerId] === 0 && this.player.widgets[0].atLeastOneSearchMarker(this.currentSearchGesture[this.centerId]))
  1082         if(this.timeToGoAt[this.centerId] === 0 && this.player.widgets[0].atLeastOneSearchMarker(this.currentSearchGesture[this.centerId]))
  1080 		{
  1083         {
  1081 			this.player.widgets[0].goToFirstSearchedMarker(this.currentSearchGesture[this.centerId]);
  1084             this.player.widgets[0].goToFirstSearchedMarker(this.currentSearchGesture[this.centerId]);
  1082 		}
  1085         }
  1083 		//Si aucun marqueur n'est trouvé.
  1086         //Si aucun marqueur n'est trouvé.
  1084 		else
  1087         else
  1085 		{
  1088         {
  1086 			//On va juste là où on était la dernière fois qu'on a joué la vidéo.
  1089             //On va juste là où on était la dernière fois qu'on a joué la vidéo.
  1087 			this.player.popcorn.currentTime(this.timeToGoAt[this.centerId]);
  1090             this.player.popcorn.currentTime(this.timeToGoAt[this.centerId]);
  1088 		}
  1091         }
  1089 	}
  1092     }
  1090 }
  1093 }
  1091 
  1094 
  1092 /*
  1095 /*
  1093  * Chargement du player basé sur le metadataplayer.
  1096  * Chargement du player basé sur le metadataplayer.
  1094  * Est appelé dans les fichiers :
  1097  * Est appelé dans les fichiers :
  1109     var _metadata = {
  1112     var _metadata = {
  1110         url: currentMetadata,
  1113         url: currentMetadata,
  1111         format: 'ldt'
  1114         format: 'ldt'
  1112     };
  1115     };
  1113     
  1116     
  1114 	var loadedWidgets;
  1117     var loadedWidgets;
  1115 	
  1118     
  1116 	if(this.isTablet)
  1119     if(this.isTablet)
  1117 	{
  1120     {
  1118 		loadedWidgets =
  1121         loadedWidgets =
  1119 		[
  1122         [
  1120 			{
  1123             {
  1121 				type: "Timeline"
  1124                 type: "Timeline"
  1122 			},
  1125             },
  1123 			{
  1126             {
  1124 				type: "TabletPlayButton"
  1127                 type: "TabletPlayButton"
  1125 			}
  1128             }
  1126 		];
  1129         ];
  1127 	}
  1130     }
  1128 	else
  1131     else
  1129 	{
  1132     {
  1130 		loadedWidgets =
  1133         loadedWidgets =
  1131 		[
  1134         [
  1132 			{
  1135             {
  1133 				type: "Timeline"
  1136                 type: "Timeline"
  1134 			}
  1137             }
  1135 		];
  1138         ];
  1136 	}
  1139     }
  1137 	
  1140     
  1138     var _config = {
  1141     var _config = {
  1139         gui: {
  1142         gui: {
  1140             zoomTop: zoomTop - this.marginWidth*2,
  1143             zoomTop: zoomTop - this.marginWidth*2,
  1141             zoomLeft: zoomLeft,
  1144             zoomLeft: zoomLeft,
  1142             width: newSnWidth,
  1145             width: newSnWidth,
  1155             live: true,
  1158             live: true,
  1156             height: newSnHeight,
  1159             height: newSnHeight,
  1157             width: newSnWidth,
  1160             width: newSnWidth,
  1158             autostart: true
  1161             autostart: true
  1159         },
  1162         },
  1160 		isTablet: this.isTablet
  1163         isTablet: this.isTablet
  1161     };
  1164     };
  1162     
  1165     
  1163     //On positionne le player.
  1166     //On positionne le player.
  1164     $('.LdtPlayer').css(
  1167     $('.LdtPlayer').css(
  1165     {
  1168     {
  1166         position: 'absolute',
  1169         position: 'absolute',
  1167         'background-color': '#000000',
  1170         'background-color': '#000000',
  1168         top: newZoomTop,
  1171         top: newZoomTop,
  1169         left: newZoomLeft,
  1172         left: newZoomLeft,
  1170 		'z-index': 500
  1173         'z-index': 500
  1171     });
  1174     });
  1172     
  1175     
  1173     //On démarre le player.
  1176     //On démarre le player.
  1174     this.player = null;
  1177     this.player = null;
  1175     
  1178