Merge pull request #427 from graphemecluster/master

Demo: Add Comparison and Fix Bug

demo.ipynb

@@ -111,8 +111,8 @@
         "\tcolor: lightgray;\n",
         "\tfont-size: 72px;\n",
         "}\n",
-        ".output_text {\n",
-        "\tdisplay: none !important;\n",
+        "div.stream {\n",
+        "\tdisplay: none;\n",
         "}\n",
         ".title {\n",
         "\tfont-size: 20px;\n",
@@ -199,6 +199,19 @@
         ".loading-label {\n",
         "\tcolor: gray;\n",
         "}\n",
+        ".comparison-widget {\n",
+        "\twidth: 256px;\n",
+        "\theight: 256px;\n",
+        "\tborder: 1px solid gray;\n",
+        "\tmargin-left: 2px;\n",
+        "}\n",
+        ".comparison-label {\n",
+        "\tcolor: gray;\n",
+        "\tfont-size: 14px;\n",
+        "\ttext-align: center;\n",
+        "\tposition: relative;\n",
+        "\tbottom: 3px;\n",
+        "}\n",
         "@keyframes spin {\n",
         "\tfrom { transform: rotate(0deg); }\n",
         "\tto { transform: rotate(360deg); }\n",
@@ -338,7 +351,15 @@
         "back = ipywidgets.Button(description='Back', button_style='primary')\n",
         "back.add_class('output-button')\n",
         "back.on_click(back_to_main)\n",
-        "complete = ipywidgets.VBox([output_widget, download, convert, back])\n",
+        "\n",
+        "comparison_widget = ipywidgets.Output()\n",
+        "comparison_widget.add_class('comparison-widget')\n",
+        "comparison_label = ipywidgets.Label('Comparison')\n",
+        "comparison_label.add_class('comparison-label')\n",
+        "complete = ipywidgets.HBox([\n",
+        "\tipywidgets.VBox([output_widget, download, convert, back]),\n",
+        "\tipywidgets.VBox([comparison_widget, comparison_label])\n",
+        "])\n",
         "\n",
         "display(ipywidgets.VBox([main, loading, complete]))\n",
         "display(Javascript(\"\"\"\n",
@@ -420,7 +441,7 @@
         "\tfor name, file_info in upload_input_video_button.value.items():\n",
         "\t\tcontent = file_info['content']\n",
         "\tif content is not None:\n",
-        "\t\tselected_video = io.BytesIO(content)\n",
+        "\t\tselected_video = content\n",
         "\t\tpreview = resize(PIL.Image.fromarray(thumbnail(selected_video)).convert(\"RGB\"))\n",
         "\t\tinput_video_widget.clear_output(wait=True)\n",
         "\t\twith input_video_widget:\n",
@@ -466,7 +487,23 @@
         "\tloading.layout.display = 'none'\n",
         "\tcomplete.layout.display = ''\n",
         "\twith output_widget:\n",
-        "\t\tdisplay(HTML('<video controls src=\"data:video/mp4;base64,%s\" />' % b64encode(open('output.mp4', 'rb').read()).decode()))\n",
+        "\t\tdisplay(HTML('<video id=\"left\" controls src=\"data:video/mp4;base64,%s\" />' % b64encode(open('output.mp4', 'rb').read()).decode()))\n",
+        "\twith comparison_widget:\n",
+        "\t\tdisplay(HTML('<video id=\"right\" src=\"data:video/mp4;base64,%s\" />' % b64encode(open(selected_video, 'rb').read() if type(selected_video) is str else selected_video).decode()))\n",
+        "\tdisplay(Javascript(\"\"\"\n",
+        "\t(function(left, right) {\n",
+        "\t\tleft.addEventListener(\"play\", function() {\n",
+        "\t\t\tright.play();\n",
+        "\t\t});\n",
+        "\t\tleft.addEventListener(\"pause\", function() {\n",
+        "\t\t\tright.pause();\n",
+        "\t\t});\n",
+        "\t\tleft.addEventListener(\"seeking\", function() {\n",
+        "\t\t\tright.currentTime = left.currentTime;\n",
+        "\t\t});\n",
+        "\t})(document.getElementById(\"left\"), document.getElementById(\"right\"));\n",
+        "\t\"\"\"))\n",
+        "\t\n",
         "generate_button.on_click(generate)\n",
         "\n",
         "loading.layout.display = 'none'\n",