Added loop and preload attributes for media elements, fixed null poster (#9161)

Fixes #7261
Fixes #5178
Fixes #4409

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.

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);

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

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;
 
@@ -198,6 +199,48 @@ public abstract class AbstractMedia extends AbstractComponent {
         return getState(false).altText;
     }
 
+    /**
+     * 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.

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<URLReference>();
 
     public List<String> sourceTypes = new ArrayList<String>();

shared/src/main/java/com/vaadin/shared/ui/PreloadMode.java

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2000-2014 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();
+    }
+}

uitest/src/main/java/com/vaadin/tests/components/media/Media.java

@@ -16,12 +16,16 @@
 
 package com.vaadin.tests.components.media;
 
+import com.vaadin.data.Property.ValueChangeEvent;
+import com.vaadin.data.Property.ValueChangeListener;
 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 {
@@ -31,11 +35,9 @@ public class Media extends TestBase {
         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");
+                        "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 +55,20 @@ public class Media extends TestBase {
             }
 
         }));
+        final CheckBox loop = new CheckBox("Loop");
+        loop.addValueChangeListener(new ValueChangeListener() {
+            @Override
+            public void valueChange(ValueChangeEvent event) {
+                v.setLoop(loop.booleanValue());
+            }
+        });
+        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"));
+                        "http://www.sample-videos.com/audio/mp3/crowd-cheering.mp3"));
         addComponent(a);
 
         addComponent(new Button("Play audio", new ClickListener() {
@@ -83,7 +92,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