cinemafoundation.in/icf.js

229 lines
6.8 KiB
JavaScript
Raw Normal View History

2018-01-12 13:43:32 +00:00
let hashes = []
let movie, position, frames, timelineTiles, lastTimelineWidth
2018-01-11 15:02:07 +00:00
2018-01-11 12:44:22 +00:00
let timelineElement = document.getElementById('timeline')
let timelineElements = []
let timelineWidth = 1500
let timelinesLeft
2018-01-12 13:43:32 +00:00
let timelineLink = document.getElementById('link')
let timelineLinkEntered = false
let fps = 25
let fpsAnimation = 60
2018-01-11 12:44:22 +00:00
let paused = true
let speed = 0
let acceleration = 0
let maxSpeed = 2
let maxAcceleration = 1 / fpsAnimation
2018-01-12 13:43:32 +00:00
function api(action, data, callback) {
fetch('https://indiancine.ma/api/', {
body: JSON.stringify({action: action, data: data}),
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json, text/plain, */*',
},
method: 'post'
}).then(function(result) {
return result.json()
}).then(callback)
}
2018-01-11 12:44:22 +00:00
2018-01-12 13:43:32 +00:00
function formatDuration(seconds) {
return [
Math.floor(seconds / 3600),
Math.floor(seconds % 3600 / 60),
Math.floor(seconds % 60)
].map(function(value, index) {
return (index > 0 && value < 10 ? '0' : '') + value
}).join(':')
2018-01-11 12:44:22 +00:00
}
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')
})
}
2018-01-12 13:43:32 +00:00
function last(array) {
return array[array.length - 1]
}
function loadText(callback) {
let menu = document.getElementById('menu')
api('getDocument', {id: 'DWA'}, function(result) {
result.data.text.split('<h1>').slice(1).forEach(function(text, index) {
let split = text.split('</h1>')
let id = split[0].toLowerCase()
let element
if (index > 0) {
element = document.createElement('span')
element.innerHTML = ' &middot; '
menu.appendChild(element)
}
element = document.createElement('a')
element.href = '#' + id
element.innerHTML = split[0]
menu.appendChild(element)
element = document.createElement('div')
element.className = 'section'
element.id = id
element.innerHTML = split[1]
.replace(/<a /g, '<a target="_blank" ')
.replace(/<br>/g, '')
document.body.appendChild(element)
hashes.push(id)
2018-01-11 12:44:22 +00:00
})
2018-01-12 13:43:32 +00:00
callback()
2018-01-11 12:44:22 +00:00
})
}
2018-01-12 13:43:32 +00:00
function loadTimeline(callback) {
api('find', {
keys: ['director', 'duration', 'id', 'title', 'year'],
query: {
conditions: [{
key: 'list', operator: '==', value: 'rlx:cinemafoundation.in',
}],
operator: '&'
},
sort: [{key: 'year', operator: '+'}]
}, function(result) {
let movies = result.data.items
let time = new Date()
time -= time.getTimezoneOffset() * 60000
let mspd = 86400000
movie = movies[Math.floor(time / mspd) % movies.length]
position = Math.floor(time % mspd / mspd * movie.duration * fps) / fps
frames = Math.floor(movie.duration * fps)
timelineTiles = Math.ceil(frames / timelineWidth)
lastTimelineWidth = frames % timelineWidth
2018-01-12 13:43:32 +00:00
renderTimeline()
timelineLink.innerHTML = movie.title + ' (' + movie.year + ') '
+ movie.director.join(', ')
callback()
})
}
function mod(a, b) {
return (a % b + b) % b
2018-01-11 12:44:22 +00:00
}
function play() {
if (speed <= 0 && acceleration < 0) {
paused = true
2018-01-12 14:10:58 +00:00
if (!timelineLinkEntered) {
timelineLink.style.display = 'none'
}
2018-01-11 12:44:22 +00:00
return
}
2018-01-12 13:43:32 +00:00
position += speed / fpsAnimation
renderTimeline()
timelineLink.href = 'https://indiancine.ma/' + movie.id + '/'
+ formatDuration(position)
2018-01-11 12:44:22 +00:00
if (speed < maxSpeed || acceleration <= 0) {
speed += acceleration
}
2018-01-12 13:43:32 +00:00
setTimeout(play, 1000 / fpsAnimation)
2018-01-11 12:44:22 +00:00
}
2018-01-12 13:43:32 +00:00
function renderTimeline() {
let frame = Math.floor(position * fps)
let windowWidth = window.innerWidth
let timelines = [{
index: Math.floor(frame / timelineWidth),
left: (windowWidth / 2) - frame % timelineWidth
}]
while (timelines[0].left > 0) {
timelines.unshift({
index: mod(timelines[0].index - 1, timelineTiles),
left: timelines[0].left - (
timelines[0].index == 0 ? lastTimelineWidth : timelineWidth
)
2018-01-12 13:43:32 +00:00
})
}
while (last(timelines).left < windowWidth) {
2018-01-12 13:43:32 +00:00
timelines.push({
index: mod(last(timelines).index + 1, timelineTiles),
left: last(timelines).left + timelineWidth
})
}
let element = document.getElementById(
'timeline' + mod(timelines[0].index - 1, timelineTiles)
)
if (element) {
timelineElement.removeChild(element)
}
timelines.forEach(function(timeline) {
let element = document.getElementById('timeline' + timeline.index)
if (element) {
element.style.left = timeline.left + 'px'
} else {
element = document.createElement('img')
element.id = 'timeline' + timeline.index
element.src = 'https://media.indiancine.ma/' + movie.id
+ '/timelinekeyframes64p' + timeline.index + '.jpg'
2018-01-12 13:43:32 +00:00
element.style.left = timeline.left + 'px'
timelineElement.appendChild(element)
}
})
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
play()
2018-01-12 13:43:32 +00:00
setTimeout(function() {
if (acceleration > 0) {
timelineLink.style.display = 'block'
}
}, 250)
2018-01-11 12:44:22 +00:00
}
}
function stop() {
acceleration = -maxAcceleration
}
2018-01-12 13:43:32 +00:00
loadText(function() {
window.addEventListener('hashchange', hashchange)
hashchange()
loadTimeline(function() {
window.addEventListener('resize', renderTimeline)
timeline.addEventListener('mousedown', function() {
return false
})
timeline.addEventListener('mouseenter', start)
timeline.addEventListener('mouseleave', stop)
timelineLink.addEventListener('mouseenter', function() {
timelineLinkEntered = true
})
timelineLink.addEventListener('mouseleave', function() {
timelineLinkEntered = false
setTimeout(function() {
if (paused) {
timelineLink.style.display = 'none'
}
2018-01-12 14:09:20 +00:00
}, 1000)
2018-01-12 13:43:32 +00:00
})
})
2018-01-11 15:02:07 +00:00
})