Add loop and preload attributes for media elements, fix null poster (#9797)

Picked from #9161

Fixes #7261
Fixes #5178
Fixes #4409

7 files changed, 160 insertions, 14 deletions

diff --git a/client/src/main/java/com/vaadin/client/ui/MediaBaseConnector.java b/client/src/main/java/com/vaadin/client/ui/MediaBaseConnector.java
index 0de1161078..9e457fa150 100644
--- a/client/src/main/java/com/vaadin/client/ui/MediaBaseConnector.java
+++ b/client/src/main/java/com/vaadin/client/ui/MediaBaseConnector.java
@@ -20,6 +20,7 @@ import com.vaadin.client.communication.StateChangeEvent;
 import com.vaadin.shared.communication.URLReference;
 import com.vaadin.shared.ui.AbstractMediaState;
 import com.vaadin.shared.ui.MediaControl;
+import com.vaadin.shared.ui.PreloadMode;
 
 public abstract class MediaBaseConnector extends AbstractComponentConnector {
 
@@ -53,6 +54,8 @@ public abstract class MediaBaseConnector extends AbstractComponentConnector {
         final AbstractMediaState state = getState();
 
         setAltText(state.altText); // must do before loading sources
+        setPreload(state.preload);
+        widget.setLoop(state.loop);
         widget.setAutoplay(state.autoplay);
         widget.setMuted(state.muted);
         widget.setControls(state.showControls);
@@ -83,6 +86,12 @@ public abstract class MediaBaseConnector extends AbstractComponentConnector {
         getWidget().setAltText(altText);
     }
 
+    private void setPreload(final PreloadMode preload) {
+        if (preload != null) {
+            getWidget().setPreload(preload.getValue());
+        }
+    }
+
     /**
      * @return the default HTML to show users with browsers that do not support
      *         HTML5 media markup.
diff --git a/client/src/main/java/com/vaadin/client/ui/VMediaBase.java b/client/src/main/java/com/vaadin/client/ui/VMediaBase.java
index 1c7da7d15b..27ddc0fcc7 100644
--- a/client/src/main/java/com/vaadin/client/ui/VMediaBase.java
+++ b/client/src/main/java/com/vaadin/client/ui/VMediaBase.java
@@ -68,6 +68,31 @@ public abstract class VMediaBase extends Widget {
         media.setMuted(mediaMuted);
     }
 
+    /**
+     * Sets the preload attribute that is intended to provide a hint to the
+     * browser how the media should be preloaded. See
+     * AbstractMedia.setPreload(PreloadMode) and PreloadMode for more
+     * information.
+     *
+     * @param preload
+     *            preload mode
+     * @since 7.7.11
+     */
+    public void setPreload(final String preload) {
+        media.setPreload(preload);
+    }
+
+    /**
+     * Enables or disables looping.
+     *
+     * @param loop
+     *            if true, enable looping
+     * @since 7.7.11
+     */
+    public void setLoop(final boolean loop) {
+        media.setLoop(loop);
+    }
+
     public void removeAllSources() {
         NodeList<com.google.gwt.dom.client.Element> l = media
                 .getElementsByTagName(SourceElement.TAG);
diff --git a/client/src/main/java/com/vaadin/client/ui/video/VideoConnector.java b/client/src/main/java/com/vaadin/client/ui/video/VideoConnector.java
index 80e7788dea..14a2a86764 100644
--- a/client/src/main/java/com/vaadin/client/ui/video/VideoConnector.java
+++ b/client/src/main/java/com/vaadin/client/ui/video/VideoConnector.java
@@ -34,7 +34,11 @@ public class VideoConnector extends MediaBaseConnector {
     @Override
     public void onStateChanged(StateChangeEvent stateChangeEvent) {
         super.onStateChanged(stateChangeEvent);
-        getWidget().setPoster(getResourceUrl(VideoConstants.POSTER_RESOURCE));
+
+        String resourceUrl = getResourceUrl(VideoConstants.POSTER_RESOURCE);
+        if (resourceUrl != null) {
+            getWidget().setPoster(resourceUrl);
+        }
     }
 
     @Override
diff --git a/server/src/main/java/com/vaadin/ui/AbstractMedia.java b/server/src/main/java/com/vaadin/ui/AbstractMedia.java
index a992554d67..800f5dca31 100644
--- a/server/src/main/java/com/vaadin/ui/AbstractMedia.java
+++ b/server/src/main/java/com/vaadin/ui/AbstractMedia.java
@@ -39,6 +39,7 @@ import com.vaadin.server.VaadinSession;
 import com.vaadin.shared.communication.URLReference;
 import com.vaadin.shared.ui.AbstractMediaState;
 import com.vaadin.shared.ui.MediaControl;
+import com.vaadin.shared.ui.PreloadMode;
 import com.vaadin.ui.declarative.DesignAttributeHandler;
 import com.vaadin.ui.declarative.DesignContext;
 
@@ -199,6 +200,48 @@ public abstract class AbstractMedia extends AbstractComponent {
     }
 
     /**
+     * Sets the preload attribute that is intended to provide a hint to the
+     * browser how the media should be preloaded. Valid values are 'none',
+     * 'metadata', 'preload', see the <a href=
+     * "https://developer.mozilla.org/en/docs/Web/HTML/Element/video#attr-preload">
+     * Mozilla Developer Network</a> for details.
+     *
+     * @param preload
+     *            preload mode
+     * @since 7.7.11
+     */
+    public void setPreload(final PreloadMode preload) {
+        getState().preload = preload;
+    }
+
+    /**
+     * @return the configured media preload value
+     * @since 7.7.11
+     */
+    public PreloadMode getPreload() {
+        return getState(false).preload;
+    }
+
+    /**
+     * Enables or disables looping.
+     *
+     * @param loop
+     *            if true, enable looping
+     * @since 7.7.11
+     */
+    public void setLoop(final boolean loop) {
+        getState().loop = loop;
+    }
+
+    /**
+     * @return true if looping is enabled
+     * @since 7.7.11
+     */
+    public boolean isLoop() {
+        return getState(false).loop;
+    }
+
+    /**
      * Set whether the alternative text ({@link #setAltText(String)}) is
      * rendered as HTML or not.
      *
diff --git a/shared/src/main/java/com/vaadin/shared/ui/AbstractMediaState.java b/shared/src/main/java/com/vaadin/shared/ui/AbstractMediaState.java
index d7cddf566a..6d5024a324 100644
--- a/shared/src/main/java/com/vaadin/shared/ui/AbstractMediaState.java
+++ b/shared/src/main/java/com/vaadin/shared/ui/AbstractMediaState.java
@@ -36,6 +36,22 @@ public class AbstractMediaState extends AbstractComponentState {
     @NoLayout
     public boolean muted;
 
+    /**
+     * Preload mode for the media.
+     *
+     * @since 7.7.11
+     */
+    @NoLayout
+    public PreloadMode preload;
+
+    /**
+     * Looping of media active (true) or not.
+     *
+     * @since 7.7.11
+     */
+    @NoLayout
+    public boolean loop;
+
     public List<URLReference> sources = new ArrayList<>();
 
     public List<String> sourceTypes = new ArrayList<>();
diff --git a/shared/src/main/java/com/vaadin/shared/ui/PreloadMode.java b/shared/src/main/java/com/vaadin/shared/ui/PreloadMode.java
new file mode 100644
index 0000000000..111278fb0c
--- /dev/null
+++ b/shared/src/main/java/com/vaadin/shared/ui/PreloadMode.java
@@ -0,0 +1,49 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ *
+ * 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.
+ */
+package com.vaadin.shared.ui;
+
+/**
+ * Enumeration that provides a hint to the browser how media should be
+ * preloaded.
+ *
+ * @since 7.7.11
+ */
+public enum PreloadMode {
+    /**
+     * Indicates that the whole video/audio file could be downloaded, even if
+     * the user is not expected to use it. This is the default value.
+     */
+    AUTO,
+
+    /**
+     * Indicates that only media metadata (e.g. length) should be preloaded.
+     */
+    METADATA,
+
+    /**
+     * Indicates that the video/audio should not be preloaded.
+     */
+    NONE;
+
+    /**
+     * Returns the preload mode string used by the browser.
+     *
+     * @return corresponding preload attribute value string
+     */
+    public String getValue() {
+        return name().toLowerCase();
+    }
+}
diff --git a/uitest/src/main/java/com/vaadin/tests/components/media/Media.java b/uitest/src/main/java/com/vaadin/tests/components/media/Media.java
index 33e783ab36..aadd98b8ce 100644
--- a/uitest/src/main/java/com/vaadin/tests/components/media/Media.java
+++ b/uitest/src/main/java/com/vaadin/tests/components/media/Media.java
@@ -17,11 +17,13 @@
 package com.vaadin.tests.components.media;
 
 import com.vaadin.server.ExternalResource;
+import com.vaadin.shared.ui.PreloadMode;
 import com.vaadin.tests.components.TestBase;
 import com.vaadin.ui.Audio;
 import com.vaadin.ui.Button;
 import com.vaadin.ui.Button.ClickEvent;
 import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.CheckBox;
 import com.vaadin.ui.Video;
 
 public class Media extends TestBase {
@@ -29,13 +31,10 @@ public class Media extends TestBase {
     @Override
     protected void setup() {
         final Video v = new Video("video");
-        v.setSources(
-                new ExternalResource(
-                        "http://jonatan.virtuallypreinstalled.com/media/big_buck_bunny.mp4"),
-                new ExternalResource(
-                        "http://jonatan.virtuallypreinstalled.com/media/big_buck_bunny.ogv"));
-        v.setWidth("640px");
-        v.setHeight("360px");
+        v.setSources(new ExternalResource(
+                "http://techslides.com/demos/sample-videos/small.ogv"));
+        v.setWidth("560px");
+        v.setHeight("320px");
         addComponent(v);
         addComponent(new Button("Play video", new ClickListener() {
 
@@ -53,13 +52,14 @@ public class Media extends TestBase {
             }
 
         }));
+        final CheckBox loop = new CheckBox("Loop");
+        loop.addValueChangeListener(event -> v.setLoop(event.getValue()));
+        addComponent(loop);
+        v.setPreload(PreloadMode.METADATA);
 
         final Audio a = new Audio("audio");
-        a.setSources(
-                new ExternalResource(
-                        "http://jonatan.virtuallypreinstalled.com/media/audio.mp3"),
-                new ExternalResource(
-                        "http://jonatan.virtuallypreinstalled.com/media/audio.ogg"));
+        a.setSources(new ExternalResource(
+                "http://www.sample-videos.com/audio/mp3/crowd-cheering.mp3"));
         addComponent(a);
 
         addComponent(new Button("Play audio", new ClickListener() {
@@ -83,7 +83,7 @@ public class Media extends TestBase {
     @Override
     protected String getDescription() {
         return "Video and audio files should play using the HTML5 elements. "
-                + "(Movie is (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org)";
+                + "(Movie is from http://techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5)";
     }
 
     @Override