cinemafoundation.in/icf.js

152 lines
4.4 KiB
JavaScript
Raw Normal View History

2018-01-11 12:44:22 +00:00
let hashes = slice(document.querySelectorAll('#menu > a')).map(function(element) {
return element.getAttribute('href').substr(1)
})
let movies = [
2018-01-11 15:02:07 +00:00
{id: 'GJT', title: 'Aan (Mehboob, 1952)', frames: 241117},
{id: 'IKP', title: 'Mother India (Mehboob, 1957)', frames: 250936}
2018-01-11 12:44:22 +00:00
]
let movie = movies[Math.floor(new Date() / 86400000) % 2]
2018-01-11 15:02:07 +00:00
let timelineLink = document.getElementById('link')
timelineLink.href = 'https://indiancine.ma/' + movie.id
timelineLink.innerHTML = movie.title
let timelineLinkEntered = false
2018-01-11 12:44:22 +00:00
let timelineElement = document.getElementById('timeline')
let timelineElements = []
let timelineWidth = 1500
2018-01-11 15:02:07 +00:00
let timelineResize = 1
2018-01-11 12:44:22 +00:00
let timelineTiles = Math.ceil(movie.frames / timelineWidth)
let timelinesLeft
let paused = true
let speed = 0
let acceleration = 0
let maxSpeed = 2
let maxAcceleration = maxSpeed / 100
function getTimelineElement(index, left) {
let element = document.createElement('img')
element.data = {index: index}
element.src = 'https://media.indiancine.ma/' + movie.id
+ '/timelinekeyframes64p' + (index + 1) + '.jpg'
element.style.left = left + 'px'
2018-01-11 15:02:07 +00:00
element.style.width = timelineWidth * timelineResize + 'px'
2018-01-11 12:44:22 +00:00
timelineElement.appendChild(element)
return element
}
function hashchange() {
let hash = document.location.hash.substr(1)
if (!hashes.includes(hash)) {
document.location.hash = hashes[0]
return
}
slice(document.querySelectorAll('#menu > a')).forEach(function(element) {
element.classList[
element.getAttribute('href') == '#' + hash ? 'add' : 'remove'
]('selected')
})
slice(document.querySelectorAll('.section')).forEach(function(element) {
element.classList[
element.getAttribute('id') == hash ? 'add' : 'remove'
]('selected')
})
console.log(hash)
}
function init() {
let frame = Math.floor(Math.random() * movie.frames)
let timelines = [{
index: Math.floor(frame / timelineWidth),
2018-01-11 15:02:07 +00:00
left: -(frame / timelineWidth) * timelineResize
2018-01-11 12:44:22 +00:00
}]
let windowWidth = window.innerWidth
while (last(timelines).left < windowWidth + timelineWidth / 2) {
timelines.push({
index: (last(timelines).index + 1) % timelineTiles,
2018-01-11 15:02:07 +00:00
left: last(timelines).left + timelineWidth * timelineResize
2018-01-11 12:44:22 +00:00
})
}
timelineElements = timelines.map(function(timeline, i) {
element = getTimelineElement(timeline.index, timeline.left)
return element
})
}
function last(array) {
return array[array.length - 1]
}
function play() {
if (speed <= 0 && acceleration < 0) {
paused = true
2018-01-11 15:02:07 +00:00
if (!timelineLinkEntered) {
timelineLink.style.display = 'none'
}
2018-01-11 12:44:22 +00:00
return
}
//console.log('play', speed, acceleration)
images = slice(document.querySelectorAll('#timeline > img'))
timelineElements.forEach(function(element) {
element.style.left = (parseFloat(element.style.left) - speed) + 'px'
})
2018-01-11 15:02:07 +00:00
if (parseFloat(timelineElements[0].style.left) <= -timelineWidth * timelineResize) {
2018-01-11 12:44:22 +00:00
timelineElement.removeChild(timelineElements.shift())
let lastElement = last(timelineElements)
timelineElements.push(getTimelineElement(
(lastElement.data.index + 1) % timelineTiles,
2018-01-11 15:02:07 +00:00
parseFloat(lastElement.style.left) + timelineWidth * timelineResize
2018-01-11 12:44:22 +00:00
))
timelineElement.appendChild(last(timelineElements))
}
if (speed < maxSpeed || acceleration <= 0) {
speed += acceleration
}
setTimeout(play, 25)
}
function resize() {
2018-01-11 15:02:07 +00:00
timelinesLeft = (window.innerWidth - 4096) * timelineResize
2018-01-11 12:44:22 +00:00
}
function slice(nodelist) {
return Array.prototype.slice.call(nodelist)
}
function start() {
acceleration = maxAcceleration
if (paused) {
paused = false
2018-01-11 15:02:07 +00:00
timelineLink.style.display = 'block'
2018-01-11 12:44:22 +00:00
play()
}
}
function stop() {
acceleration = -maxAcceleration
}
hashchange()
resize()
init()
window.addEventListener('hashchange', hashchange)
window.addEventListener('resize', resize)
timeline.addEventListener('mouseenter', start)
timeline.addEventListener('mouseleave', stop)
2018-01-11 15:02:07 +00:00
timelineLink.addEventListener('mouseenter', function() {
timelineLinkEntered = true
})
timelineLink.addEventListener('mouseleave', function() {
if (paused) {
setTimeout(function() {
if (paused) {
timelineLink.style.display = 'none'
}
}, 1000)
}
timelineLinkEntered = false
})
2018-01-11 12:44:22 +00:00