Best Practice for using scripts across scenes and layouts

I wrote my toggle screen that worked. Basically I want it to stop video and animation in
Scene2 (phone, desktop), video1
Scene 3 (phone, desktop), video2

Obviously I don't want four scripts. I notice ID's are unique for the ENTIRE animation, not local to the scene/layout. I could use classes, and playing with that. Is there a guideline or outline for doing this? Also, still looking for DOM guide (elements, attributes) for Hype/

Found the DOM (Yay)
kinda hidden at the bottom of the javascript editor. Now hopefully I can figure this out. Suggestions welcome.

@MaxZieb did an entry on this in his great wiki: https://github.com/worldoptimizer/HypeCookBook/wiki/Using-querySelector-instead-of-getElementById

Hypes general documentation:
https://tumult.com/hype/documentation/ <- includes JS API

Okay, I rewrote the SetPlayPause (which is launched at the start of the scene) as:
//alert('Here');
var thisPlayPause = element.querySelector('.PlayPause');;
thisPlayPause.innerHTML='Pause';
thisPlayPause.style.backgroundColor='#FE9470';

This works perfectly fine in the first scene and in the responsive layout. However, it does not work at all once I jump to the second scene. Will try looping through all elements in class whether they are visible or not...

Now, I got the initializer working... BUT the actual toggle is not working:

    > //alert('Hello');
> 	//find out where I am and them move forward
> 	
> 	var hypeDocElm = document.getElementById(hypeDocument.documentId());
> var thisPlayPause = hypeDocElm.querySelector('.PlayPause');
> var thisVideo= hypeDocElm.querySelector('.Video');
> 
> alert('this play pause is:'+ thisPlayPause + ' and this video is '+ thisVideo);
> 	
> 	switch (element.innerHTML) {
> 		case 'Pause':
> 		thisPlayPause.innerHTML='Play';
> 		thisVideo.pause();
> 		thisPlayPause.backgroundColor='#FE9470';
> 		hypeDocument.pauseTimelineNamed('Main Timeline');
> 		
> 		break;
> 		
> 		case 'Play':
> 		thisPlayPause.innerHTML='Pause';
> 		thisVideo.play();
> 		thisPlayPause.backgroundColor='#00F44B';
> 		hypeDocument.continueTimelineNamed('Main Timeline');		
> 		break;
> 	
> 	}//end switch

The following is what displays in the alert:

I know I can successfully use element for the "button" but I would rather not for now. However, is there another method for pausing/playing the movie file when using querySelector?

Okay, the buttons work, but I cannot pause the video at all using this code.

    //alert('Hello');
	//find out where I am and them move forward
	
	var hypeDocElm = document.getElementById(hypeDocument.documentId());
var thisPlayPause = hypeDocElm.querySelector('.PlayPause');
var thisVideo = hypeDocElm.querySelector('.VideoPlay');

//alert('this play pause is:'+ thisPlayPause + ' and this video is '+ thisVideo);
	
	switch (element.innerHTML) {
		case 'Pause':
		element.innerHTML='Play';
		thisVideo.pause();
		element.style.backgroundColor='#00F44B';
		hypeDocument.pauseTimelineNamed('Main Timeline');
		
		break;
		
		case 'Play':
		element.innerHTML='Pause';
		thisVideo.play();
		element.style.backgroundColor='#FE9470';
		hypeDocument.continueTimelineNamed('Main Timeline');		
		break;
	
	}//end switch

After a nice KY bourbon (Angel's Envy), the following worked:

	//alert('Hello');
	//find out where I am and them move forward

/*	
	var hypeDocElm = document.getElementById(hypeDocument.documentId());
var thisPlayPause = hypeDocElm.querySelector('.PlayPause');
var thisVideo = hypeDocElm.querySelector('.VideoPlay');
*/

var curScene=hypeDocument.currentSceneName();
var curLayout=hypeDocument.currentLayoutName();

// what video to stop?
 
 if (curScene=='Create Table' && curLayout=='iPhone') {
 var vidControl='Video1';
 }
 
  if (curScene=='Create Table' && curLayout=='Computer') {
 var vidControl='Video2';
 }

 
 if (curScene=='Pivot Table' && curLayout=='iPhone') {
 var vidControl='Video3';
 }
 
  if (curScene=='Pivot Table' && curLayout=='Computer') {
 var vidControl='Video4';
 }


//alert('this play pause is:'+ thisPlayPause + ' and this video is '+ thisVideo);
//alert (document.getElementById(hypeDocument.documentId()));	
	switch (element.innerHTML) {
		case 'Pause':
		element.innerHTML='Play';
		hypeDocument.getElementById(vidControl).pause();
		element.style.backgroundColor='#00F44B';
		hypeDocument.pauseTimelineNamed('Main Timeline');
		
		break;
		
		case 'Play':
		element.innerHTML='Pause';
		hypeDocument.getElementById(vidControl).play();
		element.style.backgroundColor='#FE9470';
		hypeDocument.continueTimelineNamed('Main Timeline');		
		break;
	
	}//end switch

glad you've got a working solution :slight_smile:

i'd guess You've missed this one:
hypeDocument.currentSceneId()

this'll be the id of the active layout/scene

so:

var yourActiveLayoutSceneElement = document.getElementId(hypeDocument.currentSceneId())

will be the div-element of the current scene/layout.

var videoElementByClass = yourActiveLayoutSceneElement.querySelector(".yourVideoClass")

will be the first videoelement in the scene/layout with the corresponding class

1 Like