bug4682 massive cleanup of mediatrack related handling

java/com.sap.sailing.domain.common/src/com/sap/sailing/domain/common/media/MediaTrack.java

@@ -25,6 +25,7 @@ public class MediaTrack implements Serializable {
 
     private static final long serialVersionUID = 1L;
 
+    @Deprecated
     public enum Status {
         UNDEFINED('?'), CANNOT_PLAY('-'), NOT_REACHABLE('#'), REACHABLE('+');
 
@@ -155,5 +156,4 @@ public class MediaTrack implements Serializable {
             return false;
         }
     }
-
 }

java/com.sap.sailing.gwt.ui/src/main/java/com/sap/sailing/gwt/home/shared/partials/videoplayer/VideoPlayer.java

@@ -1,6 +1,6 @@
 package com.sap.sailing.gwt.home.shared.partials.videoplayer;
 
-import com.google.gwt.dom.client.VideoElement;
+import com.google.gwt.dom.client.Element;
 import com.google.gwt.event.dom.client.ClickEvent;
 import com.google.gwt.event.dom.client.ClickHandler;
 import com.google.gwt.user.client.ui.Composite;
@@ -73,7 +73,7 @@ public class VideoPlayer extends Composite {
         videoJSPlayer.setVideo(video.getMimeType(), video.getSourceRef());
     }
     
-    public VideoElement getVideoElement() {
+    public Element getVideoElement() {
         return videoJSPlayer.getVideoElement();
     }
     public boolean isFullscreen() {

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

@@ -1,19 +0,0 @@
-package com.sap.sailing.gwt.ui.client.media;
-
-import com.google.gwt.media.client.Audio;
-import com.google.gwt.media.client.MediaBase;
-import com.sap.sailing.domain.common.media.MediaTrack;
-import com.sap.sailing.gwt.ui.client.media.shared.AudioPlayer;
-
-public class AudioHtmlPlayer extends AbstractHtmlMediaPlayer implements AudioPlayer {
-    
-    public AudioHtmlPlayer(MediaTrack mediaTrack) {
-        super(mediaTrack);
-    }
-
-    @Override
-    protected MediaBase createMediaElement() {
-        return Audio.createIfSupported();
-    }
-
-}

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

@@ -16,7 +16,6 @@ import com.google.gwt.user.client.rpc.AsyncCallback;
 import com.google.gwt.user.client.ui.Button;
 import com.google.gwt.user.client.ui.CheckBox;
 import com.google.gwt.user.client.ui.DialogBox;
-import com.google.gwt.user.client.ui.FocusWidget;
 import com.google.gwt.user.client.ui.HasHorizontalAlignment;
 import com.google.gwt.user.client.ui.HorizontalPanel;
 import com.google.gwt.user.client.ui.Label;
@@ -47,10 +46,10 @@ public class MediaManagementControl extends AbstractMediaSelectionControl implem
     public void show() {
         Collection<MediaTrack> videoTracks = new ArrayList<>();
         Collection<MediaTrack> audioTracks = new ArrayList<>();
-        addAssignedMediaTracksTo(videoTracks, audioTracks);
-        addOverlappingMediaTracksTo(videoTracks, audioTracks);
+        filterGivenMediaTracksTo(videoTracks, audioTracks, mediaPlayerManager.getAssignedMediaTracks());
+        filterGivenMediaTracksTo(videoTracks, audioTracks, mediaPlayerManager.getOverlappingMediaTracks());
         Panel grid = new VerticalPanel();
-        addVideoTracksToGridPanel(audioTracks, grid);
+        addAudioTracksToGridPanel(audioTracks, grid);
         addVideoTracksToGridPanel(videoTracks, grid);
         addNewMediaButtonsTo(grid);
         dialogControl.add(grid);
@@ -81,59 +80,41 @@ public class MediaManagementControl extends AbstractMediaSelectionControl implem
         grid.add(controlButtons);
     }
 
-    private void addVideoTracksToGridPanel(Collection<MediaTrack> reachableVideoTracks, Panel grid) {
-        if (!reachableVideoTracks.isEmpty()) {
-            grid.add(createVideoHeader());
-            for (MediaTrack videoTrack : reachableVideoTracks) {
+    private void addVideoTracksToGridPanel(Collection<MediaTrack> videoTracks, Panel grid) {
+        if (!videoTracks.isEmpty()) {
+            grid.add(new Label(stringMessages.videos()));
+            for (MediaTrack videoTrack : videoTracks) {
                 grid.add(createVideoOptions(videoTrack, mediaPlayerManager.getPlayingVideoTracks()));
             }
         }
     }
 
-    private void addAudioTracksToGridPanel(Collection<MediaTrack> reachableAudioTracks, Panel grid) {
-        if (!reachableAudioTracks.isEmpty()) {
-            grid.add(createAudioHeader());
-            grid.add((RadioButton) createAudioButton(null, mediaPlayerManager.getPlayingAudioTrack()));
-            for (MediaTrack audioTrack : reachableAudioTracks) {
+    private void addAudioTracksToGridPanel(Collection<MediaTrack> audioTracks, Panel grid) {
+        if (!audioTracks.isEmpty()) {
+            // TODO
+            grid.add(new Label("i18n Audio Tracks"));
+            grid.add(createAudioButton(null, mediaPlayerManager.getPlayingAudioTrack()));
+            for (MediaTrack audioTrack : audioTracks) {
                 grid.add(createAudioButton(audioTrack, mediaPlayerManager.getPlayingAudioTrack()));
             }
         }
     }
 
-    private void addOverlappingMediaTracksTo(Collection<MediaTrack> reachableVideoTracks,
-            Collection<MediaTrack> reachableAudioTracks) {
-        for (MediaTrack mediaTrack : mediaPlayerManager.getOverlappingMediaTracks()) {
-            if (mediaTrack.mimeType != null) {
-                switch (mediaTrack.mimeType.mediaType) {
-                case video:
-                    reachableVideoTracks.add(mediaTrack);
-                case audio: // intentional fall through
-                    reachableAudioTracks.add(mediaTrack);
-                case image: // no image media tracks produced by an image
-                    break;
-                case unknown: // we won't overlay an unknown media source
-                    break;
-                default:
-                    break;
-                }
-            }
-        }
-    }
-    
-    private void addAssignedMediaTracksTo(Collection<MediaTrack> reachableVideoTracks,
-            Collection<MediaTrack> reachableAudioTracks) {
-        for (MediaTrack mediaTrack : mediaPlayerManager.getAssignedMediaTracks()) {
+    private void filterGivenMediaTracksTo(Collection<MediaTrack> videoTracks,
+            Collection<MediaTrack> audioTracks, Iterable<MediaTrack> source) {
+        for (MediaTrack mediaTrack : source) {
             if (mediaTrack.mimeType == null) {
-                reachableVideoTracks.add(mediaTrack); // allow user to remove this strange artifact
+                videoTracks.add(mediaTrack); // allow user to remove this strange artifact
             } else {
                 switch (mediaTrack.mimeType.mediaType) {
                 case video:
-                    reachableVideoTracks.add(mediaTrack);
-                case audio: // intentional fall through
-                    reachableAudioTracks.add(mediaTrack);
-                case image: // images don't play as video tracks
+                    videoTracks.add(mediaTrack);
                     break;
-                case unknown: // unknown formats won't be played either
+                case audio:
+                    audioTracks.add(mediaTrack);
+                    break;
+                case image:
+                case unknown:
                     break;
                 default:
                     break;
@@ -143,12 +124,26 @@ public class MediaManagementControl extends AbstractMediaSelectionControl implem
     }
 
     private Widget createVideoOptions(final MediaTrack videoTrack, Set<MediaTrack> selectedVideos) {
-        CheckBox playCheckBox = createPlayCheckBox(videoTrack, selectedVideos);
+        CheckBox videoCheckBox = new CheckBox(videoTrack.title);
+        videoCheckBoxes.put(videoTrack, videoCheckBox);
+        videoCheckBox.setTitle(videoTrack.toString());
+        videoCheckBox.setValue(selectedVideos.contains(videoTrack));
+        videoCheckBox.addValueChangeHandler(new ValueChangeHandler<Boolean>() {
+        
+            @Override
+            public void onValueChange(ValueChangeEvent<Boolean> changeEvent) {
+                if (changeEvent.getValue()) {
+                    mediaPlayerManager.playFloatingVideo(videoTrack);
+                } else {
+                    mediaPlayerManager.closeFloatingVideo(videoTrack);
+                }
+            }
+        });
 
         if (mediaPlayerManager.allowsEditing()) {
             HorizontalPanel panel = new HorizontalPanel();
             panel.setWidth("100%");
-            panel.add(playCheckBox);
+            panel.add(videoCheckBox);
 
             Button deleteButton = createDeleteButton(videoTrack);
             panel.add(deleteButton);
@@ -157,10 +152,10 @@ public class MediaManagementControl extends AbstractMediaSelectionControl implem
             panel.add(connectButton);   
             panel.setCellHorizontalAlignment(connectButton, HasHorizontalAlignment.ALIGN_RIGHT);
             panel.setCellWidth(connectButton, "13");
-            setEnableOfVideoTrack(connectButton, connectButton.getValue());
+            setVideoPlayCheckboxEnabled(videoTrack, connectButton.getValue());
             return panel;
         } else {
-            return playCheckBox;
+            return videoCheckBox;
         }
 
     }
@@ -184,16 +179,9 @@ public class MediaManagementControl extends AbstractMediaSelectionControl implem
         return connectButton;
     }
     
-    private void setEnableOfVideoTrack(ToggleButton connectButton, boolean enable) {
-        Panel videoTrack = (HorizontalPanel)connectButton.getParent();
-        for (Widget widget : videoTrack) {
-            if(widget != connectButton && widget instanceof FocusWidget){
-                ((FocusWidget)widget).setEnabled(enable);
-                if(widget instanceof CheckBox){
-                    ((CheckBox)widget).setValue(false);
-                }
-            }
-        }
+    private void setVideoPlayCheckboxEnabled(MediaTrack videoTrack, boolean enable) {
+        CheckBox videoCheckBox = videoCheckBoxes.get(videoTrack);
+        videoCheckBox.setEnabled(enable);
     }
     
     private void disconnectVideoFromRace(final MediaTrack videoTrack, final ToggleButton connectButton) {
@@ -207,7 +195,7 @@ public class MediaManagementControl extends AbstractMediaSelectionControl implem
 
             @Override
             public void onSuccess(Void allMediaTracks) {
-                setEnableOfVideoTrack(connectButton, false);
+                setVideoPlayCheckboxEnabled(videoTrack, false);
                 mediaPlayerManager.closeFloatingVideo(videoTrack);
             }
         });
@@ -225,7 +213,7 @@ public class MediaManagementControl extends AbstractMediaSelectionControl implem
 
             @Override
             public void onSuccess(Void allMediaTracks) {
-                setEnableOfVideoTrack(connectButton, true);
+                setVideoPlayCheckboxEnabled(videoTrack, true);
             }
         });
     }
@@ -242,44 +230,6 @@ public class MediaManagementControl extends AbstractMediaSelectionControl implem
         return deleteButton;
     }
 
-    private CheckBox createPlayCheckBox(final MediaTrack videoTrack, Set<MediaTrack> selectedVideos) {
-        CheckBox videoCheckBox = new CheckBox(videoTrack.title);
-        videoCheckBoxes.put(videoTrack, videoCheckBox);
-        videoCheckBox.setTitle(videoTrack.toString());
-        videoCheckBox.setValue(selectedVideos.contains(videoTrack));
-        videoCheckBox.addValueChangeHandler(new ValueChangeHandler<Boolean>() {
-
-            @Override
-            public void onValueChange(ValueChangeEvent<Boolean> changeEvent) {
-                if (changeEvent.getValue()) {
-                    mediaPlayerManager.playFloatingVideo(videoTrack);
-                } else {
-                    mediaPlayerManager.closeFloatingVideo(videoTrack);
-                }
-            }
-        });
-        return videoCheckBox;
-    }
-
-    public void selectVideo(MediaTrack videoTrack) {
-        CheckBox videoCheckBox = videoCheckBoxes.get(videoTrack);
-        if (videoCheckBox != null) {
-            videoCheckBox.setValue(true);
-        }
-    }
-
-    public void unselectVideo(MediaTrack videoTrack) {
-        CheckBox videoCheckBox = videoCheckBoxes.get(videoTrack);
-        if (videoCheckBox != null) {
-            videoCheckBox.setValue(false);
-        }
-    }
-
-    private Widget createVideoHeader() {
-        Label audioHeader = new Label("Videos");
-        return audioHeader;
-    }
-
     private Widget createAudioButton(final MediaTrack audioTrack, MediaTrack selectedAudioTrack) {
         String label = audioTrack != null ? audioTrack.title : "Sound off";
         String title = audioTrack != null ? audioTrack.toString() : "Turn off all sound channels.";
@@ -287,7 +237,6 @@ public class MediaManagementControl extends AbstractMediaSelectionControl implem
         audioButton.setTitle(title);
         audioButton.setValue(audioTrack == selectedAudioTrack);
         audioButton.addValueChangeHandler(new ValueChangeHandler<Boolean>() {
-
             @Override
             public void onValueChange(ValueChangeEvent<Boolean> changeEvent) {
                 if (changeEvent.getValue()) {
@@ -295,12 +244,19 @@ public class MediaManagementControl extends AbstractMediaSelectionControl implem
                 }
             }
         });
-        return audioButton;
-    }
 
-    private Widget createAudioHeader() {
-        Label audioHeader = new Label("Audio Tracks");
-        return audioHeader;
+        if (mediaPlayerManager.allowsEditing() && audioTrack != null) {
+            HorizontalPanel panel = new HorizontalPanel();
+            panel.setWidth("100%");
+            panel.add(audioButton);
+
+            Button deleteButton = createDeleteButton(audioTrack);
+            panel.add(deleteButton);
+            panel.setCellHorizontalAlignment(deleteButton, HasHorizontalAlignment.ALIGN_RIGHT);
+            return panel;
+        } else {
+            return audioButton;
+        }
     }
 
     @Override

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

@@ -10,7 +10,6 @@ import java.util.List;
 import java.util.Map;
 import java.util.Set;
 
-import com.google.gwt.core.client.GWT;
 import com.google.gwt.dom.client.MediaElement;
 import com.google.gwt.dom.client.VideoElement;
 import com.google.gwt.event.logical.shared.CloseEvent;
@@ -25,7 +24,6 @@ import com.google.gwt.user.client.ui.SimplePanel;
 import com.google.gwt.user.client.ui.Widget;
 import com.sap.sailing.domain.common.RegattaAndRaceIdentifier;
 import com.sap.sailing.domain.common.media.MediaTrack;
-import com.sap.sailing.domain.common.media.MediaTrack.Status;
 import com.sap.sailing.domain.common.security.Permission;
 import com.sap.sailing.domain.common.security.SailingPermissionsForRoleProvider;
 import com.sap.sailing.gwt.ui.client.MediaServiceAsync;
@@ -73,6 +71,7 @@ public class MediaPlayerManagerComponent extends AbstractComponent<MediaPlayerSe
     private final Map<MediaTrack, VideoContainer> activeVideoContainers = new HashMap<MediaTrack, VideoContainer>();
     private Collection<MediaTrack> assignedMediaTracks = new ArrayList<>();
     private Collection<MediaTrack> overlappingMediaTracks = new ArrayList<>();
+    private Map<MediaTrack, Status> mediaTrackStatus = new HashMap<>();
 
     private final RegattaAndRaceIdentifier raceIdentifier;
     private final RaceTimesInfoProvider raceTimesInfoProvider;
@@ -87,6 +86,23 @@ public class MediaPlayerManagerComponent extends AbstractComponent<MediaPlayerSe
 
     private List<PlayerChangeListener> playerChangeListener = new ArrayList<>();
 
+    public enum Status {
+        UNDEFINED('?'),
+        CANNOT_PLAY('-'),
+        NOT_REACHABLE('#'),
+        REACHABLE('+');
+
+        private final char symbol;
+
+        private Status(char symbol) {
+            this.symbol = symbol;
+        }
+
+        public String toString() {
+            return String.valueOf(this.symbol);
+        }
+    }
+
     public MediaPlayerManagerComponent(Component<?> parent, ComponentContext<?> context,
             MediaPlayerLifecycle mediaPlayerLifecycle,
             RegattaAndRaceIdentifier selectedRaceIdentifier,
@@ -116,13 +132,15 @@ public class MediaPlayerManagerComponent extends AbstractComponent<MediaPlayerSe
         Window.addWindowClosingHandler(this);
     }
 
-    private static boolean isPotentiallyPlayable(MediaTrack mediaTrack) {
-        return MediaTrack.Status.REACHABLE.equals(mediaTrack.status)
-                || MediaTrack.Status.UNDEFINED.equals(mediaTrack.status);
+    private boolean isPotentiallyPlayable(MediaTrack mediaTrack) {
+        Status status = mediaTrackStatus.get(mediaTrack);
+        return Status.REACHABLE.equals(status) || Status.UNDEFINED.equals(status);
     }
 
     private void setStatus(final MediaTrack mediaTrack) {
-        if (!mediaTrack.isYoutube()) {
+        if (mediaTrack.isYoutube()) {
+            mediaTrackStatus.put(mediaTrack, Status.REACHABLE);
+        } else {
             Video video = Video.createIfSupported();
             if (video != null) {
                 VideoElement mediaReachableTester = video.getVideoElement();
@@ -131,39 +149,33 @@ public class MediaPlayerManagerComponent extends AbstractComponent<MediaPlayerSe
                 mediaReachableTester.setSrc(UriUtils.fromString(mediaTrack.url).asString());
                 mediaReachableTester.load();
             } else {
-                GWT.log("Video tag unsupported : " + mediaTrack.title);
-                mediaTrack.status = Status.CANNOT_PLAY;
+                mediaTrackStatus.put(mediaTrack, Status.CANNOT_PLAY);
             }
-        } else {
-            GWT.log("Reachable : " + mediaTrack.title);
-            mediaTrack.status = Status.REACHABLE;
         }
     }
 
     native void addLoadMetadataHandler(MediaElement mediaElement, MediaTrack mediaTrack) /*-{
-		var that = this;
-		mediaElement
-				.addEventListener(
-						'loadedmetadata',
-						function() {
-							that.@com.sap.sailing.gwt.ui.client.media.MediaPlayerManagerComponent::loadedmetadata(Lcom/sap/sailing/domain/common/media/MediaTrack;)(mediaTrack);
-						});
-		mediaElement
-				.addEventListener(
-						'error',
-						function() {
-							that.@com.sap.sailing.gwt.ui.client.media.MediaPlayerManagerComponent::mediaError(Lcom/sap/sailing/domain/common/media/MediaTrack;)(mediaTrack);
-						});
+        var that = this;
+        mediaElement
+                .addEventListener(
+                        'loadedmetadata',
+                        function() {
+                            that.@com.sap.sailing.gwt.ui.client.media.MediaPlayerManagerComponent::loadedmetadata(Lcom/sap/sailing/domain/common/media/MediaTrack;)(mediaTrack);
+                        });
+        mediaElement
+                .addEventListener(
+                        'error',
+                        function() {
+                            that.@com.sap.sailing.gwt.ui.client.media.MediaPlayerManagerComponent::mediaError(Lcom/sap/sailing/domain/common/media/MediaTrack;)(mediaTrack);
+                        });
     }-*/;
 
     public void loadedmetadata(MediaTrack mediaTrack) {
-        GWT.log("Reachable with videotag " + mediaTrack.title);
-        mediaTrack.status = Status.REACHABLE;
+        mediaTrackStatus.put(mediaTrack, Status.REACHABLE);
     }
 
     public void mediaError(MediaTrack mediaTrack) {
-        GWT.log("Error with videotag " + mediaTrack.title);
-        mediaTrack.status = Status.NOT_REACHABLE;
+        mediaTrackStatus.put(mediaTrack, Status.NOT_REACHABLE);
     }
 
     @Override
@@ -183,7 +195,8 @@ public class MediaPlayerManagerComponent extends AbstractComponent<MediaPlayerSe
     private MediaTrack getDefaultAudio() {
         // TODO: implement a better heuristic than just taking the first to come
         for (MediaTrack mediaTrack : assignedMediaTracks) {
-            if (mediaTrack.mimeType != null && MediaType.audio.equals(mediaTrack.mimeType.mediaType) && isPotentiallyPlayable(mediaTrack)) {
+            if (mediaTrack.mimeType != null && MediaType.audio.equals(mediaTrack.mimeType.mediaType)
+                    && isPotentiallyPlayable(mediaTrack)) {
                 return mediaTrack;
             }
         }
@@ -384,18 +397,10 @@ public class MediaPlayerManagerComponent extends AbstractComponent<MediaPlayerSe
     public void playAudio(MediaTrack audioTrack) {
         if ((activeAudioPlayer == null) || (activeAudioPlayer.getMediaTrack() != audioTrack)) {
             muteAudio();
-            if ((audioTrack != null) && audioTrack.isYoutube()) { // --> Youtube videos can't be played for audio-only.
-                                                                  // So add a video player first.
-                playFloatingVideo(audioTrack);
-            }
+            playFloatingVideo(audioTrack);
             VideoContainer playingVideoContainer = activeVideoContainers.get(audioTrack);
-            if (playingVideoContainer != null) {
-                VideoPlayer playingVideoPlayer = playingVideoContainer.getVideoPlayer();
-                activeAudioPlayer = playingVideoPlayer;
-                activeAudioPlayer.setMuted(false);
-            } else {
-                assignNewAudioPlayer(audioTrack);
-            }
+            activeAudioPlayer = playingVideoContainer.getVideoPlayer();
+            activeAudioPlayer.setMuted(false);
             notifyStateChange();
         } else {
             // nothing changed
@@ -405,14 +410,7 @@ public class MediaPlayerManagerComponent extends AbstractComponent<MediaPlayerSe
     @Override
     public void muteAudio() {
         if (activeAudioPlayer != null) { // --> then reset active audio player
-
-            if (activeVideoContainers.containsKey(activeAudioPlayer.getMediaTrack())) { // pre-change audioPlayer is one
-                                                                                        // of the
-                // videoPlayers
-                activeAudioPlayer.setMuted(true);
-            } else { // pre-change audioPlayer is a dedicated audio-only player
-                activeAudioPlayer.shutDown();
-            }
+            activeAudioPlayer.shutDown();
             activeAudioPlayer = null;
             notifyStateChange();
         } else {
@@ -484,6 +482,7 @@ public class MediaPlayerManagerComponent extends AbstractComponent<MediaPlayerSe
         } else {
             videoPlayer = new VideoJSSyncPlayer(videoTrack, getRaceStartTime(), raceTimer);
         }
+
         return videoContainerFactory.createVideoContainer(videoPlayer, userService, getMediaService(), errorReporter,
                 playerCloseListener, popoutListener);
     }
@@ -527,25 +526,12 @@ public class MediaPlayerManagerComponent extends AbstractComponent<MediaPlayerSe
         VideoContainer removedVideoContainer = activeVideoContainers.remove(videoTrack);
         if (removedVideoContainer != null) {
             removedVideoContainer.shutDown();
-            if (activeAudioPlayer != null && activeAudioPlayer.getMediaTrack() == videoTrack) {
-                assignNewAudioPlayer(null);
-            }
             notifyStateChange();
         } else {
             // nothing changed
         }
     }
 
-    private void assignNewAudioPlayer(MediaTrack audioTrack) {
-        if (audioTrack != null) {
-            activeAudioPlayer = new AudioHtmlPlayer(audioTrack);
-
-            synchPlayState(activeAudioPlayer);
-        } else {
-            activeAudioPlayer = null;
-        }
-    }
-
     private boolean isLive() {
         return raceTimer.getPlayMode() == Timer.PlayModes.Live;
     }

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

@@ -2,10 +2,10 @@ package com.sap.sailing.gwt.ui.client.media;
 
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.core.client.JavaScriptObject;
+import com.google.gwt.dom.client.DivElement;
 import com.google.gwt.dom.client.Document;
 import com.google.gwt.dom.client.Element;
 import com.google.gwt.dom.client.SourceElement;
-import com.google.gwt.dom.client.VideoElement;
 import com.google.gwt.event.shared.HandlerRegistration;
 import com.google.gwt.resources.client.CssResource;
 import com.google.gwt.uibinder.client.UiBinder;
@@ -30,20 +30,25 @@ public class VideoJSPlayer extends Widget implements RequiresResize {
     
     interface VideoJSStyle extends CssResource {
         String invertedVideoPlayer();
+
+        String player();
     }
 
     @UiField
     VideoJSStyle style;
     
     @UiField
-    VideoElement videoElement;
+    DivElement playerHolder;
+
+    Element videoElement;
     
-    private final String elementId;
+    private String elementId;
     private JavaScriptObject player;
     private boolean autoplay;
 
     private Boolean panorama;
     private Timer resizeChecker;
+    private boolean fullHeightWidth;
 
     public HandlerRegistration addPlayHandler(PlayEvent.Handler handler) {
         return addHandler(handler, PlayEvent.getType());
@@ -55,7 +60,23 @@ public class VideoJSPlayer extends Widget implements RequiresResize {
 
     public VideoJSPlayer(boolean fullHeightWidth, boolean autoplay) {
         this.autoplay = autoplay;
+        this.fullHeightWidth = fullHeightWidth;
         setElement(uiBinder.createAndBindUi(this));
+    }
+
+    public void setVideo(MimeType mimeType, String source) {
+        if (mimeType.mediaType == MediaType.audio) {
+            videoElement = Document.get().createAudioElement();
+        } else {
+            videoElement = Document.get().createVideoElement();
+        }
+        playerHolder.appendChild(videoElement);
+        videoElement.addClassName(style.player());
+        videoElement.addClassName("video-js");
+        videoElement.addClassName("vjs-default-skin");
+        videoElement.addClassName("vjs-big-play-centered");
+        videoElement.setAttribute("preload", "auto");
+
         videoElement.setId(elementId = "videojs_" + Document.get().createUniqueId());
         if (fullHeightWidth) {
             videoElement.addClassName("video-js-fullscreen");
@@ -69,12 +90,7 @@ public class VideoJSPlayer extends Widget implements RequiresResize {
                 onResize();
             }
         };
-    }
 
-    public void setVideo(MimeType mimeType, String source) {
-        if (mimeType == null || mimeType.mediaType != MediaType.video) {
-            return;
-        }
         this.panorama = mimeType.isPanorama();
         if (this.panorama) {
             videoElement.setAttribute("crossorigin", "anonymous");
@@ -93,6 +109,8 @@ public class VideoJSPlayer extends Widget implements RequiresResize {
             type = "video/vimeo";
         } else if (mimeType.mediaSubType == MediaSubType.mp4) {
             type = "video/mp4";
+        } else if (mimeType == MimeType.mp3) {
+            type = "audio/mp3";
         }
         if (type != null) {
             SourceElement se = Document.get().createSourceElement();
@@ -111,7 +129,7 @@ public class VideoJSPlayer extends Widget implements RequiresResize {
         }
     }
     
-    public VideoElement getVideoElement() {
+    public Element getVideoElement() {
         return videoElement;
     }
     
@@ -147,7 +165,8 @@ public class VideoJSPlayer extends Widget implements RequiresResize {
     }
     
     private native int getNativeCurrentTime() /*-{
-        return this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player.currentTime();
+        return this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player
+                .currentTime();
     }-*/;
 
     /**
@@ -170,7 +189,8 @@ public class VideoJSPlayer extends Widget implements RequiresResize {
     }
     
     private native void setNativeCurrentTime(int currentTime) /*-{
-        return this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player.currentTime(currentTime);
+        return this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player
+                .currentTime(currentTime);
     }-*/;
     
     public void play() {
@@ -182,7 +202,8 @@ public class VideoJSPlayer extends Widget implements RequiresResize {
     }
     
     private native void nativePlay() /*-{
-        return this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player.play();
+        return this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player
+                .play();
     }-*/;
     
     /**
@@ -191,10 +212,11 @@ public class VideoJSPlayer extends Widget implements RequiresResize {
      * @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) {
+        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();
+        return this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player
+                .isFullscreen();
     }-*/;
 
     /**
@@ -203,10 +225,11 @@ public class VideoJSPlayer extends Widget implements RequiresResize {
      * @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) {
+        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();
+        return this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player
+                .paused();
     }-*/;
     
     private void onPlay() {
@@ -225,58 +248,66 @@ public class VideoJSPlayer extends Widget implements RequiresResize {
     native void _onLoad(boolean autoplay, boolean withPanorama, String messageThreeSixty) /*-{
         var that = this;
         var elemid = this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::elementId;
-        
-        var player = $wnd.videojs(
-            elemid,
-            {
-                "playsInline" : true,
-                "customControlsOnMobile" : true
-            }).ready(function() {
-                this.on('play', function() {
-                  that.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::onPlay()();
-                });
-                this.on('pause', function() {
-                  that.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::onPause()();
-                });
-                
-                console.log("play: " + autoplay);
-                if (autoplay) {
-                    this.play();
-                }
-            });
-       if(withPanorama){     
-           player.panorama({
-              showNotice:true,
-              autoMobileOrientation: true,
-              clickAndDrag: true,
-              clickToToggle: false,
-              NoticeMessage: messageThreeSixty,
-              backToVerticalCenter: false,
-              backToHorizonCenter: false,
+
+        var player = $wnd
+                .videojs(elemid, {
+                    "playsInline" : true,
+                    "customControlsOnMobile" : true
+                })
+                .ready(
+                        function() {
+                            this
+                                    .on(
+                                            'play',
+                                            function() {
+                                                that.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::onPlay()();
+                                            });
+                            this
+                                    .on(
+                                            'pause',
+                                            function() {
+                                                that.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::onPause()();
+                                            });
+
+                            console.log("play: " + autoplay);
+                            if (autoplay) {
+                                this.play();
+                            }
+                        });
+        if (withPanorama) {
+            player.panorama({
+                showNotice : true,
+                autoMobileOrientation : true,
+                clickAndDrag : true,
+                clickToToggle : false,
+                NoticeMessage : messageThreeSixty,
+                backToVerticalCenter : false,
+                backToHorizonCenter : false,
             });
         }
-        
+
         this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player = player;
     }-*/;
     
     private native void disposeNative() /*-{
-       var player = this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player;
-       player.dispose();
+        var player = this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player;
+        player.dispose();
     }-*/;
 
     private native void handleResize() /*-{
         var player = this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player;
         var canvas = player.getChild('Canvas');
-        if(canvas){
+        if (canvas) {
             canvas.handleResize();
         }
     }-*/;
     
     public native void pause() /*-{
-        if(this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player == null) {
+        if (this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player == null) {
             return;
         }
-        return this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player.pause();
+        return this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player
+                .pause();
     }-*/;
 
     public int getVideoWidth() {
@@ -302,7 +333,8 @@ public class VideoJSPlayer extends Widget implements RequiresResize {
     }
     
     private native void setVolumeNative(float volume) /*-{
-        this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player.volume(volume);
+        this.@com.sap.sailing.gwt.ui.client.media.VideoJSPlayer::player
+                .volume(volume);
     }-*/;
 
     public void setPlaybackRate(double newPlaySpeedFactor) {

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

@@ -15,7 +15,6 @@
             transform: rotate(180deg) translateX(50%) translateZ(0) !important;
         }
     </ui:style>
-    <div class="{style.player}">
-        <video class="{style.player} video-js vjs-default-skin vjs-big-play-centered" ui:field="videoElement" preload="auto"></video>
+    <div ui:field="playerHolder" class="{style.player}">
     </div>
 </ui:UiBinder>

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

@@ -1,6 +1,6 @@
 package com.sap.sailing.gwt.ui.client.media.popup;
 
-import com.google.gwt.dom.client.VideoElement;
+import com.google.gwt.dom.client.Element;
 import com.google.gwt.event.dom.client.ContextMenuEvent;
 import com.google.gwt.event.dom.client.ContextMenuHandler;
 import com.google.gwt.user.client.Window;
@@ -39,12 +39,12 @@ public class VideoPopupWindow extends AbstractPopupWindow implements ContextMenu
     
     
 
-    native void initPlay(VideoElement videoElement) /*-{
+    native void initPlay(Element videoElement) /*-{
 		var that = this;
-                var deferredPlayState = $wnd.deferredPlayState
-                if (deferredPlayState && !$wnd.videoPlayer) {
-                     that.@com.sap.sailing.gwt.ui.client.media.popup.VideoPopupWindow::initPlayState(DZDZ)(deferredPlayState.deferredMediaTime, deferredPlayState.deferredIsMuted, deferredPlayState.deferredPlaybackSpeed, deferredPlayState.deferredIsPlaying);
-                }
+		var deferredPlayState = $wnd.deferredPlayState
+		if (deferredPlayState && !$wnd.videoPlayer) {
+			that.@com.sap.sailing.gwt.ui.client.media.popup.VideoPopupWindow::initPlayState(DZDZ)(deferredPlayState.deferredMediaTime, deferredPlayState.deferredIsMuted, deferredPlayState.deferredPlaybackSpeed, deferredPlayState.deferredIsPlaying);
+		}
     }-*/;
 
     public void loadedmetadata() {