add poster script

.gitignore

@@ -1 +1,2 @@
 *.pyc
+*.swp

scripts/poster.fierfly.py

@@ -0,0 +1,170 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+import os
+
+from PIL import Image
+from PIL import ImageDraw
+import json
+from optparse import OptionParser
+import ox
+from ox.image import drawText, wrapText
+import sys
+
+root_dir = os.path.normpath(os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
+static_root = os.path.join(os.path.dirname(__file__), 'data')
+
+def render_poster(data, poster):
+
+    title = ox.decode_html(data.get('title', ''))
+    director = ox.decode_html(', '.join(data.get('show', [])))
+    year = str(data.get('date', ''))
+    series = data.get('isSeries', False)
+    oxdb_id = data['oxdbId']
+    imdb_id = data['id']
+    frame = data.get('frame')
+    timeline = data.get('timeline')
+    if not frame and director:
+        api = ox.API('http://localhost:2620/api/')
+        r = api.findEntities({
+            "query": {
+                "conditions": [
+                    {
+                        "key": "name", "operator": "==", "value": data["show"][0]
+                    }
+                ]
+            },
+            "keys": ["id", "frame"]
+        })["data"]["items"]
+        if r:
+            did = r[0]["image"]
+            did = '0' * (7 - len(did)) + did
+            frame = f'/srv/pandora/data/documents/{did[:2]}/{did[2:4]}/{did[4:6]}/{did[6:]}/data.jpg'
+
+
+    def get_oxdb_color(oxdb_id, series=False):
+        i = int(round((int(oxdb_id[2:10], 16) * 762 / pow(2, 32))))
+        if i < 127:
+            color = (127, i, 0)
+        elif i < 254:
+            color = (254 - i, 127, 0)
+        elif i < 381:
+            color = (0, 127, i - 254)
+        elif i < 508:
+            color = (0, 508 - i, 127)
+        elif i < 635:
+            color = (i - 508, 0, 127)
+        else:
+            color = (127, 0, 762 - i)
+        if series:
+            color = tuple(map(lambda x: x + 128, color))
+        return color
+
+    poster_width = 640
+    poster_height = 1024
+    poster_ratio = poster_width / poster_height
+    poster_image = Image.new('RGB', (poster_width, poster_height))
+    draw = ImageDraw.Draw(poster_image)
+    font_file = os.path.join(static_root, 'DejaVuSansCondensedBold.ttf')
+
+    font_size = {
+        'small': 28,
+        'large': 42,
+    }
+
+    # frame
+    frame_width = poster_width
+    frame_ratio = 4 / 3
+    frame_height = int(round(frame_width / frame_ratio))
+    if frame:
+        frame_image = Image.open(frame)
+        frame_image_ratio = frame_image.size[0] / frame_image.size[1]
+        if frame_ratio < frame_image_ratio:
+            frame_image = frame_image.resize((int(frame_height * frame_image_ratio), frame_height), Image.LANCZOS)
+            left = int((frame_image.size[0] - frame_width) / 2)
+            frame_image = frame_image.crop((left, 0, left + frame_width, frame_height))
+        else:
+            frame_image = frame_image.resize((frame_width, int(frame_width / frame_image_ratio)), Image.LANCZOS)
+            top = int((frame_image.size[1] - frame_height) / 2)
+            frame_image = frame_image.crop((0, top, frame_width, top + frame_height))
+        poster_image.paste(frame_image, (0, 0))
+
+    # timeline
+    timeline_width = poster_width
+    timeline_height = 64
+    if timeline:
+        timeline_image = Image.open(timeline)
+        timeline_image = timeline_image.resize((timeline_width, timeline_height), Image.LANCZOS)
+        poster_image.paste(timeline_image, (0, frame_height))
+
+    # text
+    text_width = poster_width
+    text_height = poster_height - frame_height - timeline_height
+    text_top = frame_height + timeline_height
+    text_bottom = text_top + text_height
+    text_margin = 16
+    text_color = get_oxdb_color(oxdb_id, series)
+    font_color = tuple(map(lambda x: x - 128 if series else x + 128, text_color))
+    draw.rectangle([(0, text_top), (text_width, text_bottom)], fill=text_color)
+    offset_top = text_top + text_margin
+    if not director:
+        title_max_lines = 7
+    else:
+        title_max_lines = min(len(wrapText(title, text_width - 2 * text_margin, 0, font_file, font_size['large'])), 6)
+        director_max_lines = 9 - int((title_max_lines * 3 - 1) / 2)
+    if director:
+        lines = wrapText(director, text_width - 2 * text_margin, director_max_lines, font_file, font_size['small'])
+        for i, line in enumerate(lines):
+            size = drawText(poster_image, (text_margin, offset_top), line, font_file, font_size['small'], font_color)
+            offset_top += font_size['small'] + 2
+        offset_top += size[1] - font_size['small'] + text_margin / 2
+    lines = wrapText(title, text_width - 2 * text_margin, title_max_lines, font_file, font_size['large'])
+    for i, line in enumerate(lines):
+        size = drawText(poster_image, (text_margin, offset_top + 5), line, font_file, font_size['large'], font_color)
+        offset_top += font_size['large'] + 3
+    offset_top += size[1] - font_size['small'] + text_margin / 2
+    if year:
+        drawText(poster_image, (text_margin, offset_top), year, font_file, font_size['small'], font_color)
+    item_id = imdb_id or oxdb_id
+    drawText(poster_image, (text_margin, text_bottom - text_margin - font_size['large'] + 2), item_id, font_file, font_size['large'], font_color)
+
+    '''
+    # logo
+    logo_height = 32
+    logo_image = Image.open(os.path.join(static_root, '..', '..', 'static', 'png', 'logo.png'))
+    logo_width = int(round(logo_height * logo_image.size[0] / logo_image.size[1]))
+    logo_image = logo_image.resize((logo_width, logo_height), Image.LANCZOS)
+    logo_left = text_width - text_margin - logo_width
+    logo_top = text_bottom - text_margin - logo_height
+    for y in range(logo_height):
+        for x in range(logo_width):
+            poster_color = poster_image.getpixel((logo_left + x, logo_top + y))
+            logo_color = logo_image.getpixel((x, y))[0]
+            alpha = logo_image.getpixel((x, y))[3]
+            if series:
+                poster_color = tuple(map(lambda x: int(x - (logo_color - 16) * alpha / 255), poster_color))
+            else:
+                poster_color = tuple(map(lambda x: int(x + (logo_color - 16) * alpha / 255), poster_color))
+            poster_image.putpixel((logo_left + x, logo_top + y), poster_color)
+i   '''
+    poster_image.save(poster)
+
+def main():
+    parser = OptionParser()
+    parser.add_option('-d', '--data', dest='data', help='json file with metadata', default=None)
+    parser.add_option('-p', '--poster', dest='poster', help='Poster (image file to be written)')
+    (options, args) = parser.parse_args()
+
+    if None in (options.data, options.poster):
+        parser.print_help()
+        sys.exit()
+
+    if options.data == '-':
+        data = json.load(sys.stdin)
+    else:
+        with open(options.data) as f:
+            data = json.load(f)
+    render_poster(data, options.poster)
+
+
+if __name__ == "__main__":
+    main()

static/js/infoView.firefly.js

@@ -122,6 +122,12 @@ pandora.ui.infoView = function(data, isMixed) {
             orientation: 'vertical'
         });
 
+        var $left = Ox.Element()
+            .css({
+                position: 'absolute'
+            })
+            .appendTo($info);
+
         if (!isMultiple) {
             var $icon = Ox.Element({
                     element: '<img>',
@@ -143,7 +149,7 @@ pandora.ui.infoView = function(data, isMixed) {
                 .bindEvent({
                     singleclick: toggleIconSize
                 })
-                .appendTo($info),
+                .appendTo($left),
 
             $reflection = $('<div>')
                 .addClass('OxReflection')
@@ -155,7 +161,7 @@ pandora.ui.infoView = function(data, isMixed) {
                     height: iconSize / 2 + 'px',
                     overflow: 'hidden'
                 })
-                .appendTo($info),
+                .appendTo($left),
 
             $reflectionIcon = $('<img>')
                 .attr({
@@ -181,6 +187,16 @@ pandora.ui.infoView = function(data, isMixed) {
                 .appendTo($reflection);
         }
 
+        var $data = $('<div>')
+            .addClass('OxTextPage')
+            .css({
+                position: 'absolute',
+                left: margin + 'px',
+                top: margin + iconHeight + margin + 'px',
+                width: iconSize + 'px',
+            })
+            .appendTo($left)
+
         var $text = Ox.Element()
             .addClass('OxTextPage')
             .css({
@@ -218,6 +234,82 @@ pandora.ui.infoView = function(data, isMixed) {
         pandora.createLinks($info);
     }
 
+    // Show description -----------------------------------------------------
+    if (!isMultiple) {
+        ;['show'].forEach(key => {
+            var $box = $('<div>').appendTo($data);
+            (data[key] ? pandora.api.findEntities : Ox.noop)({
+                query: {
+                    conditions: [{
+                        key: 'type', operator: '==', value: Ox.decodeHTMLEntities(key)
+                    }, {
+                        key: 'name', operator: '==', value: Ox.decodeHTMLEntities(data[key][0] || '')
+                    }],
+                    operator: '&'
+                },
+                keys: ['id', 'name', 'description', 'image']
+            }, function(result) {
+                if (data[key] && ((result && result.data.items.length == 1) || canEdit)) {
+                    var entity = {}
+                    if (result && result.data.items.length) {
+                        entity = result.data.items[0]
+                    }
+                    $('<div>')
+                        .html(Ox._('About {0}:', [data[key]]))
+                        .css({
+                            'padding-top': '4px',
+                            'font-weight': 'bold'
+                        })
+                        .appendTo($box);
+                    $('<div>')
+                        .addClass("InlineImages")
+                        .append(
+                            Ox.EditableContent({
+                                clickLink: pandora.clickLink,
+                                editable: false,
+                                placeholder: formatLight(Ox._('No {0} Description', [Ox._(Ox.toTitleCase(key))])),
+                                tooltip: canEdit ? pandora.getEditTooltip() : '',
+                                type: 'textarea',
+                                value: entity.description || ''
+                            })
+                            .css(css)
+                            .css({
+                                'text-align': ''
+                            })
+                            .bindEvent({
+                                doubleclick: function(event) {
+                                    if (!canEdit) {
+                                        return
+                                    }
+                                    if (entity.id) {
+                                        var set = {}
+                                        set['entitiesType'] = key
+                                        set['entitiesSelection.' + key] = [entity.id];
+                                        pandora.UI.set(set);
+                                        pandora.$ui.entitiesDialog = pandora.ui.entitiesDialog().open();
+                                    } else {
+                                        pandora.api.addEntity({
+                                            type: key,
+                                            name: data[key]
+                                        }, function(result) {
+                                            var set = {}
+                                            set['entitiesType'] = key
+                                            set['entitiesSelection.' + key] = [result.data.id];
+                                            pandora.UI.set(set);
+                                            pandora.$ui.entitiesDialog = pandora.ui.entitiesDialog().open();
+                                        })
+                                    }
+                                }
+                            })
+                        ).css({
+                            margin: '12px 0',
+                        })
+                        .appendTo($box);
+                }
+            })
+        });
+    }
+
     // Title -------------------------------------------------------------------
 
     $('<div>')
@@ -260,16 +352,11 @@ pandora.ui.infoView = function(data, isMixed) {
 
     if (canEdit || data.summary) {
         $('<div>')
+            .addClass("InlineImages")
             .append(
                 Ox.EditableContent({
                     clickLink: pandora.clickLink,
                     editable: canEdit,
-                    format: function(value) {
-                        return value.replace(
-                            /<img src=/g,
-                            '<img style="float: left; max-width: 256px; max-height: 256px; margin: 0 16px 16px 0" src='
-                        );
-                    },
                     maxHeight: Infinity,
                     placeholder: formatLight(Ox._( isMixed.summary ? 'Mixed Summary' : 'No Summary')),
                     tooltip: canEdit ? pandora.getEditTooltip() : '',