Introduced VideoPlayer as base widget of VideoWithLowerThird / fixed

play button positioning

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/shared/mainmedia/MainMediaVideo.java

@@ -10,7 +10,7 @@ import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.SimplePanel;
 import com.google.gwt.user.client.ui.Widget;
 import com.sap.sailing.gwt.home.client.shared.LongNamesUtil;
-import com.sap.sailing.gwt.ui.client.media.VideoJSPlayer;
+import com.sap.sailing.gwt.home.client.shared.videoPlayer.VideoPlayer;
 import com.sap.sailing.gwt.ui.shared.media.SailingVideoDTO;
 
 public class MainMediaVideo extends Composite {
@@ -25,7 +25,7 @@ public class MainMediaVideo extends Composite {
     @UiField Element videoTitleWrapper;
     @UiField SimplePanel videoHolderUi;
     
-    final VideoJSPlayer vJs = new VideoJSPlayer();
+    final VideoPlayer vJs = new VideoPlayer();
 
     public MainMediaVideo(SailingVideoDTO video) {
         this(video, false);
@@ -41,7 +41,7 @@ public class MainMediaVideo extends Composite {
         // youtubeUrl += "&showinfo=0";
         // }
 
-        vJs.setVideo(video.getMimeType(), video.getSourceRef());
+        vJs.setVideo(video);
         vJs.addStyleName(MainMediaResources.INSTANCE.css().videopreview_videocontainer_video());
         videoHolderUi.setWidget(vJs);
         String eventName = video.getTitle();

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/shared/videoPlayer/PlayButton.gss

@@ -0,0 +1,14 @@
+.playButton {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -40px 0px 0px -40px;
+  padding: 0;
+  width: 80px;
+  height: 80px;
+  background-image: url("images/home/play.png");
+  background-color: transparent;
+  background-repeat: no-repeat; 
+  background-position: center;
+  cursor: pointer;
+}

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/shared/videoPlayer/PlayButton.java

@@ -0,0 +1,15 @@
+package com.sap.sailing.gwt.home.client.shared.videoPlayer;
+
+import com.google.gwt.dom.client.Document;
+import com.google.gwt.user.client.ui.Widget;
+
+public class PlayButton extends Widget {
+    
+    private final PlayButtonResources.LocalCss style = PlayButtonResources.INSTANCE.css();
+    
+    public PlayButton() {
+        style.ensureInjected();
+        setElement(Document.get().createDivElement());
+        getElement().addClassName(style.playButton());
+    }
+}

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/shared/videoPlayer/PlayButtonResources.java

@@ -4,14 +4,13 @@ import com.google.gwt.core.client.GWT;
 import com.google.gwt.resources.client.ClientBundle;
 import com.google.gwt.resources.client.CssResource;
 
-public interface VideoWithLowerThirdResources extends ClientBundle {
-    public static final VideoWithLowerThirdResources INSTANCE = GWT.create(VideoWithLowerThirdResources.class);
+public interface PlayButtonResources extends ClientBundle {
+    public static final PlayButtonResources INSTANCE = GWT.create(PlayButtonResources.class);
 
-    @Source("VideoWithLowerThird.gss")
+    @Source("PlayButton.gss")
     LocalCss css();
 
     public interface LocalCss extends CssResource {
-        String videoWithLowerThird();
-        String video();
+        String playButton();
     }
 }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/shared/videoPlayer/VideoPlayer.gss

@@ -1,4 +1,4 @@
-.videoWithLowerThird, .video {
+.videoPlayer {
   width: 100%;
   height: 100%;
 }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/shared/videoPlayer/VideoPlayer.java

@@ -0,0 +1,80 @@
+package com.sap.sailing.gwt.home.client.shared.videoPlayer;
+
+import com.google.gwt.dom.client.VideoElement;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.FlowPanel;
+import com.sap.sailing.gwt.ui.client.media.PauseEvent;
+import com.sap.sailing.gwt.ui.client.media.PlayEvent;
+import com.sap.sailing.gwt.ui.client.media.VideoJSPlayer;
+import com.sap.sse.gwt.client.media.VideoDTO;
+
+public class VideoPlayer extends Composite {
+    private final VideoPlayerResources.LocalCss style = VideoPlayerResources.INSTANCE.css();
+    private VideoJSPlayer videoJSPlayer;
+    protected final FlowPanel panel;
+    private final PlayButton playButton = new PlayButton();
+    
+    private boolean initialized = false;
+    
+    public VideoPlayer() {
+        this(true, false);
+    }
+    public VideoPlayer(boolean fullHeightWidth, boolean autoplay) {
+        style.ensureInjected();
+        panel = new FlowPanel();
+        panel.addStyleName(style.videoPlayer());
+        videoJSPlayer = new VideoJSPlayer(fullHeightWidth, autoplay);
+        videoJSPlayer.addPlayHandler(new PlayEvent.Handler() {
+            @Override
+            public void onStart(PlayEvent event) {
+                onPlay();
+            }
+        });
+        videoJSPlayer.addPauseHandler(new PauseEvent.Handler() {
+            @Override
+            public void onPause(PauseEvent event) {
+                onPaused();
+            }
+        });
+        panel.add(videoJSPlayer);
+        playButton.addDomHandler(new ClickHandler() {
+            
+            @Override
+            public void onClick(ClickEvent event) {
+                videoJSPlayer.play();
+            }
+        }, ClickEvent.getType());
+        panel.add(playButton);
+        initWidget(panel);
+    }
+    
+    protected void initialize() {
+    }
+    
+    protected void onPlay() {
+        playButton.setVisible(false);
+    }
+    
+    protected void onPaused() {
+        playButton.setVisible(true);
+    }
+    
+    public void setVideo(VideoDTO video) {
+        if(!initialized) {
+            initialize();
+        }
+        videoJSPlayer.setVideo(video.getMimeType(), video.getSourceRef());
+    }
+    
+    public VideoElement getVideoElement() {
+        return videoJSPlayer.getVideoElement();
+    }
+    public boolean isFullscreen() {
+        return videoJSPlayer.isFullscreen();
+    }
+    public boolean paused() {
+        return videoJSPlayer.paused();
+    }
+}

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/shared/videoPlayer/VideoPlayerResources.java

@@ -0,0 +1,16 @@
+package com.sap.sailing.gwt.home.client.shared.videoPlayer;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.resources.client.ClientBundle;
+import com.google.gwt.resources.client.CssResource;
+
+public interface VideoPlayerResources extends ClientBundle {
+    public static final VideoPlayerResources INSTANCE = GWT.create(VideoPlayerResources.class);
+
+    @Source("VideoPlayer.gss")
+    LocalCss css();
+
+    public interface LocalCss extends CssResource {
+        String videoPlayer();
+    }
+}

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/shared/videoPlayer/VideoWithLowerThird.java

@@ -1,58 +1,38 @@
 package com.sap.sailing.gwt.home.client.shared.videoPlayer;
 
-import com.google.gwt.dom.client.VideoElement;
-import com.google.gwt.user.client.ui.Composite;
-import com.google.gwt.user.client.ui.FlowPanel;
 import com.sap.sailing.gwt.home.client.shared.lowerThird.LowerThird;
-import com.sap.sailing.gwt.ui.client.media.PlayEvent;
-import com.sap.sailing.gwt.ui.client.media.VideoJSPlayer;
 import com.sap.sailing.gwt.ui.shared.general.LabelType;
 import com.sap.sse.gwt.client.media.VideoDTO;
 
-public class VideoWithLowerThird extends Composite {
-    private final VideoWithLowerThirdResources.LocalCss style = VideoWithLowerThirdResources.INSTANCE.css();
-    private final VideoJSPlayer videoJSPlayer;
-    private final LowerThird lowerThird;
+public class VideoWithLowerThird extends VideoPlayer {
+    private final LowerThird lowerThird = new LowerThird();
     
     public VideoWithLowerThird() {
         this(true, false);
     }
     public VideoWithLowerThird(boolean fullHeightWidth, boolean autoplay) {
-        style.ensureInjected();
-        FlowPanel panel = new FlowPanel();
-        panel.addStyleName(style.videoWithLowerThird());
-        videoJSPlayer = new VideoJSPlayer(fullHeightWidth, autoplay);
-        panel.add(videoJSPlayer);
-        lowerThird = new LowerThird();
+        super(fullHeightWidth, autoplay);
+    }
+    
+    @Override
+    protected void initialize() {
         lowerThird.setVisible(false);
         panel.add(lowerThird);
-        initWidget(panel);
-        
-        videoJSPlayer.addPlayHandler(new PlayEvent.Handler() {
-            @Override
-            public void onStart(PlayEvent event) {
-                lowerThird.setVisible(false);
-            }
-        });
+    }
+    
+    @Override
+    protected void onPlay() {
+        super.onPlay();
+        lowerThird.setVisible(false);
     }
     
     public void setVideo(VideoDTO video) {
-        videoJSPlayer.setVideo(video.getMimeType(), video.getSourceRef());
+        super.setVideo(video);
         if(video.getTitle() != null && !video.getTitle().isEmpty()) {
-            lowerThird.setVisible(true);
+            lowerThird.setVisible(paused());
             lowerThird.setData(video.getTitle(), video.getSubtitle(), LabelType.NONE);
         } else {
             lowerThird.setVisible(false);
         }
     }
-    
-    public VideoElement getVideoElement() {
-        return videoJSPlayer.getVideoElement();
-    }
-    public boolean isFullscreen() {
-        return videoJSPlayer.isFullscreen();
-    }
-    public boolean paused() {
-        return videoJSPlayer.paused();
-    }
 }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/client/media/VideoJSPlayer.java

@@ -104,12 +104,19 @@ public class VideoJSPlayer extends Widget {
         return this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player.currentTime(currentTime);
     }-*/;
     
+    public native void play() /*-{
+        return this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player.play();
+    }-*/;
+    
     /**
      * Check whether or not the player is running in full screen mode
      * 
      * @return <code>true</code> if the player is running in full screen mode, <code>false</code> otherwise
      */
     public native boolean isFullscreen() /*-{
+        if(this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player == null) {
+            return false;
+        }
         return this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player.isFullscreen();
     }-*/;
 
@@ -119,6 +126,9 @@ public class VideoJSPlayer extends Widget {
      * @return <code>true</code> if the player is paused, <code>false</code> if it is playing
      */
     public native boolean paused() /*-{
+        if(this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player == null) {
+            return true;
+        }
         return this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player.paused();
     }-*/;
     

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/client/media/VideoJSPlayer.ui.xml

@@ -3,22 +3,8 @@
 	<ui:style gss="true">
 		@external vjs-big-play-button;
 		.vjs-big-play-button {
-			background-image: url("images/home/play.png") !important;
-			width: 80px !important;
-			height: 80px !important;
-			background-color: transparent !important;
-			background-repeat: no-repeat !important; 
-			padding: 0 !important;
-			border: none !important;
-			box-shadow: none !important;
-			z-index: auto !important;
+			display: none !important;
 		}
-		.vjs-big-play-button:BEFORE {
-			content: "" !important;
-		}
-		.caption {
-			padding: 5px;
-		} 
 		.player {
 			width: 100%;
 			height: 100%;