update js

icf.js

@@ -1,40 +1,43 @@
-let hashes = slice(document.querySelectorAll('#menu > a')).map(function(element) {
+let hashes = []
-    return element.getAttribute('href').substr(1)
+let movie, position, frames, timelineTiles
-})
-
-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 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) {
+function api(action, data, callback) {
-    let element = document.createElement('img')
+    fetch('https://indiancine.ma/api/', {
-    element.data = {index: index}
+        body: JSON.stringify({action: action, data: data}),
-    element.src = 'https://media.indiancine.ma/' + movie.id
+        headers: {
-        + '/timelinekeyframes64p' + (index + 1) + '.jpg'
+            'Content-Type': 'application/json',
-    element.style.left = left + 'px'
+            'Accept': 'application/json, text/plain, */*',
-    element.style.width = timelineWidth * timelineResize + 'px'
+        },
-    timelineElement.appendChild(element)
+        method: 'post'
-    return element
+    }).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 = ' &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)
+        })
+        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
-        if (!timelineLinkEntered) {
+        setTimeout(function() {
-            timelineLink.style.display = 'none'
+            if (!timelineLinkEntered) {
-        }
+                timelineLink.style.display = 'none'
+            }
+        }, 250)
         return
     }
-    //console.log('play', speed, acceleration)
+    position += speed / fpsAnimation
-    images = slice(document.querySelectorAll('#timeline > img'))
+    renderTimeline()
-    timelineElements.forEach(function(element) {
+    timelineLink.href = 'https://indiancine.ma/' + movie.id + '/'
-        element.style.left = (parseFloat(element.style.left) - speed) + 'px'
+        + formatDuration(position)
-    })
-    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))
-    }
     if (speed < maxSpeed || acceleration <= 0) {
         speed += acceleration
     }
-    setTimeout(play, 25)
+    setTimeout(play, 1000 / fpsAnimation)
 }
 
-function resize() {
+function renderTimeline() {
-    timelinesLeft = (window.innerWidth - 4096) * timelineResize
+    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()
+loadText(function() {
-resize()
+    window.addEventListener('hashchange', hashchange)
-init()
+    hashchange()
-window.addEventListener('hashchange', hashchange)
+    loadTimeline(function() {
-window.addEventListener('resize', resize)
+        window.addEventListener('resize', renderTimeline)
-timeline.addEventListener('mouseenter', start)
+        timeline.addEventListener('mousedown', function() {
-timeline.addEventListener('mouseleave', stop)
+            return false
-timelineLink.addEventListener('mouseenter', function() {
+        })
-    timelineLinkEntered = true
+        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'
+                }
+            }, 250)
+        })
+    })
 })
-timelineLink.addEventListener('mouseleave', function() {
-    if (paused) {
-        setTimeout(function() {
-            if (paused) {
-                timelineLink.style.display = 'none'
-            }
-        }, 1000)
-    }
-    timelineLinkEntered = false
-})
-