link cited film

app/static/css/partials/_ascroll.scss

@@ -93,4 +93,12 @@
     color: rgba(#fff, 1);
     font-size: 38px;
   }
+
+  .related-film {
+    padding: 4px;
+    padding-top: 32px;
+    padding-bottom: 32px;
+    max-width: var(--container-width);
+    margin: auto;
+  }
 }

app/static/js/ascroll.js

@@ -279,6 +279,18 @@ function renderAnnotations(config) {
             updatePlayer(video, frame, config.first['in'], config.first['out'], src)
         }
     }
+    if (config.item_url) {
+        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')
+        div.innerHTML = `
+            Film cited: <a href="${config.item_url}">${config.item_title} ${config.item_title_zh}</a><br>
+        `
+        box.appendChild(div)
+        ascroll.appendChild(box)
+    }
 }
 
 async function loadClips(annotations) {
@@ -311,7 +323,9 @@ async function loadClips(annotations) {
 
 function loadAnnotations(config) {
     if (config.item) {
-        pandoraAPI('get', {id: config.item, keys: ['layers']}).then(response => {
+        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)
             })