update js
This commit is contained in:
parent
3c4e668b63
commit
c5db87e62a
1 changed files with 162 additions and 86 deletions
232
icf.js
232
icf.js
|
|
@ -1,40 +1,43 @@
|
|||
let hashes = slice(document.querySelectorAll('#menu > a')).map(function(element) {
|
||||
return element.getAttribute('href').substr(1)
|
||||
})
|
||||
|
||||
let movies = [
|
||||
{id: 'GJT', title: 'Aan (Mehboob, 1952)', frames: 241117},
|
||||
{id: 'IKP', title: 'Mother India (Mehboob, 1957)', frames: 250936}
|
||||
]
|
||||
let movie = movies[Math.floor(new Date() / 86400000) % 2]
|
||||
|
||||
let timelineLink = document.getElementById('link')
|
||||
timelineLink.href = 'https://indiancine.ma/' + movie.id
|
||||
timelineLink.innerHTML = movie.title
|
||||
let timelineLinkEntered = false
|
||||
let hashes = []
|
||||
let movie, position, frames, timelineTiles
|
||||
|
||||
let timelineElement = document.getElementById('timeline')
|
||||
let timelineElements = []
|
||||
let timelineWidth = 1500
|
||||
let timelineResize = 1
|
||||
let timelineTiles = Math.ceil(movie.frames / timelineWidth)
|
||||
let timelinesLeft
|
||||
|
||||
let timelineLink = document.getElementById('link')
|
||||
let timelineLinkEntered = false
|
||||
|
||||
let paused = true
|
||||
let speed = 0
|
||||
let acceleration = 0
|
||||
let maxSpeed = 2
|
||||
let maxAcceleration = maxSpeed / 100
|
||||
let fps = 25
|
||||
let fpsAnimation = 60
|
||||
|
||||
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'
|
||||
element.style.width = timelineWidth * timelineResize + 'px'
|
||||
timelineElement.appendChild(element)
|
||||
return element
|
||||
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)
|
||||
}
|
||||
|
||||
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(':')
|
||||
}
|
||||
|
||||
function hashchange() {
|
||||
|
|
@ -53,62 +56,129 @@ function hashchange() {
|
|||
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),
|
||||
left: -(frame / timelineWidth) * timelineResize
|
||||
}]
|
||||
let windowWidth = window.innerWidth
|
||||
while (last(timelines).left < windowWidth + timelineWidth / 2) {
|
||||
timelines.push({
|
||||
index: (last(timelines).index + 1) % timelineTiles,
|
||||
left: last(timelines).left + timelineWidth * timelineResize
|
||||
})
|
||||
}
|
||||
timelineElements = timelines.map(function(timeline, i) {
|
||||
element = getTimelineElement(timeline.index, timeline.left)
|
||||
return element
|
||||
})
|
||||
}
|
||||
|
||||
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 = ' · '
|
||||
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)
|
||||
})
|
||||
callback()
|
||||
})
|
||||
}
|
||||
|
||||
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)
|
||||
renderTimeline()
|
||||
timelineLink.innerHTML = movie.title + ' (' + movie.year + ') '
|
||||
+ movie.director.join(', ')
|
||||
callback()
|
||||
})
|
||||
}
|
||||
|
||||
function mod(a, b) {
|
||||
return (a % b + b) % b
|
||||
}
|
||||
|
||||
function play() {
|
||||
if (speed <= 0 && acceleration < 0) {
|
||||
paused = true
|
||||
setTimeout(function() {
|
||||
if (!timelineLinkEntered) {
|
||||
timelineLink.style.display = 'none'
|
||||
}
|
||||
}, 250)
|
||||
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'
|
||||
})
|
||||
if (parseFloat(timelineElements[0].style.left) <= -timelineWidth * timelineResize) {
|
||||
timelineElement.removeChild(timelineElements.shift())
|
||||
let lastElement = last(timelineElements)
|
||||
timelineElements.push(getTimelineElement(
|
||||
(lastElement.data.index + 1) % timelineTiles,
|
||||
parseFloat(lastElement.style.left) + timelineWidth * timelineResize
|
||||
))
|
||||
timelineElement.appendChild(last(timelineElements))
|
||||
}
|
||||
position += speed / fpsAnimation
|
||||
renderTimeline()
|
||||
timelineLink.href = 'https://indiancine.ma/' + movie.id + '/'
|
||||
+ formatDuration(position)
|
||||
if (speed < maxSpeed || acceleration <= 0) {
|
||||
speed += acceleration
|
||||
}
|
||||
setTimeout(play, 25)
|
||||
setTimeout(play, 1000 / fpsAnimation)
|
||||
}
|
||||
|
||||
function resize() {
|
||||
timelinesLeft = (window.innerWidth - 4096) * timelineResize
|
||||
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 - timelineWidth
|
||||
})
|
||||
}
|
||||
while (last(timelines).left + timelineWidth < windowWidth) {
|
||||
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 + 1) + '.jpg'
|
||||
element.style.left = timeline.left + 'px'
|
||||
timelineElement.appendChild(element)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function slice(nodelist) {
|
||||
|
|
@ -119,8 +189,12 @@ function start() {
|
|||
acceleration = maxAcceleration
|
||||
if (paused) {
|
||||
paused = false
|
||||
timelineLink.style.display = 'block'
|
||||
play()
|
||||
setTimeout(function() {
|
||||
if (acceleration > 0) {
|
||||
timelineLink.style.display = 'block'
|
||||
}
|
||||
}, 250)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -128,24 +202,26 @@ function stop() {
|
|||
acceleration = -maxAcceleration
|
||||
}
|
||||
|
||||
hashchange()
|
||||
resize()
|
||||
init()
|
||||
window.addEventListener('hashchange', hashchange)
|
||||
window.addEventListener('resize', resize)
|
||||
timeline.addEventListener('mouseenter', start)
|
||||
timeline.addEventListener('mouseleave', stop)
|
||||
timelineLink.addEventListener('mouseenter', function() {
|
||||
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() {
|
||||
if (paused) {
|
||||
})
|
||||
timelineLink.addEventListener('mouseleave', function() {
|
||||
timelineLinkEntered = false
|
||||
setTimeout(function() {
|
||||
if (paused) {
|
||||
timelineLink.style.display = 'none'
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
timelineLinkEntered = false
|
||||
}, 250)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue