filter/sort

app/static/css/partials/_film.scss

@@ -8,6 +8,10 @@
     text-decoration: none;
   }
 
+  .actions {
+    text-align: right;
+  }
+
   select {
     font-size: 18px;
     font-family: "noto_sans", sans-serif;

app/static/css/partials/_player.scss

@@ -31,6 +31,7 @@
     @media screen and (max-width: 1100px) {
       h1 {
         display: block;
+        font-size: 16px;
       }
     }
 

app/static/js/films.js

@@ -5,10 +5,14 @@ function isNumeric (str) {
            !isNaN(parseFloat(str)) // ...and ensure strings of whitespace fail
 }
 
-function selectChanged() {
+var options = parseHash();
+
+function sortChanged() {
     const sortValue = document.getElementById('sort-select').value
     const $films = [...document.querySelectorAll('.film')]
-    location.hash = sortValue
+
+    options.sort = sortValue
+    updateHash()
     $films.sort((a, b) => {
         let aVal = a.dataset[sortValue]
         let bVal = b.dataset[sortValue]
@@ -24,12 +28,43 @@ function selectChanged() {
     })
 }
 
-//document.getElementById('sort-select').addEventListener('change', selectChanged)
+function filterChanged() {
+    const filterValue = document.getElementById('filter-select').value
+    options.filter = filterValue
+    document.querySelectorAll('.film').forEach(film => {
+        if (!options.filter || film.dataset.type.split(',').indexOf(options.filter) > -1) {
+            console.log(film.dataset.type.split(','), film.dataset.type.split(',').indexOf(options.filter))
+            film.style.display = ''
+        } else {
+            film.style.display = 'none'
+        }
+    })
+    updateHash()
+}
 
-const locationHash = location.hash.replace('#', '')
-if (locationHash !== '') {
-    document.getElementById('sort-select').value = locationHash
-    selectChanged()
+function parseHash() {
+    var options = {}
+    location.hash.slice(1).split('&').forEach(kv => {
+        kv = kv.split('=')
+        options[kv.shift()] = kv.join('=')
+    })
+    return options;
+}
+
+function updateHash() {
+    location.hash = '#' + Object.keys(options).map(key => { return key + '=' + options[key]; }).join('&')
+}
+
+document.getElementById('sort-select').addEventListener('change', sortChanged)
+document.getElementById('filter-select').addEventListener('change', filterChanged)
+
+if (options.sort) {
+    document.getElementById('sort-select').value = options.sort
+    sortChanged()
+}
+document.getElementById('filter-select').value = options.filter
+if (options.filter) {
+    filterChanged()
 }
 
 document.querySelectorAll('.films .film figure').forEach(figure => {

app/templates/films.html

@@ -3,28 +3,29 @@
 {% block main %}
 
 <div class="films">
-	<!--
-	<div>
+	<div class="actions">
+		<strong>Filter:</strong>
+		<select id="filter-select">
+			<option value="">All Types</option>
+			{% for type in types %}
+			<option value="{{ type.value }}">{{ type.title }}</option>
+			{% endfor %}
+		</select>
 		<strong>Sort:</strong>
 		<select id="sort-select">
-			<option value="position" selected>Default</option>
 			<option value="title">Title</option>
+			<option value="year">Year</option>
 			<option value="duration">Duration</option>
-			<option value="hue">Hue</option>
-			<option value="saturation">Saturation</option>
-			<option value="lightness">Lightness</option>
 		</select>
 	</div>
-	-->
 	<div id="films-list">
 	{% for film in films %}
 		<div class="film"
 			data-position="{{ film.position }}"
 			data-title="{{ film.data.title }}"
-			data-duration="{{ film.data.duration }}"
-			data-hue="{{ film.data.hue }}"
-			data-saturation="{{ film.data.saturation }}"
-			data-lightness="{{ film.data.lightness }}"
+			data-year="{{ film.data.year|default:"9999" }}"
+			data-duration="{{ film.duration_seconds }}"
+			data-type="{{ film.data.type|join:"," }}"
 		>
 		<a href="{{ film.get_absolute_url }}">
 		<figure>

app/video/management/commands/load_titles.py

@@ -24,7 +24,7 @@ class Command(BaseCommand):
 
         keys = [
             'id', 'title', 'director', 'summary', 'source', 'sourcedescription', 'date', 'location',
-            'country', 'type',
+            'country', 'type', 'year',
             'duration', 'featuring', 'cinematographer',
             'hue', 'saturation', 'lightness',
             'folder', 'folderdescription', 'rightslevel'
@@ -50,6 +50,7 @@ class Command(BaseCommand):
                 folders[item['folder']] = {
                     'title': item['folder'],
                     'date': item.get('date', ''),
+                    'year': item.get('year', ''),
                     'country': item.get('country', []),
                     'featuring': item.get('featuring', []),
                     'type': item['type'],

app/video/models.py

@@ -37,6 +37,12 @@ class Film(models.Model):
         if folder:
             return Text.objects.filter(Q(data__folder=folder) | Q(data__related=folder))
 
+    def duration_seconds(self):
+        duration = 0
+        for item in self.data.get('items', []):
+            duration += item['duration']
+        return duration
+
     def duration(self):
         return ox.format_duration(self.data['duration'] * 1000, verbosity=1, milliseconds=False)
 

app/video/views.py

@@ -1,5 +1,6 @@
 import logging
 import json
+from collections import Counter
 
 from django.shortcuts import render, redirect, get_object_or_404
 from django.views.decorators.csrf import csrf_exempt
@@ -56,6 +57,16 @@ def get_stream_prefix(request):
 def films(request):
     context = {}
     context['films'] = models.Film.objects.filter(public=True).order_by('position', 'data__title')
+    types = []
+    for f in context['films']:
+        types += f.data['type']
+    types = Counter(types)
+    context['types'] = []
+    for t in sorted(types):
+        context['types'].append({
+            'title': '%s (%s)' % (t, types[t]), 'value': t
+        })
+
     context['stream_prefix'] = get_stream_prefix(request)
     context['settings'] = settings
     return render(request, 'films.html', context)