framer-timeout-movie-replay.coffee

videoLayer = new VideoLayer {video: "images/videos/v0.mp4", size: Screen.size}
videoOverlay = new Layer {size: Screen.size, backgroundColor: "rgba(0,0,0,.7)"}
bg = new Layer {backgroundColor: "#FFF", size: Screen.size}
countdown = new TextLayer {text: "closing in 3s", fontSize: 18, y: Align.bottom(-64), x: Align.center, color:"#FFF", parent: videoOverlay}
replay = new TextLayer {text: "Replay video", fontSize: 24, point: Align.center, color: "#FFF", parent: videoOverlay}

showHideLayers = [videoOverlay, countdown, replay]
for layer in showHideLayers
	layer.states = 
		show:
			visible: true
		hide: 
			visible: false

applyStates = (layer, state) ->
	layer.animate(state)

closeVideo = ->
	videoLayer.sendToBack()
	applyStates(videoOverlay, "hide")


showVideoEndStates = ->
	videoOverlay.bringToFront()
	applyStates(videoOverlay, "show")


# COUNTDOW 
interval = null
allowVideoEnd = false

startInterval = (value) ->
	value--
	countdownValue = value
	countdown.text = "closing in " + countdownValue + "s"
	allowVideoEnd = true
	if countdownValue isnt 0 
		Utils.delay 1.0, ->
			return if countdown.text is " "
			else 
				startInterval(countdownValue)
	else 
		countdown.text = " - "
		stopInterval()
		closeVideo()

stopInterval = ->
	clearInterval(interval)		
	allowVideoEnd = false

# ICONS
iconObject = [
	v0 = {
		name: "v0", width: 56, height: 56, x: 24, y: Align.center,backgroundColor: "rgba(12,123,12,1)"
	},
	v1 = {
		name: "v1", width: 56, height: 56, x: 24, y: Align.center,backgroundColor: "rgba(123,12,123,1)"
	},
	v2 = {
		name: "v2", width: 56, height: 56, x: 24, y: Align.center,backgroundColor: "rgba(123,123,12,1)"
	}
]

states = 
	active: 
		style: 
			rotate: 45
	inactive: 
		style: 
			roate: 90

iconsFunction = (iconObject, index, icons) ->
	layer = new Layer 
		width: iconObject.width 
		height: iconObject.height 
		x: 24 + (iconObject.x + 56) * index 
		y: iconObject.y
		backgroundColor: iconObject.backgroundColor
		name: "v"+index
		
	layer.states = this.states 
	
	# Make all layer inactive
	layer.stateSwitch("inactive")
	# Add methods to layer
	layer.isOn = false
	
	layer.onClick (e) ->
				
		# PLAY VIDEO
		layer = this.name
		playVideo(layer)

		Events.wrap(videoLayer.player).on "ended", ->
			startInterval(4)
			showVideoEndStates()
		
	return layer

iconsCreate = iconObject.map(iconsFunction, {states: states})

playVideo = (layer) ->
	videoLayer.video = "images/videos/#{layer}.mp4"
	videoLayer.player.play()
	videoLayer.player.autoplay = true
	videoLayer.bringToFront()

replay.onClick (e) ->
	countdown.text = " " 
	videoPath = videoLayer.video
	layer = videoPath.substr(61, 2)
	playVideo(layer)