Layout improvements

java/com.sap.sailing.gwt.ui/RaceBoard.css

@@ -660,7 +660,7 @@ img.openColumn {
   font-weight: 400;
   color: #111;
   border: none;
-  padding: 0.666666666666667em 1.133333333333333em;
+  padding: 0.5em 0.3em 0.5em 0.8em;
   background-color: #fff;
   -webkit-transition: background-color 0.2s;
   -moz-transition: background-color 0.2s;
@@ -668,7 +668,11 @@ img.openColumn {
   -ms-transition: background-color 0.2s;
   transition: background-color 0.2s;
   width: 100%;
+  max-width: 25em;
   text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .Media-Select-Button:hover,
 .Media-Select-Button:focus {
@@ -692,4 +696,3 @@ img.openColumn {
 .Media-Select-Popup .Caption {
     padding: 4px 10px;
 }
-

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/client/StringMessages.java

@@ -1082,14 +1082,14 @@ public interface StringMessages extends Messages {
     String raceIsInLiveTimePanelMode();
     String backToLiveTimePanelMode();
     String windChart();
-    String showVideoCaption();
-    String showVideoTooltip();
-    String hideVideoCaption();
-    String hideVideoTooltip();
-    String selectVideoCaption(int mediaCount);
-    String selectVideoTooltip();
-    String manageMediaCaption();
-    String manageMediaTooltip();
+    String mediaShowVideoCaption();
+    String mediaShowVideoTooltip(String title);
+    String mediaHideVideoCaption();
+    String mediaHideVideoTooltip();
+    String mediaSelectVideoCaption(int mediaCount);
+    String mediaSelectVideoTooltip();
+    String mediaManageMediaCaption();
+    String mediaManageMediaTooltip();
     String showAll();
     String raceVisibilityColumn();
     String enterCarryValueFor(String competitorName);

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/client/StringMessages.properties

@@ -1063,14 +1063,14 @@ leaderboardGroupNotContainedInEvent=The leaderboard group {0} is not contained i
 raceIsInLiveTimePanelMode=Race is Live
 backToLiveTimePanelMode=Back to Live
 windChart=Wind Chart
-showVideoCaption=Show Video
-showVideoTooltip=Click to show video
-hideVideoCaption=Hide Video
-hideVideoTooltip=Click to hide video
-selectVideoCaption={0} Videos
-selectVideoTooltip=Click to  select video
-manageMediaCaption=Manage Media
-manageMediaTooltip=Configure audio and video clips, synchronize times
+mediaShowVideoCaption=Show Video
+mediaShowVideoTooltip=Click to show video: {0}
+mediaHideVideoCaption=Hide Video
+mediaHideVideoTooltip=Click to hide video
+mediaSelectVideoCaption={0} Videos
+mediaSelectVideoTooltip=Click to  select video
+mediaManageMediaCaption=Manage Media
+mediaManageMediaTooltip=Configure audio and video clips, synchronize times
 showAll=Show all
 raceVisibilityColumn=Visibility
 enterCarryValueFor=Enter carried points for competitor {0}

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/client/StringMessages_de.properties

@@ -1058,14 +1058,14 @@ leaderboardGroupNotContainedInEvent=Die Wettfahrtgruppe {0} gehört nicht zur Ve
 raceIsInLiveTimePanelMode=Rennen ist live
 backToLiveTimePanelMode=Zurück zu live
 windChart=Wind Chart
-showVideoCaption=Video ein
-showVideoTooltip=Video abspielen
-hideVideoCaption=Video aus
-hideVideoTooltip=Video ausblenden
-selectVideoCaption={0} Videos
-selectVideoTooltip=Video auswählen
-manageMediaCaption=Medien verwalten
-manageMediaTooltip=Audio- und Video-Clips verwalten, Zeiten synchronisieren
+mediaShowVideoCaption=Video ein
+mediaShowVideoTooltip=Video abspielen: {0}
+mediaHideVideoCaption=Video aus
+mediaHideVideoTooltip=Video ausblenden
+mediaSelectVideoCaption={0} Videos
+mediaSelectVideoTooltip=Video auswählen
+mediaManageMediaCaption=Medien verwalten
+mediaManageMediaTooltip=Audio- und Video-Clips verwalten, Zeiten synchronisieren
 showAll=Alle zeigen
 raceVisibilityColumn=Sichtbarkeit
 enterCarryValueFor=Punkteübertrag für Teilnehmer {0} erfassen

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/client/StringMessages_ru.properties

@@ -1011,14 +1011,14 @@ leaderboardGroupNotContainedInEvent=The leaderboard group {0} is not contained i
 raceIsInLiveTimePanelMode=Race is Live
 backToLiveTimePanelMode=Back to Live
 windChart=Wind Chart
-showVideoCaption=Show Video
-showVideoTooltip=Click to show video
-hideVideoCaption=Hide Video
-hideVideoTooltip=Click to hide video
-selectVideoCaption={0} Videos
-selectVideoTooltip=Click to  select video
-manageMediaCaption=Manage Media
-manageMediaTooltip=Configure audio and video clips, synchronize times
+mediaShowVideoCaption=Show Video
+mediaShowVideoTooltip=Click to show video: {0}
+mediaHideVideoCaption=Hide Video
+mediaHideVideoTooltip=Click to hide video
+mediaSelectVideoCaption={0} Videos
+mediaSelectVideoTooltip=Click to  select video
+mediaManageMediaCaption=Manage Media
+mediaManageMediaTooltip=Configure audio and video clips, synchronize times
 showAll=Show all
 raceVisibilityColumn=Visibility
 enterCarryValueFor=Enter carried points for competitor {0}

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

@@ -1,14 +1,17 @@
 package com.sap.sailing.gwt.ui.client.media;
 
 import com.sap.sailing.domain.common.media.MediaTrack;
+import com.sap.sailing.gwt.ui.client.StringMessages;
 
 public abstract class AbstractMediaSelectionControl implements MediaPlayerManager.PlayerChangeListener {
 
     protected final MediaPlayerManager mediaPlayerManager;
+    protected final StringMessages stringMessages;
 
-    public AbstractMediaSelectionControl(MediaPlayerManager mediaPlayerManager) {
+    public AbstractMediaSelectionControl(MediaPlayerManager mediaPlayerManager, StringMessages stringMessages) {
         this.mediaPlayerManager = mediaPlayerManager;
         this.mediaPlayerManager.setPlayerChangeListener(this);
+        this.stringMessages = stringMessages;
     }
 
     protected boolean isPotentiallyPlayable(MediaTrack mediaTrack) {

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

@@ -28,6 +28,7 @@ import com.google.gwt.user.client.ui.UIObject;
 import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.Widget;
 import com.sap.sailing.domain.common.media.MediaTrack;
+import com.sap.sailing.gwt.ui.client.StringMessages;
 import com.sap.sse.gwt.client.useragent.UserAgentDetails.AgentTypes;
 
 public class MediaManagementControl extends AbstractMediaSelectionControl implements CloseHandler<PopupPanel> {
@@ -36,8 +37,8 @@ public class MediaManagementControl extends AbstractMediaSelectionControl implem
     private final Map<MediaTrack, CheckBox> videoCheckBoxes = new HashMap<MediaTrack, CheckBox>();
     private final UIObject popupLocation;
 
-    public MediaManagementControl(MediaPlayerManager mediaPlayerManager, UIObject popupLocation) {
-        super(mediaPlayerManager);
+    public MediaManagementControl(MediaPlayerManager mediaPlayerManager, UIObject popupLocation, StringMessages stringMessages) {
+        super(mediaPlayerManager, stringMessages);
         this.popupLocation = popupLocation;
 
         this.dialogControl = new DialogBox(true, false);

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

@@ -14,14 +14,15 @@ import com.google.gwt.user.client.ui.PopupPanel;
 import com.google.gwt.user.client.ui.UIObject;
 import com.google.gwt.user.client.ui.VerticalPanel;
 import com.sap.sailing.domain.common.media.MediaTrack;
+import com.sap.sailing.gwt.ui.client.StringMessages;
 
 public class MediaSingleSelectionControl extends AbstractMediaSelectionControl implements CloseHandler<PopupPanel> {
 
     private final DialogBox dialogControl;
     private final UIObject popupLocation;
 
-    public MediaSingleSelectionControl(MediaPlayerManager mediaPlayerManager, UIObject popupLocation) {
-        super(mediaPlayerManager);
+    public MediaSingleSelectionControl(MediaPlayerManager mediaPlayerManager, UIObject popupLocation, StringMessages stringMessages) {
+        super(mediaPlayerManager, stringMessages);
         this.popupLocation = popupLocation;
 
         this.dialogControl = new DialogBox(true, false);
@@ -58,14 +59,28 @@ public class MediaSingleSelectionControl extends AbstractMediaSelectionControl i
         Button mediaSelectButton = new Button(mediaTrack.title);
         mediaSelectButton.setStyleName("Media-Select-Button");
         if (mediaPlayerManager.getPlayingVideoTracks().contains(mediaTrack)) {
+            mediaSelectButton.setTitle(stringMessages.mediaHideVideoTooltip());
             mediaSelectButton.addStyleName("Media-Select-Button-playing");
-            mediaSelectButton.setEnabled(false);
-        } else {
             mediaSelectButton.addClickHandler(new ClickHandler() {
                 
                 @Override
                 public void onClick(ClickEvent event) {
-                    if (mediaPlayerManager.getPlayingAudioTrack() != mediaTrack) {
+                    if (mediaPlayerManager.getPlayingAudioTrack() == mediaTrack) {
+                        mediaPlayerManager.muteAudio();
+                    }
+                    mediaPlayerManager.closeFloatingVideo(mediaTrack);
+                    hide();
+                };
+            });
+        } else {
+            mediaSelectButton.setTitle(stringMessages.mediaShowVideoTooltip(mediaTrack.title));
+            mediaSelectButton.addClickHandler(new ClickHandler() {
+                
+                @Override
+                public void onClick(ClickEvent event) {
+                    if (event.isControlKeyDown() && mediaTrack.mimeType.mediaType == MediaTrack.MediaType.video) {
+                        mediaPlayerManager.playFloatingVideo(mediaTrack);
+                    } else if (mediaPlayerManager.getPlayingAudioTrack() != mediaTrack) {
                         mediaPlayerManager.stopAll();
                         if (mediaTrack.mimeType.mediaType == MediaTrack.MediaType.video) {
                             mediaPlayerManager.playFloatingVideo(mediaTrack);

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

@@ -58,7 +58,6 @@ public class VideoFloatingContainer extends AbstractVideoContainer implements Vi
     void show() {
         dialogBox.setPopupPosition(5, Document.get().getClientHeight()-dialogBox.getOffsetHeight()-500);
         dialogBox.show();
-        dialogBox.setPixelSize(416, 234);
     }
 
     @Override

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

@@ -50,6 +50,7 @@ public class VideoYoutubePlayer extends AbstractMediaPlayer implements VideoSync
         this.raceStartTime = raceStartTime;
 
         this.videoContainer = new SimplePanel();
+        this.videoContainer.setStyleName("Youtube-Video-Panel");
         final String videoContainerId = "videoContainer-" + videoTrack.url + ++videoCounter;
         this.videoContainer.getElement().setId(videoContainerId);
         this.videoContainer

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

@@ -64,8 +64,8 @@ public class YoutubeVideoControl  {
 
         var player = new $wnd.YT.Player(videoContainerId, {
                 videoId : videoUrl,
-                height: '480', //see https://developers.google.com/youtube/iframe_api_reference?hl=en#Playback_quality
-                width: '853',
+                //height: '480', //see https://developers.google.com/youtube/iframe_api_reference?hl=en#Playback_quality
+                //width: '853',
                 events: { //https://developers.google.com/youtube/iframe_api_reference?hl=en#Events
                     'onReady': function(event) {
                                     that.@com.sap.sailing.gwt.ui.client.media.YoutubeVideoControl::initPlayState(Lcom/google/gwt/core/client/JavaScriptObject;)(player);

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/ui/raceboard/SideBySideComponentViewer.java

@@ -87,18 +87,18 @@ public class SideBySideComponentViewer implements ComponentViewer {
                 case 1:
                     mediaSelectionButton.setVisible(true);
                     if(mediaPlayerManagerComponent.isPlaying()){
-                        mediaSelectionButton.setText(stringMessages.hideVideoCaption());
-                        mediaSelectionButton.setTitle(stringMessages.hideVideoTooltip());
+                        mediaSelectionButton.setText(stringMessages.mediaHideVideoCaption());
+                        mediaSelectionButton.setTitle(stringMessages.mediaHideVideoTooltip());
                     }
                     else{
-                        mediaSelectionButton.setText(stringMessages.showVideoCaption());
-                        mediaSelectionButton.setTitle(stringMessages.showVideoTooltip());
+                        mediaSelectionButton.setText(stringMessages.mediaShowVideoCaption());
+                        mediaSelectionButton.setTitle(stringMessages.mediaShowVideoTooltip(mediaPlayerManagerComponent.getAssignedMediaTracks().iterator().next().title));
                     }
                     break;
                 default:
                     mediaSelectionButton.setVisible(true);
-                    mediaSelectionButton.setText(stringMessages.selectVideoCaption(mediaPlayerManagerComponent.getAssignedMediaTracks().size()));
-                    mediaSelectionButton.setTitle(stringMessages.selectVideoTooltip());
+                    mediaSelectionButton.setText(stringMessages.mediaSelectVideoCaption(mediaPlayerManagerComponent.getAssignedMediaTracks().size()));
+                    mediaSelectionButton.setTitle(stringMessages.mediaSelectVideoTooltip());
                     break;
                 }
                 mediaManagementButton.setVisible(mediaPlayerManagerComponent.allowsEditing());
@@ -150,7 +150,7 @@ public class SideBySideComponentViewer implements ComponentViewer {
     private Button createMediaSelectionButton(final MediaPlayerManager mediaPlayerManager) {
         final Button result = new Button();
         final MediaSingleSelectionControl multiSelectionControl = new MediaSingleSelectionControl(mediaPlayerManager,
-                result);
+                result, stringMessages);
         result.addClickHandler(new ClickHandler() {
 
             @Override
@@ -180,11 +180,11 @@ public class SideBySideComponentViewer implements ComponentViewer {
      * @param userAgent
      */
     private Button createMediaManagementButton(final MediaPlayerManager mediaPlayerManager) {
-        final Button result = new Button(stringMessages.manageMediaCaption());
-        result.setTitle(stringMessages.manageMediaTooltip());
+        final Button result = new Button(stringMessages.mediaManageMediaCaption());
+        result.setTitle(stringMessages.mediaManageMediaTooltip());
         // onClick
         final MediaManagementControl multiSelectionControl = new MediaManagementControl(mediaPlayerManager,
-                result);
+                result, stringMessages);
         result.addClickHandler(new ClickHandler() {
 
             @Override

java/com.sap.sse.gwt/src/com/sap/sse/gwt/client/dialog/WindowBox.css

@@ -2,8 +2,19 @@
 	clip: rect(auto auto auto auto);
 }
 
+.gwt-extras-WindowBox .dialogTopCenterInner {
+  background-color: #bbb;
+}
+
 .gwt-extras-WindowBox .Caption {
+   background: transparent;
+   border: none;
     padding: 4px 45px 0px 5px;
+    width: auto;
+    max-width: 25em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 .gwt-extras-WindowBox .dialogMiddleCenter {
@@ -16,7 +27,7 @@
 
 .gwt-extras-WindowBox .gwt-extras-dialog-controls {
   position: absolute;
-  top: 3px;
+  top: -1px;
   right: 12px;
 }
 
@@ -76,11 +87,19 @@
 }
 
 .gwt-extras-WindowBox .video-root-panel {
+    display: table-cell;
 	min-width: 400px;
     min-height: 225px;
 }
 
+.Youtube-Video-Panel {
+    display: block;
+    border: none;
+    min-height: 225px;
+ }
+ 
  .gwt-extras-WindowBox .title-edit {
     width: 100%;
     margin-bottom: 10px;
 }
+