film pages

app/settings.py

@@ -146,6 +146,7 @@ DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
 GEOIP_PATH = BASE_DIR / 'geo'
 
 DEFAULT_PANDORA_API = "https://archive.njp.ma/api/"
+TIMELINE_QUERY = {'conditions': []}
 
 URL_PREFIX = ''
 

app/static/css/partials/_film.scss

@@ -81,12 +81,12 @@ main > .film {
     }
   }
 
-  .videos {
+  .items {
     display: flex;
     flex-wrap: wrap;
     gap: 16px;
     justify-content: center;
-    .video {
+    .item {
       width: calc(100% / 4 - 16px);
       a {
         color: #000;
@@ -102,7 +102,7 @@ main > .film {
       }
     }
     @media screen and (max-width: 799px) {
-      .video {
+      .item {
         width: 100%;
       }
     }
@@ -147,7 +147,7 @@ main > .film {
 }
 
 main > .film {
-  .info-meta, .bio-block, .play, .summary-block, .texts {
+  .info-meta, .bio-block, .play, .summary-block, .texts, .items {
     background: rgba(0, 0, 0, 0.55);
     border-radius: 2px;
     box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);

app/static/js/ascroll.js

@@ -1,11 +1,10 @@
 var cache = cache || {}
 var layer = 'descriptions'
-var baseURL = 'https://pad.ma'
 var imageResolution = 480
 var videoExtension
 
 async function pandoraAPI(action, data) {
-    var url = baseURL + '/api/'
+    var url = pandoraURL + '/api/'
     //var url = '/pandoraAPI/'
     var key = JSON.stringify([action, data])
     if (!cache[key]) {
@@ -233,13 +232,13 @@ function renderAnnotation(config, video, ascroll, annotation) {
             var director = annotation.director[0]
         }
         var txt = `${title} (${director})`
-        figcaption = `<figcaption><a href="${baseURL}/${annotation.id}" target="_blank">${txt}</a></figcaption>`
+        figcaption = `<figcaption><a href="${pandoraURL}/${annotation.id}" target="_blank">${txt}</a></figcaption>`
     }
-    annotation.value = annotation.value.replace(/src="\//g, `src="${baseURL}/`).replace(/href="\//g, `href="${baseURL}/`)
+    annotation.value = annotation.value.replace(/src="\//g, `src="${pandoraURL}/`).replace(/href="\//g, `href="${pandoraURL}/`)
     div.innerHTML = `
         <div class="frame">
             <figure>
-                <img src="${baseURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg">
+                <img src="${pandoraURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg">
                 ${figcaption}
             </figure>
         </div>
@@ -250,7 +249,7 @@ function renderAnnotation(config, video, ascroll, annotation) {
     document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
         var src
         if (config.edit) {
-            src = `${baseURL}/${annotation.id.split('/')[0]}/480p.webm`
+            src = `${pandoraURL}/${annotation.id.split('/')[0]}/480p.webm`
         }
         if (config.loaded && visible) {
             updatePlayer(video, frame, annotation['in'], annotation['out'], src)
@@ -270,7 +269,7 @@ function renderAnnotations(config) {
     video.WebKitPlaysInline = true
     video.muted = true
     if (config.item) {
-        setVideoSrc(video, `${baseURL}/${config.item}/480p.webm`)
+        setVideoSrc(video, `${pandoraURL}/${config.item}/480p.webm`)
     }
     video.addEventListener('timeupdate', timeupdate)
     video.addEventListener('touchstart', showOverlay)
@@ -290,7 +289,7 @@ function renderAnnotations(config) {
         if (frame) {
             var src
             if (config.edit) {
-                src = `${baseURL}/${config.first.id.split('/')[0]}/480p.webm`
+                src = `${pandoraURL}/${config.first.id.split('/')[0]}/480p.webm`
             }
             updatePlayer(video, frame, config.first['in'], config.first['out'], src)
         }

app/static/js/play.js

@@ -0,0 +1,439 @@
+var cache = cache || {}
+var layer = 'descriptions'
+var imageResolution = 480
+var videoExtension
+
+async function pandoraAPI(action, data) {
+    var url = pandoraURL + '/api/'
+    //var url = '/pandoraAPI/'
+    var key = JSON.stringify([action, data])
+    if (!cache[key]) {
+        var response = await fetch(url, {
+            method: 'POST',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+                action: action,
+                data: data
+            })
+        })
+        cache[key] = await response.json()
+    }
+    return cache[key]
+}
+
+function setVideoSrc(video, src) {
+    var ext
+    if (!videoExtension) {
+        [
+            ['video/mp4; codecs="avc1.42E01E, mp4a.40.2"', '.mp4'],
+            ['video/webm; codecs="vp8, vorbis"', '.webm'],
+        ].forEach(opt => {
+            if (videoExtension) { return }
+            if (video.canPlayType(opt[0]).replace('no', '')) {
+                videoExtension = opt[1]
+            }
+        })
+    }
+    src = src.replace('.webm', videoExtension)
+    if (src != video.src) {
+        video.src = src
+    }
+}
+
+function resize() {
+    var video = document.querySelector('video')
+    if (video && video._frame) {
+        var rect = video._frame.getBoundingClientRect();
+        video.style.top =  (rect.top + window.scrollY) + 'px'
+    }
+}
+
+function updatePlayer(video, frame, currentTime, out, src) {
+    var rect = frame.getBoundingClientRect();
+    video.style.opacity = 0
+    video.style.top =  (rect.top + window.scrollY) + 'px'
+    video.style.display = 'block';
+    if (src) {
+        setVideoSrc(video, src)
+    }
+    //video.poster = frame.querySelector('img').src
+    var muted = video.muted
+    // video.muted = true
+    video.currentTime = currentTime
+    video.dataset.in = currentTime
+    video.dataset.out = out
+    video._frame = frame
+    const show = event => {
+        video.style.opacity = 1
+        video.muted = muted
+        video.removeEventListener('seeked', show)
+    }
+    video.addEventListener('seeked', show)
+    video.play()
+}
+
+function isElementInViewport (el) {
+    var rect = el.getBoundingClientRect();
+    return (
+        rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */
+        Math.floor(rect.right) <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */
+    );
+}
+
+function onVisibilityChange(el, callback) {
+    var old_visible;
+    return function () {
+        var visible = isElementInViewport(el);
+        if (visible != old_visible) {
+            old_visible = visible;
+            if (visible) {
+                el.classList.add('visible')
+            } else {
+                el.classList.remove('visible')
+            }
+            if (typeof callback == 'function') {
+                callback(visible);
+            }
+        }
+    }
+}
+
+function scrollTo(element) {
+    var delta = element.offsetTop - document.scrollingElement.scrollTop,
+        duration = 1000, t = 40, n = duration / t,
+        step = delta / n;
+
+    function scroll() {
+        if (document.scrollingElement.scrollTop + step > element.offsetTop) {
+            document.scrollingElement.scrollTop = element.offsetTop
+            n = 0
+        } else {
+            document.scrollingElement.scrollTop += step
+        }
+        n--
+        if (n) setTimeout(scroll, t)
+    }
+    scroll()
+}
+
+function timeupdate(event) {
+    if (event.target.dataset.out && event.target.dataset.in) {
+        var in_= parseFloat(event.target.dataset.in)
+        var out_= parseFloat(event.target.dataset.out)
+        if (event.target.currentTime >= out_) {
+            /*
+            var next
+            if (event.target._frame) {
+                next = event.target._frame.parentElement.nextSibling
+                if (next) {
+                    next = next.querySelector('.frame')
+                }
+            }
+            if (next) {
+                scrollTo(next)
+            } else {
+                event.target.pause()
+            }
+            */
+            if (config.pause) {
+                event.target.pause()
+            } else {
+                event.target.currentTime = in_
+            }
+        }
+    }
+}
+
+function formatInfo(config, ascroll) {
+    var info = document.createElement('div')
+    var h1 = document.createElement('h1')
+    h1.innerHTML = config.title
+    info.appendChild(h1)
+    var h2 = document.createElement('h2')
+    h2.innerHTML = config.byline
+    info.appendChild(h2)
+    var div = document.createElement('div')
+    div.classList.add('intro')
+    div.innerHTML = config.body
+    info.appendChild(div)
+    ascroll.appendChild(info)
+    return info
+}
+
+function showOverlay(event) {
+    event.stopPropagation()
+    event.preventDefault()
+    document.querySelectorAll('#video-overlay').forEach(element => element.remove())
+    var video = event.target
+    var rect = video.getBoundingClientRect();
+    var overlay = document.createElement('div')
+    overlay.id = 'video-overlay'
+    overlay.style.top = video.style.top
+    overlay.style.width = rect.width + 'px'
+    overlay.style.height = rect.height + 'px'
+    overlay.style.position = 'absolute'
+    overlay.style.display = 'flex'
+    overlay.style.alignItems = 'center'
+    overlay.style.justifyContent = 'center'
+    //overlay.style.fontSize = '45px'
+    video.controls = false
+
+    var off = `<span class="annotation-icon-wrapper animated"><span class="text f-icon-volume_off annotation-icon"></span>`
+    var on = `<span class="annotation-icon-wrapper"><span class="f-icon-volume_down annotation-icon"></span></span>`
+
+    if (video.muted) {
+            overlay.innerHTML = off
+    } else {
+            overlay.innerHTML = on
+    }
+    overlay.addEventListener('click', event=> {
+        video.muted = !video.muted
+        if (video.muted) {
+            overlay.innerHTML = off
+        } else {
+            overlay.innerHTML = on
+        }
+    })
+    var timeout = setTimeout(() => {
+        video.controls = false
+        overlay.remove()
+    }, 3000)
+    overlay.addEventListener('mousemove', event=> {
+        clearTimeout(timeout)
+        timeout = setTimeout(() => {
+            video.controls = false
+            overlay.remove()
+        }, 500)
+    })
+    video.parentElement.appendChild(overlay)
+
+}
+
+function renderAnnotation(config, video, ascroll, annotation) {
+    var div = document.createElement('div')
+    div.classList.add('annotation')
+
+    var color1 = `hsl(${annotation.color1.hue}, 70%, 75%)`
+    var color2 = `hsl(${annotation.color2.hue}, 70%, 75%)`
+    if (!config.first) {
+        config.first = annotation
+        config.info.style.background = color1
+    }
+    div.style.background = `linear-gradient(to bottom, ${color1}, ${color2})`;
+    var figcaption = ''
+    if (annotation.title) {
+        if (config.language == 'zh') {
+            var title = annotation.title.split('/')[1] || annotation.title
+            var director = annotation.director[1]
+        } else {
+            var title = annotation.title.split('/')[0]
+            var director = annotation.director[0]
+        }
+        var txt = `${title} (${director})`
+        figcaption = `<figcaption><a href="${pandoraURL}/${annotation.id}" target="_blank">${txt}</a></figcaption>`
+    }
+    annotation.value = annotation.value.replace(/src="\//g, `src="${pandoraURL}/`).replace(/href="\//g, `href="${pandoraURL}/`)
+    div.innerHTML = `
+        <div class="frame">
+            <figure>
+                <img src="${pandoraURL}/${annotation.id.split('/')[0]}/${imageResolution}p${annotation.in}.jpg">
+                ${figcaption}
+            </figure>
+        </div>
+        <div class="text">${annotation.value}</div>
+    `
+    ascroll.appendChild(div)
+    var frame = div.querySelector('.frame')
+    document.addEventListener('scroll', onVisibilityChange(div.querySelector('.frame'), function(visible) {
+        var src
+        if (config.edit) {
+            src = `${pandoraURL}/${annotation.id.split('/')[0]}/480p.webm`
+        }
+        if (config.loaded && visible) {
+            updatePlayer(video, frame, annotation['in'], annotation['out'], src)
+        }
+
+    }))
+}
+
+function renderAnnotations(config) {
+    var ascroll = document.querySelector('#ascroll')
+    config.loaded = false
+    var video = document.createElement('video')
+    video.classList.add('player')
+    video.playsinline = true
+    video.setAttribute('playsinline', 'playsinline')
+    video.setAttribute('webkit-playsinline', 'webkit-playsinline')
+    video.WebKitPlaysInline = true
+    video.muted = true
+    if (config.item) {
+        setVideoSrc(video, `${pandoraURL}/${config.item}/480p.webm`)
+    }
+    video.addEventListener('timeupdate', timeupdate)
+    video.addEventListener('touchstart', showOverlay)
+    video.addEventListener('mouseover', showOverlay)
+    var box = document.createElement('div')
+    box.classList.add('vbox')
+    box.appendChild(video)
+    ascroll.appendChild(box)
+
+    config.info = formatInfo(config, ascroll)
+    config.annotations.forEach(annotation => {
+        renderAnnotation(config, video, ascroll, annotation)
+    })
+    config.loaded = true
+    if (config.first) {
+        let frame = ascroll.querySelector('.annotation .frame')
+        if (frame) {
+            var src
+            if (config.edit) {
+                src = `${pandoraURL}/${config.first.id.split('/')[0]}/480p.webm`
+            }
+            updatePlayer(video, frame, config.first['in'], config.first['out'], src)
+        }
+    }
+    if (config.item_url || config.cited) {
+        var box = document.createElement('div')
+        var color = config.annotations[config.annotations.length - 1].color2
+        box.style.background = `hsl(${color.hue}, 70%, 75%)`
+        var div = document.createElement('div')
+        div.classList.add('related-film')
+        if (config.item_url) {
+            if (config.language == 'zh') {
+                div.innerHTML = `
+                    引用影片: <a href="${config.item_url}">${config.item_title_zh} (${config.item_director[1]})</a>
+                `
+            } else {
+                div.innerHTML = `
+                    Film cited: <a href="${config.item_url}">${config.item_title} (${config.item_director[0]})</a><br>
+                `
+            }
+        } else {
+            var html = []
+            config.cited.forEach(film => {
+                var title_en = film.title.split(' / ')[0]
+                var title_zh = film.title.split(' / ')[1] || title_en
+                if (config.language == 'en') {
+                    var director = film.director ? ` (${film.director[0]})` : ''
+                    html.push(`<a href="/polis+film/${film.id}/">${title_en}${director}</a>`)
+                } else {
+                    var director = film.director ? ` (${film.director[1]})` : ''
+                    html.push(`<a href="/polis+film/${film.id}/">${title_zh}${director}</a>`)
+                }
+            })
+            var films = html.length == 1 ? 'Film' : 'Films'
+            html= html.join(', ')
+            if (config.language == 'zh') {
+                div.innerHTML = ` 引用影片: ${html}`
+            } else {
+                div.innerHTML = `${films} cited: ${html}`
+            }
+        }
+        box.appendChild(div)
+        ascroll.appendChild(box)
+    }
+}
+
+async function loadClips(annotations) {
+    var items = annotations.map(annotation => annotation.id.split('/')[0])
+    items = [...new Set(items)]
+    return pandoraAPI('findClips', {itemsQuery: {
+        conditions: [{key: 'id', operator: '&', value: items}]
+    }, range: [0, 10000], keys: [
+        'id', 'hue', 'saturation', 'lightness'
+    ]}).then(response => {
+        var colors = {}
+        response.data.items.forEach(clip => {
+            colors[clip.id] = clip
+        })
+        var previous
+        annotations.forEach(annotation => {
+            var clipId = annotation.id.split('/')[0] + '/' + annotation.in.toFixed(3)  + '-'+ annotation.out.toFixed(3)
+            annotation.color1 = colors[clipId]
+            if(previous) {
+                previous.color2 = annotation.color1
+            }
+            previous = annotation
+        })
+        if (annotations.length) {
+            annotations[annotations.length - 1].color2 = annotations[0].color1
+        }
+        return annotations
+    })
+}
+
+function loadAnnotations(config) {
+    if (config.item) {
+        pandoraAPI('get', {id: config.item, keys: [
+            'layers'
+        ]}).then(response => {
+            var annotations = response.data.layers[config.layer].filter(annotation => {
+                return !(config.user && annotation.user != config.user)
+            })
+            loadClips(annotations).then(annotations => {
+                config.annotations = annotations.filter(annotation => {
+                    if (config.only_e) {
+                        if (annotation.value.slice(0, 2) == 'E:') {
+                            annotation.value = annotation.value.slice(2).trim()
+                            return true
+                        } else {
+                            return false
+                        }
+                    } else {
+                        return annotation.value.slice(0, 2) != 'E:'
+                    }
+                })
+                renderAnnotations(config)
+            })
+        })
+    } else {
+        var cited = {}
+        pandoraAPI('getEdit', {id: config.edit, keys: []}).then(response => {
+            var annotations = []
+            response.data.clips.forEach(clip => {
+                cited[clip.item] = {
+                    title: clip.title,
+                    director: clip.director,
+                    id: clip.item
+                }
+                clip.layers[config.layer].forEach(annotation => {
+                    if (config.user && annotation.user != config.user) {
+                        return
+                    }
+                    ;['title', 'director', 'date'].forEach(key => {
+                        annotation[key] = clip[key]
+                    })
+                    if (config.only_e) {
+                        if (annotation.value.slice(0, 2) == 'E:') {
+                            annotation.value = annotation.value.slice(2).trim()
+                            annotations.push(annotation)
+                        }
+                    } else {
+                        if (annotation.value.slice(0, 2) != 'E:') {
+                            annotations.push(annotation)
+                        }
+                    }
+                })
+            })
+            loadClips(annotations).then(annotations => {
+                config.annotations = annotations
+                config.cited = Object.values(cited)
+                renderAnnotations(config)
+            })
+        })
+    }
+}
+
+config.layer = config.layer || layer
+
+if (config.annotations) {
+    renderAnnotations(config)
+} else {
+    loadAnnotations(config)
+}
+
+
+window.addEventListener('resize', resize, false);
+

app/templates/film.html

@@ -43,7 +43,7 @@ body {
             </div>
 				
 		</div>	
-		<div class="video-block">	
+		<div class="video-block">
 			<img src="{{ stream_prefix }}{{ film.items.0.id }}/loop.jpg" class="video-fallback-block">
 			<video
 				id="timeline-video"
@@ -61,10 +61,10 @@ body {
                 <br>
             <p>{{ film.data.summary_zh|safe }}</p>
         </div>
-		<div class="videos">
+		<div class="items">
 			{% for item in film.data.items %}
-			<div class="video">
+			<div class="item">
-				<a href="fixme">
+				<a href="play/{{  item.id }}">
 					<figure>
 					<img src="https://archive.njp.ma/{{ item.id }}/480p.jpg">
 					<figcaption>
@@ -99,6 +99,9 @@ body {
 		<script>
 			var film = {{ film.json | safe }};
 			film.prefix = "{{ stream_prefix }}";
+			var pandoraURL =  "{{ pandora_url }}";
 		</script>
+		{% comment %}
 		<script src="{% static 'js/film.js' %}"></script>
+		{% endcomment %}
 {% endblock %}

app/templates/film_play.html

@@ -4,9 +4,8 @@
 {% endblock %}
 {% block end %}
 <script>
-	var film = {
+	var config = {{ config | safe }};
-		id: "{{ film.pandora_id }}",
+	var pandoraURL = "{{ pandora_url }}";
-	}
 </script>
-<script src="/static/js/ascroll.js"></script>
+<script src="/static/js/play.js"></script>
 {% endblock %}

app/templates/text.html

@@ -37,6 +37,7 @@
 {% block end %}
 <script>
 	var config = {{ text.json | safe }};
+	var pandoraURL = "{{ pandora_url }}";
 </script>
 <script src="/static/js/ascroll.js?2"></script>
 {% endblock %}

app/text/views.py

@@ -48,4 +48,5 @@ def text(request, slug):
     else:
         context['text'] = get_object_or_404(models.Text, slug=slug, public=True)
     context['stream_prefix'] = get_stream_prefix(request)
+    context['pandora_url'] = settings.DEFAULT_PANDORA_API.replace('/api/', '')
     return render(request, 'text.html', context)

app/urls.py

@@ -25,7 +25,7 @@ urlpatterns = [
     path('admin/', admin.site.urls),
     #path('pandoraAPI/', video.pandoraAPI, name='pandoraAPI'),
     path(settings.URL_PREFIX + 'films/', video.films, name='films'),
-    path(settings.URL_PREFIX + 'film/<str:slug>/play/<str:lang>', video.film_play, name='film_play'),
+    path(settings.URL_PREFIX + 'film/<str:slug>/play/<str:id>', video.film_play, name='film_play'),
     path(settings.URL_PREFIX + 'film/<str:slug>/', video.film, name='film'),
     path(settings.URL_PREFIX + 'edits/', video.edits, name='edits'),
     path(settings.URL_PREFIX + 'edit/<str:slug>/play/<str:lang>', video.edit_play, name='edit_play'),

app/video/views.py

@@ -1,4 +1,5 @@
 import logging
+import json
 
 from django.shortcuts import render, redirect, get_object_or_404
 from django.views.decorators.csrf import csrf_exempt
@@ -20,12 +21,16 @@ def get_ip(request):
     return ip
 
 def get_stream_prefix(request):
-    prefix = "https://v2.phantas.ma/"
+    return settings.DEFAULT_PANDORA_API.replace('/api/', '/')
+    '''
+    domain = settings.DEFAULT_PANDORA_API.split('/')[3]
+    prefix = "https://v2.%s/" % domain
     cdn = {
-        'Eastern Asia': "https://v1.phantas.ma/",
+        'Eastern Asia': "https://v1.%s/" % domain,
-        'Southern Asia': "https://v1.phantas.ma/",
+        'Southern Asia': "https://v1.%s/" % domain,
-        'Asia': "https://v1.phantas.ma/",
+        'Asia': "https://v1.%s/" % domain,
     }
+    '''
     ip = get_ip(request)
     try:
         g = GeoIP2()
@@ -54,13 +59,17 @@ def film(request, slug):
     context['film'] = get_object_or_404(models.Film, slug=slug)
     context['settings'] = settings
     context['stream_prefix'] = get_stream_prefix(request)
+    context['pandora_url'] = settings.DEFAULT_PANDORA_API.replace('/api/', '')
     return render(request, 'film.html', context)
 
-def film_play(request, slug, lang):
+def film_play(request, slug, id):
     context = {}
-    context['film'] = get_object_or_404(models.Film, slug=slug)
-    context['lang'] = lang
     context['settings'] = settings
+    context['config'] = json.dumps({
+        'stream_prefix': get_stream_prefix(request),
+        'item': id
+    })
+    context['pandora_url'] = settings.DEFAULT_PANDORA_API.replace('/api/', '')
     return render(request, 'film_play.html', context)
 
 def edits(request):