Support for playing from URL in Audio and Video objects (streamlit#423)

* added conditional on element("url")

* added url as 4 to Audio and Video protobuf definitions

* Audio element: URL now checked and passed through

* getting audio element +url testing correctly

* added a URL selector with samples to the Audio example script

* JS now displays Audio element w/ URL as an audio player

* removed .swp file

* url positive and negative test cases working for Audio URL

* 3 audio samples from Helix autogenerated music

* added support for URL in frontend Video element

* added support for play-from-URL to Video element

* ogg, mp4, and webm formats all represented in the video example.

* added tests for URL in Video element

* make examples in selector look nicer

* linted and whatnot

* show YouTube links in iFrame

* video examples with 3 different styles of youtube link

* conditionals and regex to handle YouTube links in Video elements

* tests for youtube links added.

* audio Ref packed into tag

* updated docstrings per Thiago

* oneof url/data switch in Audio and Video protobufs

* added Type to Video proto to support switch on iframe + video tags

* refactored Audio + Video protobuf handling (WIP)

* test for Video.Type.YOUTUBE_IFRAME in python and JS

* formatting

* fixing bug preventing audio format + start_time from propagating

* fixing py2 bug where testing for type(data) in six.string_types fails

* py2/3 compat fix

* updated tests for changes in DeltaGenerator.py / media_proto.py

* tests for Python2 and Python3 behavior

* formatting

* minor doc tweak

* adding back Audio.tsx react components

* docstring formatting

* regex moved to global, refomatted (per Thiago)

* docstring formatting

examples/audio.py

@@ -21,6 +21,9 @@
 st.title("Audio test")
 
 
+st.title("Generated audio (440Hz sine wave)")
+
+
 def note(freq, length, amp, rate):
     t = np.linspace(0, length, length * rate)
     data = np.sin(2 * np.pi * freq * t) * amp
@@ -51,3 +54,23 @@ def note(freq, length, amp, rate):
 with io.open("sound.wav", "rb") as f:
     x.text("Sending wave...")
     x.audio(f)
+
+st.title("Audio from a URL")
+
+
+def shorten_audio_option(opt):
+    return opt.split("/")[-1]
+
+
+song = st.selectbox(
+    "Pick an MP3 to play",
+    (
+        "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3",
+        "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3",
+        "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-8.mp3",
+    ),
+    0,
+    shorten_audio_option,
+)
+
+st.audio(song)

examples/video.py

@@ -0,0 +1,43 @@
+# -*- coding: utf-8 -*-
+# Copyright 2018-2019 Streamlit Inc.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#    http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import streamlit as st
+
+st.title("Play Videos from URLs")
+
+st.write("st.video allows a variety of HTML5 supported video links, including YouTube.")
+
+
+def shorten_vid_option(opt):
+    return opt.split("/")[-1]
+
+
+# A random sampling of videos found around the web.  We should replace
+# these with those sourced from the streamlit community if possible!
+vidurl = st.selectbox(
+    "Pick a video to play",
+    (
+        "https://youtu.be/_T8LGqJtuGc",
+        "https://www.youtube.com/watch?v=kmfC-i9WgH0",
+        "https://www.youtube.com/embed/sSn4e1lLVpA",
+        "http://www.rochikahn.com/video/videos/zapatillas.mp4",
+        "http://www.marmosetcare.com/video/in-the-wild/intro.webm",
+        "https://www.orthopedicone.com/u/home-vid-4.mp4",
+    ),
+    0,
+    shorten_vid_option,
+)
+
+st.video(vidurl)

frontend/src/components/elements/Audio/Audio.tsx

@@ -43,6 +43,16 @@ class Audio extends React.PureComponent<Props> {
 
   public render(): React.ReactNode {
     const { element, width } = this.props
+    if (element.get("url")) {
+      return (
+        <audio
+          controls
+          src={element.get("url")}
+          className="stAudio"
+          style={{ width }}
+        />
+      )
+    }
     const dataUrl =
       "data:" + element.get("format") + ";base64," + element.get("data")
     return (

frontend/src/components/elements/Video/Video.tsx

@@ -17,6 +17,7 @@
 
 import React from "react"
 import { Map as ImmutableMap } from "immutable"
+import { Video as VideoProto } from "autogen/proto"
 
 interface Props {
   width: number
@@ -42,7 +43,41 @@ class Video extends React.PureComponent<Props> {
   }
 
   public render(): React.ReactNode {
+    /* Element may contain "url" or "data" property. */
+
     const { element, width } = this.props
+
+    if (element.get("url")) {
+      /* is this a YouTube link? if so we need a fancier tag. 
+         NOTE: This part assumes the URL is already an "embed" link.
+      */
+      if (element.get("type") === VideoProto.Type.YOUTUBE_IFRAME) {
+        const height = width * 0.75
+        const wid = width
+        return (
+          <iframe
+            title={element.get("url")}
+            src={element.get("url")}
+            width={wid}
+            height={height}
+            frameBorder="0"
+            allow="autoplay; encrypted-media"
+            allowFullScreen
+          ></iframe>
+        )
+      } else {
+        return (
+          <video
+            ref={this.videoRef}
+            controls
+            src={element.get("url")}
+            className="stVideo"
+            style={{ width }}
+          />
+        )
+      }
+    }
+
     const dataUrl =
       "data:" + element.get("format") + ";base64," + element.get("data")
     return (

lib/streamlit/DeltaGenerator.py

@@ -25,6 +25,7 @@
 import functools
 import json
 import random
+import re
 import textwrap
 import pandas as pd
 from datetime import datetime
@@ -1339,8 +1340,9 @@ def audio(self, element, data, format="audio/wav", start_time=0):
         ----------
         data : str, bytes, BytesIO, numpy.ndarray, or file opened with
                 io.open().
-            The audio data. Must include headers and any other bytes required
-            in the actual file.
+            Raw audio data or a string with a URL pointing to the file to load.
+            If passing the raw data, this must include headers and any other bytes 
+            required in the actual file.
         start_time: int
             The time from which this element should start playing.
         format : str
@@ -1361,11 +1363,8 @@ def audio(self, element, data, format="audio/wav", start_time=0):
         """
         # TODO: Provide API to convert raw NumPy arrays to audio file (with
         # proper headers, etc)?
-        import streamlit.elements.generic_binary_proto as generic_binary_proto
-
-        generic_binary_proto.marshall(element.audio, data)
-        element.audio.format = format
-        element.audio.start_time = start_time
+        from .elements import media_proto
+        media_proto.marshall_audio(element.audio, data, format, start_time)
 
     @_with_element
     def video(self, element, data, format="video/mp4", start_time=0):
@@ -1375,13 +1374,15 @@ def video(self, element, data, format="video/mp4", start_time=0):
         ----------
         data : str, bytes, BytesIO, numpy.ndarray, or file opened with
                 io.open().
-            Must include headers and any other bytes required in the actual
-            file.
-        start_time: int
-            The time from which this element should start playing.
+            Raw video data or a string with a URL pointing to the video
+            to load. Includes support for YouTube URLs.
+            If passing the raw data, this must include headers and any other 
+            bytes required in the actual file.
         format : str
             The mime type for the video file. Defaults to 'video/mp4'.
             See https://tools.ietf.org/html/rfc4281 for more info.
+        start_time: int
+            The time from which this element should start playing.
 
         Example
         -------
@@ -1397,11 +1398,8 @@ def video(self, element, data, format="video/mp4", start_time=0):
         """
         # TODO: Provide API to convert raw NumPy arrays to video file (with
         # proper headers, etc)?
-        import streamlit.elements.generic_binary_proto as generic_binary_proto
-
-        generic_binary_proto.marshall(element.video, data)
-        element.video.format = format
-        element.video.start_time = start_time
+        from .elements import media_proto
+        media_proto.marshall_video(element.video, data, format, start_time)
 
     @_with_element
     def button(self, element, label, key=None):