implemented 'recent videos' partial on homepage

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/start/SmartphoneStartView.java

@@ -24,12 +24,13 @@ public class SmartphoneStartView extends Composite implements StartView {
     @UiField Stage stage;
     @UiField(provided=true) MainSponsors mainSponsors;
     @UiField(provided=true)  MainEvents mainEvents;
-    @UiField MainMedia mainMedia;
+    @UiField(provided=true) MainMedia mainMedia;
     @UiField SocialFooter socialFooter;
 
     public SmartphoneStartView(PlaceNavigator navigator) {
         mainSponsors = new MainSponsors(navigator);
         mainEvents = new MainEvents(navigator);
+        mainMedia = new MainMedia(navigator);
         initWidget(uiBinder.createAndBindUi(this));
     }
 
@@ -41,5 +42,6 @@ public class SmartphoneStartView extends Composite implements StartView {
     @Override
     public void setRecentEvents(List<EventDTO> recentEvents) {
         mainEvents.setRecentEvents(recentEvents);
+        mainMedia.setRecentEvents(recentEvents);
     }
 }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/place/start/TabletAndDesktopStartView.java

@@ -24,12 +24,14 @@ public class TabletAndDesktopStartView extends Composite implements StartView {
     @UiField Stage stage;
     @UiField(provided=true) MainSponsors mainSponsors;
     @UiField(provided=true) MainEvents mainEvents;
-    @UiField MainMedia mainMedia;
+    @UiField(provided=true) MainMedia mainMedia;
     @UiField SocialFooter socialFooter;
 
     public TabletAndDesktopStartView(PlaceNavigator navigator) {
         mainSponsors = new MainSponsors(navigator);
         mainEvents = new MainEvents(navigator);
+        mainMedia = new MainMedia(navigator);
+        
         initWidget(uiBinder.createAndBindUi(this));
     }
 
@@ -41,5 +43,6 @@ public class TabletAndDesktopStartView extends Composite implements StartView {
     @Override
     public void setRecentEvents(List<EventDTO> recentEvents) {
         mainEvents.setRecentEvents(recentEvents);
+        mainMedia.setRecentEvents(recentEvents);
     }
 }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/shared/mainevents/MainEvents.css

@@ -3,3 +3,41 @@
   font-size: 1rem;
   position: relative;
 }
+
+/**
+ * Events on the main page
+ */
+.eventteaser {
+  font-size: 16px;
+  font-size: 1rem;
+  display: inline-block;
+  margin-bottom: 2.8125em;
+}
+.eventteaser:hover {
+  text-decoration: none;
+}
+.eventteaser:hover .eventteaser_name {
+  text-decoration: underline;
+}
+.eventteaser:hover .eventteaser_image {
+  opacity: 0.9;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+  filter: literal("alpha(opacity=90)");
+}
+.eventteaser_image {
+  position: relative;
+}
+.eventteaser_series {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+.eventteaser_name {
+  font-size: 1.375em;
+  font-weight: bold;
+  color: #008fcc;
+  margin-top: 0.3125em;
+}
+.eventteaser_location {
+  color: #222;
+}

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/shared/mainevents/MainEvents.java

@@ -41,12 +41,18 @@ public class MainEvents extends Composite {
         int size = recentEvents.size();
         if(size > 0) {
             event1.setEvent(recentEvents.get(0));
+        } else {
+            event1.setVisible(false);
         }
         if(size > 1) {
             event2.setEvent(recentEvents.get(1));
+        } else {
+            event2.setVisible(false);
         }
         if(size > 2) {
             event3.setEvent(recentEvents.get(2));
+        } else {
+            event3.setVisible(false);
         }
     }
 }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/shared/mainevents/MainEventsResources.java

@@ -12,5 +12,10 @@ public interface MainEventsResources extends ClientBundle {
 
     public interface LocalCss extends CssResource {
         String mainevents();    
+        String eventteaser();
+        String eventteaser_name();
+        String eventteaser_image();
+        String eventteaser_series();
+        String eventteaser_location();
     }
 }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/shared/mainevents/RecentEvent.css

@@ -1,37 +0,0 @@
-/**
- * Events on the main page
- */
-.eventteaser {
-  font-size: 16px;
-  font-size: 1rem;
-  display: inline-block;
-  margin-bottom: 2.8125em;
-}
-.eventteaser:hover {
-  text-decoration: none;
-}
-.eventteaser:hover .eventteaser_name {
-  text-decoration: underline;
-}
-.eventteaser:hover .eventteaser_image {
-  opacity: 0.9;
-  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
-  filter: literal("alpha(opacity=90)");
-}
-.eventteaser_image {
-  position: relative;
-}
-.eventteaser_series {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}
-.eventteaser_name {
-  font-size: 1.375em;
-  font-weight: bold;
-  color: #008fcc;
-  margin-top: 0.3125em;
-}
-.eventteaser_location {
-  color: #222;
-}

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/shared/mainevents/RecentEvent.java

@@ -27,7 +27,7 @@ public class RecentEvent extends Composite {
 
     private EventDTO event;
 
-    private final String defaultImageUrl = "http://static.sapsailing.com/newhome/event-1.jpg";
+    private final String defaultImageUrl = "http://static.sapsailing.com/newhome/default_event_photo.jpg";
 
     interface RecentEventUiBinder extends UiBinder<Widget, RecentEvent> {
     }
@@ -38,7 +38,6 @@ public class RecentEvent extends Composite {
     
     public RecentEvent(PlaceNavigator navigator) {
         this.navigator = navigator;
-        RecentEventResources.INSTANCE.css().ensureInjected();
         initWidget(uiBinder.createAndBindUi(this));
     }
     
@@ -48,7 +47,7 @@ public class RecentEvent extends Composite {
     }
 
     @UiHandler("eventOverviewLink")
-    public void goToHome(ClickEvent e) {
+    public void goToEventPlace(ClickEvent e) {
         if(event.getBaseURL().contains("localhost") || event.getBaseURL().contains("127.0.0.1")) {
             navigator.goToEvent(event.id.toString());
         } else {

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/shared/mainevents/RecentEvent.ui.xml

@@ -4,7 +4,7 @@
     xmlns:s="urn:import:com.sap.sailing.gwt.home.client.shared">
     <ui:with field="i18n" type="com.sap.sailing.gwt.home.client.i18n.TextMessages"/>
     <ui:with field="res" type="com.sap.sailing.gwt.home.client.HomeResources" />
-    <ui:with field="local_res" type="com.sap.sailing.gwt.home.client.shared.mainevents.RecentEventResources" />
+    <ui:with field="local_res" type="com.sap.sailing.gwt.home.client.shared.mainevents.MainEventsResources" />
     <g:HTMLPanel>
     <div class="{res.mediaCss.small12} {res.mediaCss.medium6} {res.mediaCss.large4} {res.mediaCss.columns}">
         <g:Anchor ui:field="eventOverviewLink" styleName="{local_res.css.eventteaser}" href="javascript:;">

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/client/shared/mainevents/RecentEventResources.java

@@ -1,20 +0,0 @@
-package com.sap.sailing.gwt.home.client.shared.mainevents;
-
-import com.google.gwt.core.client.GWT;
-import com.google.gwt.resources.client.ClientBundle;
-import com.google.gwt.resources.client.CssResource;
-
-public interface RecentEventResources extends ClientBundle {
-    public static final RecentEventResources INSTANCE = GWT.create(RecentEventResources.class);
-
-    @Source("com/sap/sailing/gwt/home/client/shared/mainevents/RecentEvent.css")
-    LocalCss css();
-
-    public interface LocalCss extends CssResource {
-        String eventteaser();
-        String eventteaser_name();
-        String eventteaser_image();
-        String eventteaser_series();
-        String eventteaser_location();
-    }
-}

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

@@ -32,7 +32,7 @@
   transform: translate(0, -50%);
   width: 60px;
   height: 60px;
-  background-image: url("../images/media-controls__arrows.png");
+  background-image: url("images/home/media-controls__arrows.png");
 }
 .media_slideshow_controlsprev {
   left: 0;
@@ -49,7 +49,7 @@
   background-position: 100% 100%;
 }
 .media_slideshow_controlsfullsize {
-  background-image: url("../images/media-controls__fullsize.png");
+  background-image: url("images/home/media-controls__fullsize.png");
   right: 0;
   bottom: 0;
   width: 40px;
@@ -80,7 +80,7 @@
   transform: translate(-50%, 0);
   width: 69px;
   height: 69px;
-  background: url("/images/video__preview--play.png");
+  background: url("images/home/video__preview--play.png");
   -webkit-background-size: contain;
   -moz-background-size: contain;
   background-size: contain;

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

@@ -1,25 +1,69 @@
 package com.sap.sailing.gwt.home.client.shared.mainmedia;
 
+import java.util.ArrayList;
+import java.util.List;
+
 import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.DivElement;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.user.client.ui.Composite;
-import com.google.gwt.user.client.ui.Label;
 import com.google.gwt.user.client.ui.Widget;
+import com.sap.sailing.gwt.home.client.app.PlaceNavigator;
+import com.sap.sailing.gwt.ui.shared.EventDTO;
 
 public class MainMedia extends Composite {
 
-    @UiField Label videoLength;
-    @UiField Label videoTitle;
+    @UiField DivElement photoImage;
+
+    @UiField(provided=true) RecentEventVideo eventVideo1;
+    @UiField(provided=true) RecentEventVideo eventVideo2;
+    @UiField(provided=true) RecentEventVideo eventVideo3;
+
+    private List<EventDTO> recentEvents;
+
+    private final String basePathToImages = "http://static.sapsailing.com/newhome/media/";
+
+    private String[] images = { "main-media-photo-1.jpg" };
     
     interface MainMediaUiBinder extends UiBinder<Widget, MainMedia> {
     }
     
     private static MainMediaUiBinder uiBinder = GWT.create(MainMediaUiBinder.class);
 
-    public MainMedia() {
+    public MainMedia(PlaceNavigator navigator) {
+        eventVideo1 = new RecentEventVideo(navigator);
+        eventVideo2 = new RecentEventVideo(navigator);
+        eventVideo3 = new RecentEventVideo(navigator);
+        
         MainMediaResources.INSTANCE.css().ensureInjected();
         initWidget(uiBinder.createAndBindUi(this));
+        
+        String imagePath = "url(" + basePathToImages + images[0] + ")";
+        photoImage.getStyle().setBackgroundImage(imagePath);
+
+        recentEvents = new ArrayList<EventDTO>();
     }
 
+    public void setRecentEvents(List<EventDTO> theRecentEvents) {
+        recentEvents.clear();
+        recentEvents.addAll(theRecentEvents);
+        
+        int size = recentEvents.size();
+        if(size > 0) {
+            eventVideo1.setEvent(recentEvents.get(0));
+        } else {
+            eventVideo1.setVisible(false);
+        }
+        if(size > 1) {
+            eventVideo2.setEvent(recentEvents.get(1));
+        } else {
+            eventVideo2.setVisible(false);
+        }
+        if(size > 2) {
+            eventVideo3.setEvent(recentEvents.get(2));
+        } else {
+            eventVideo3.setVisible(false);
+        }
+    }
 }

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

@@ -18,7 +18,7 @@
   <div class="{res.mainCss.grid}">
     <div class="{res.mediaCss.small12} {res.mediaCss.columns}">
       <div class="{local_res.css.media_slideshow}">
-        <div style="background-image: url('images/xyz.png')" class="{local_res.css.media_photo}"></div>
+        <div ui:field="photoImage" class="{local_res.css.media_photo}"></div>
         <div class="{local_res.css.media_slideshow_controls} {local_res.css.media_slideshow_controlsprev}"></div>
         <div class="{local_res.css.media_slideshow_controls} {local_res.css.media_slideshow_controlsnext}"></div>
         <div class="{local_res.css.media_slideshow_controls} {local_res.css.media_slideshow_controlsfullsize}"></div>
@@ -36,17 +36,9 @@
     </div>
   </div>
   <div class="{res.mainCss.grid}">
-    <div class="{res.mediaCss.small12} {res.mediaCss.medium6} {res.mediaCss.large4} {res.mediaCss.columns}">
-      <figure class="{local_res.css.videopreview}"><img src="images/video.preview" />
-        <figcaption>
-          <p class="{local_res.css.videopreview_title}"><g:Label ui:field="videoTitle" /></p>
-          <div><g:Label ui:field="videoLength" /></div>
-        </figcaption>
-      </figure>
-    </div>
-  </div>
-  <div class="{res.mainCss.grid} {res.mainCss.mainsection_navigation}">
-    <div class="{res.mediaCss.small12} {res.mediaCss.columns}"><a href="#" class="{res.mainCss.button}">Show More</a></div>
+      <s:mainmedia.RecentEventVideo ui:field='eventVideo1'/>
+      <s:mainmedia.RecentEventVideo ui:field='eventVideo2'/>
+      <s:mainmedia.RecentEventVideo ui:field='eventVideo3'/>
   </div>
 </div>
     </g:HTMLPanel>

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

@@ -0,0 +1,68 @@
+package com.sap.sailing.gwt.home.client.shared.mainmedia;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.ImageElement;
+import com.google.gwt.dom.client.SpanElement;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.uibinder.client.UiBinder;
+import com.google.gwt.uibinder.client.UiField;
+import com.google.gwt.uibinder.client.UiHandler;
+import com.google.gwt.user.client.Window;
+import com.google.gwt.user.client.ui.Anchor;
+import com.google.gwt.user.client.ui.Composite;
+import com.google.gwt.user.client.ui.Widget;
+import com.sap.sailing.gwt.home.client.app.PlaceNavigator;
+import com.sap.sailing.gwt.home.client.place.event.EventPlace;
+import com.sap.sailing.gwt.home.client.place.event.EventPlace.Tokenizer;
+import com.sap.sailing.gwt.ui.shared.EventDTO;
+
+public class RecentEventVideo extends Composite {
+    
+    @UiField SpanElement eventVideoLength;
+    @UiField SpanElement eventName;
+    @UiField ImageElement eventVideoPreviewImage;
+    @UiField Anchor eventMediaPageLink;
+
+    private final String defaultVideoImageUrl = "http://static.sapsailing.com/newhome/default_video_preview.jpg";
+
+    private EventDTO event;
+
+    interface RecentEventVideoUiBinder extends UiBinder<Widget, RecentEventVideo> {
+    }
+    
+    private static RecentEventVideoUiBinder uiBinder = GWT.create(RecentEventVideoUiBinder.class);
+
+    private final PlaceNavigator navigator;
+    
+    public RecentEventVideo(PlaceNavigator navigator) {
+        this.navigator = navigator;
+        initWidget(uiBinder.createAndBindUi(this));
+    }
+    
+    public void setEvent(EventDTO event) {
+        this.event = event;
+        updateUI();
+    }
+
+    @UiHandler("eventMediaPageLink")
+    public void goToEventMediaPage(ClickEvent e) {
+        if(event.getBaseURL().contains("localhost") || event.getBaseURL().contains("127.0.0.1")) {
+            navigator.goToEvent(event.id.toString());
+        } else {
+            EventPlace eventPlace = new EventPlace(event.id.toString());
+            EventPlace.Tokenizer t = new Tokenizer();
+            String remoteEventUrl = event.getBaseURL() + "/gwt/Home.html#" + EventPlace.class.getSimpleName() + ":" + t.getToken(eventPlace);
+            Window.Location.replace(remoteEventUrl);
+        }
+    }
+
+    private void updateUI() {
+        eventName.setInnerText(event.getName());
+        
+        if(event.getVideoURLs().size() == 0) {
+            eventVideoPreviewImage.setSrc(defaultVideoImageUrl);
+        } else {
+            eventVideoPreviewImage.setSrc(event.getVideoURLs().get(0));
+        }
+    }
+}

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

@@ -0,0 +1,19 @@
+<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
+<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
+  xmlns:g="urn:import:com.google.gwt.user.client.ui"
+    xmlns:s="urn:import:com.sap.sailing.gwt.home.client.shared">
+    <ui:with field="i18n" type="com.sap.sailing.gwt.home.client.i18n.TextMessages"/>
+    <ui:with field="res" type="com.sap.sailing.gwt.home.client.HomeResources" />
+    <ui:with field="local_res" type="com.sap.sailing.gwt.home.client.shared.mainmedia.MainMediaResources" />
+    <g:HTMLPanel>
+    <div class="{res.mediaCss.small12} {res.mediaCss.medium6} {res.mediaCss.large4} {res.mediaCss.columns}">
+    <figure class="{local_res.css.videopreview}"><img ui:field="eventVideoPreviewImage" />
+        <figcaption>
+          <p class="{local_res.css.videopreview_title}"><span ui:field="eventName" /></p>
+          <div><span ui:field="eventVideoLength" /></div>
+          <div><g:Anchor ui:field="eventMediaPageLink" styleName="{res.mainCss.button}" href="javascript:;">Show More</g:Anchor></div>
+        </figcaption>
+      </figure>
+     </div>
+    </g:HTMLPanel>
+</ui:UiBinder>