macosx: Implement new design for VLC bottom bar

Implement the following features - Translucency - New volume and progress sliders - Animation for progress slider - New icons for controls - Update design and controls - New album view when playing
5 years ago · 397ad3d860
8 changed files with 130 additions and 21 deletions
--- a/modules/gui/macosx/views/VLCBottomBarView.h
+++ b/modules/gui/macosx/views/VLCBottomBarView.h
@ -22,7 +22,7 @@

 #import <Cocoa/Cocoa.h>

-@interface VLCBottomBarView : NSView
+@interface VLCBottomBarView : NSVisualEffectView

@property NSGradient *lightGradient;
@property NSGradient *darkGradient;
--- a/modules/gui/macosx/views/VLCBottomBarView.m
+++ b/modules/gui/macosx/views/VLCBottomBarView.m
@ -85,6 +85,8 @@
                                                      endingColor:[NSColor colorWithSRGBRed:0.07 green:0.07 blue:0.07 alpha:1.0]];
        _darkStroke = [NSColor blackColor];
    }
+    
+    self.blendingMode = NSVisualEffectBlendingModeBehindWindow;
 }

 - (void)calculatePaths
@ -149,4 +151,9 @@
    [self setNeedsDisplay:YES];
 }

+- (BOOL)allowsVibrancy
+{
+    return YES;
+}
+
@end
--- a/modules/gui/macosx/views/VLCSlider.m
+++ b/modules/gui/macosx/views/VLCSlider.m
@ -25,6 +25,26 @@
 #import "extensions/NSView+VLCAdditions.h"
 #import "views/VLCSliderCell.h"

+static NSString *const kHeightConstraintIdentifier = @"heightConstraintIdentifier";
+
+static inline void mouseEnteredOrExited(NSLayoutConstraint *const __unsafe_unretained heightConstraint,
+                                        const BOOL eventIsEntered)
+{
+    [NSAnimationContext beginGrouping];
+    
+    NSAnimationContext.currentContext.duration = 0.2;
+    heightConstraint.animator.constant = eventIsEntered ? 10.0 : 5.0;
+    
+    [NSAnimationContext endGrouping];
+}
+
+@interface VLCSlider ()
+{
+    NSTrackingArea *_trackingArea;
+    NSLayoutConstraint *_heightConstraint;
+}
+@end
+
@implementation VLCSlider

 - (instancetype)initWithCoder:(NSCoder *)coder
@ -40,6 +60,21 @@
        } else {
            [self setSliderStyleLight];
        }
+        
+        dispatch_async(dispatch_get_global_queue(QOS_CLASS_BACKGROUND, 0), ^(){
+            for (NSLayoutConstraint *constraint in self.constraints) {
+                if ([constraint.identifier isEqualToString:kHeightConstraintIdentifier]) {
+                    self->_heightConstraint = constraint;
+                    self->_trackingArea = [[NSTrackingArea alloc] initWithRect:NSZeroRect
+                                                                       options:NSTrackingMouseEnteredAndExited | NSTrackingActiveInKeyWindow | NSTrackingInVisibleRect
+                                                                         owner:self
+                                                                      userInfo:nil];
+                    
+                    [self addTrackingArea:self->_trackingArea];
+                    break;
+                }
+            }
+        });
    }
    return self;
 }
@ -124,4 +159,21 @@
    }
 }

+#pragma mark - Mouse Events
+
+- (void)mouseEntered:(NSEvent *)event
+{
+    if (self.isKnobHidden || __builtin_expect(_heightConstraint == nil, false)) {
+        return;
+    }
+    mouseEnteredOrExited(_heightConstraint, YES);
+}
+- (void)mouseExited:(NSEvent *)event
+{
+    if (self.isKnobHidden || __builtin_expect(_heightConstraint == nil, false)) {
+        return;
+    }
+    mouseEnteredOrExited(_heightConstraint, NO);
+}
+
@end
--- a/modules/gui/macosx/views/VLCSliderCell.m
+++ b/modules/gui/macosx/views/VLCSliderCell.m
@ -23,6 +23,7 @@
 #import "VLCSliderCell.h"

 #import "extensions/NSGradient+VLCAdditions.h"
+#import "extensions/NSColor+VLCAdditions.h"
 #import "main/CompatibilityFixes.h"

@interface VLCSliderCell () {
@ -53,7 +54,7 @@
    _gradientColor = [NSColor colorWithCalibratedRed: 0.663 green: 0.663 blue: 0.663 alpha: 1];
    _gradientColor2 = [NSColor colorWithCalibratedRed: 0.749 green: 0.749 blue: 0.753 alpha: 1];
    _trackStrokeColor = [NSColor colorWithCalibratedRed: 0.619 green: 0.624 blue: 0.623 alpha: 1];
-    _filledTrackColor = [NSColor colorWithCalibratedRed: 0.55 green: 0.55 blue: 0.55 alpha: 1];
+    _filledTrackColor = [NSColor VLCSliderFillColor];
    _knobFillColor = [NSColor colorWithCalibratedRed: 1 green: 1 blue: 1 alpha: 1];
    _activeKnobFillColor = [NSColor colorWithCalibratedRed: 0.95 green: 0.95 blue: 0.95 alpha: 1];
    _shadowColor = [NSColor colorWithCalibratedRed: 0.32 green: 0.32 blue: 0.32 alpha: 1];
@ -94,7 +95,7 @@
    }
    _gradientColor = [NSColor colorWithCalibratedRed: 0.15 green: 0.15 blue: 0.15 alpha: 1];
    _trackStrokeColor = [NSColor colorWithCalibratedRed: 0.23 green: 0.23 blue: 0.23 alpha: 1];
-    _filledTrackColor = [NSColor colorWithCalibratedRed: 0.15 green: 0.15 blue: 0.15 alpha: 1];
+    _filledTrackColor = [NSColor VLCSliderFillColor];
    _shadowColor = [NSColor colorWithCalibratedRed: 0.32 green: 0.32 blue: 0.32 alpha: 1];
    _knobStrokeColor = [NSColor colorWithCalibratedRed: 0.592 green: 0.596 blue: 0.596 alpha: 1];

@ -191,7 +192,7 @@ static CVReturn DisplayLinkCallback(CVDisplayLinkRef displayLink, const CVTimeSt
        return;

    // Draw knob
-    NSBezierPath* knobPath = [NSBezierPath bezierPathWithOvalInRect:NSInsetRect(knobRect, 2.0, 2.0)];
+    NSBezierPath* knobPath = [NSBezierPath bezierPathWithOvalInRect:NSInsetRect(knobRect, 1.0, 1.0)];
    if (self.isHighlighted) {
        [_activeKnobFillColor setFill];
    } else {
@ -237,7 +238,7 @@ static CVReturn DisplayLinkCallback(CVDisplayLinkRef displayLink, const CVTimeSt
    // Calculate filled track
    NSRect filledTrackRect = rect;
    NSRect knobRect = [self knobRectFlipped:NO];
-    filledTrackRect.size.width = knobRect.origin.x + (self.knobThickness / 2);
+    filledTrackRect.size.width = knobRect.origin.x + (knobRect.size.width / 2);

    // Filled Track Drawing
    CGFloat filledTrackCornerRadius = 2;
--- a/modules/gui/macosx/views/VLCVolumeSliderCell.m
+++ b/modules/gui/macosx/views/VLCVolumeSliderCell.m
@ -23,6 +23,7 @@
 #import "VLCVolumeSliderCell.h"

 #import "extensions/NSGradient+VLCAdditions.h"
+#import "extensions/NSColor+VLCAdditions.h"
 #import "main/CompatibilityFixes.h"

@interface VLCVolumeSliderCell () {
@ -58,7 +59,7 @@
    _gradientColor = [NSColor colorWithCalibratedRed: 0.663 green: 0.663 blue: 0.663 alpha: 1];
    _gradientColor2 = [NSColor colorWithCalibratedRed: 0.749 green: 0.749 blue: 0.753 alpha: 1];
    _trackStrokeColor = [NSColor colorWithCalibratedRed: 0.619 green: 0.624 blue: 0.623 alpha: 1];
-    _filledTrackColor = [NSColor colorWithCalibratedRed: 0.55 green: 0.55 blue: 0.55 alpha: 1];
+    _filledTrackColor = [NSColor VLCSliderFillColor];
    _knobFillColor = [NSColor colorWithCalibratedRed: 1 green: 1 blue: 1 alpha: 1];
    _activeKnobFillColor = [NSColor colorWithCalibratedRed: 0.95 green: 0.95 blue: 0.95 alpha: 1];
    _shadowColor = [NSColor colorWithCalibratedRed: 0.32 green: 0.32 blue: 0.32 alpha: 1];
@ -107,7 +108,7 @@
    }
    _gradientColor2 = [NSColor colorWithCalibratedRed: 0.15 green: 0.15 blue: 0.15 alpha: 1];
    _trackStrokeColor = [NSColor colorWithCalibratedRed: 0.23 green: 0.23 blue: 0.23 alpha: 1];
-    _filledTrackColor = [NSColor colorWithCalibratedRed: 0.15 green: 0.15 blue: 0.15 alpha: 1];
+    _filledTrackColor = [NSColor VLCSliderFillColor];
    _shadowColor = [NSColor colorWithCalibratedRed: 0.32 green: 0.32 blue: 0.32 alpha: 1];

    NSColor* knobGradientColor = [NSColor colorWithSRGBRed: 0.15 green: 0.15 blue: 0.15 alpha: 1];
--- a/modules/gui/macosx/windows/mainwindow/VLCControlsBarCommon.h
+++ b/modules/gui/macosx/windows/mainwindow/VLCControlsBarCommon.h
@ -26,7 +26,9 @@
@class VLCDragDropView;
@class VLCSlider;
@class VLCTimeField;
+@class VLCImageView;
@class VLCBottomBarView;
+@class VLCWrappableTextField;

 /*****************************************************************************
 * VLCControlsBarCommon
@ -42,13 +44,20 @@
@property (readwrite, strong) IBOutlet NSButton *playButton;
@property (readwrite, strong) IBOutlet NSButton *backwardButton;
@property (readwrite, strong) IBOutlet NSButton *forwardButton;
+@property (readwrite, strong) IBOutlet NSButton *repeatButton;
+@property (readwrite, strong) IBOutlet NSButton *shuffleButton;

@property (readwrite, strong) IBOutlet VLCSlider *timeSlider;

+@property (readwrite, strong) IBOutlet VLCImageView *artworkImageView;
+@property (readwrite, strong) IBOutlet VLCWrappableTextField *songNameTextField;
+@property (readwrite, strong) IBOutlet VLCWrappableTextField *artistNameTextField;
@property (readwrite, strong) IBOutlet VLCTimeField *timeField;
+
@property (readwrite, strong) IBOutlet NSButton *fullscreenButton;
@property (readwrite, strong) IBOutlet NSLayoutConstraint *fullscreenButtonWidthConstraint;

+@property (readwrite, strong) IBOutlet NSView *nowPlayingView;
@property (readwrite, strong) IBOutlet VLCBottomBarView *bottomBarView;

@property (readonly) BOOL nativeFullscreenMode;
--- a/modules/gui/macosx/windows/mainwindow/VLCControlsBarCommon.m
+++ b/modules/gui/macosx/windows/mainwindow/VLCControlsBarCommon.m
@ -31,8 +31,10 @@

 #import "views/VLCBottomBarView.h"
 #import "views/VLCDragDropView.h"
+#import "views/VLCImageView.h"
 #import "views/VLCTimeField.h"
 #import "views/VLCSlider.h"
+#import "views/VLCWrappableTextField.h"

 /*****************************************************************************
 * VLCControlsBarCommon
@ -47,6 +49,11 @@
    NSImage *_pressedPauseImage;
    NSImage *_playImage;
    NSImage *_pressedPlayImage;
+    NSImage *_repeatOffImage;
+    NSImage *_repeatAllImage;
+    NSImage *_repeatOneImage;
+    NSImage *_shuffleOffImage;
+    NSImage *_shuffleOnImage;

    NSTimeInterval last_fwd_event;
    NSTimeInterval last_bwd_event;
@ -95,18 +102,17 @@
    [self.fullscreenButton setToolTip: _NS("Enter fullscreen")];
    self.fullscreenButton.accessibilityLabel = self.fullscreenButton.toolTip;

-    [self.backwardButton setImage: imageFromRes(@"backward-3btns")];
-    [self.backwardButton setAlternateImage: imageFromRes(@"backward-3btns-pressed")];
-    _playImage = imageFromRes(@"play");
-    _pressedPlayImage = imageFromRes(@"play-pressed");
-    _pauseImage = imageFromRes(@"pause");
-    _pressedPauseImage = imageFromRes(@"pause-pressed");
-    [self.forwardButton setImage: imageFromRes(@"forward-3btns")];
-    [self.forwardButton setAlternateImage: imageFromRes(@"forward-3btns-pressed")];
-
-    [self.fullscreenButton setImage: imageFromRes(@"fullscreen-one-button")];
-    [self.fullscreenButton setAlternateImage: imageFromRes(@"fullscreen-one-button-pressed")];
-
+    [self.backwardButton setImage: imageFromRes(@"VLCBackwardTemplate")];
+    [self.backwardButton setAlternateImage: imageFromRes(@"VLCBackwardTemplate")];
+    _playImage = imageFromRes(@"VLCPlayTemplate");
+    _pressedPlayImage = imageFromRes(@"VLCPlayTemplate");
+    _pauseImage = imageFromRes(@"VLCPauseTemplate");
+    _pressedPauseImage = imageFromRes(@"VLCPauseTemplate");
+    [self.forwardButton setImage: imageFromRes(@"VLCForwardTemplate")];
+    [self.forwardButton setAlternateImage: imageFromRes(@"VLCForwardTemplate")];
+
+    [self.fullscreenButton setImage: imageFromRes(@"VLCFullscreenOffTemplate")];
+    [self.fullscreenButton setAlternateImage: imageFromRes(@"VLCFullscreenOffTemplate")];
    [self.playButton setImage: _playImage];
    [self.playButton setAlternateImage: _pressedPlayImage];

@ -136,6 +142,22 @@
    [self.backwardButton setAction:@selector(bwd:)];

    [self playerStateUpdated:nil];
+
+    [_artworkImageView setCropsImagesToRoundedCorners:YES];
+    [_artworkImageView setImage:[NSImage imageNamed:@"noart"]];
+    [_artworkImageView setContentGravity:VLCImageViewContentGravityResize];
+
+    _repeatAllImage = [NSImage imageNamed:@"repeatAll"];
+    _repeatOffImage = [NSImage imageNamed:@"repeatOff"];
+    _repeatOneImage = [NSImage imageNamed:@"repeatOne"];
+
+    [_repeatButton setImage:_repeatOffImage];
+
+    _shuffleOffImage = [NSImage imageNamed:@"shuffleOff"];
+    _shuffleOnImage = [NSImage imageNamed:@"shuffleOn"];
+
+    [_shuffleButton setImage:_shuffleOffImage];
+
 }

 - (void)dealloc
@ -277,11 +299,27 @@
        [self.timeField setStringValue: @"00:00"];
        [self.timeSlider setIndefinite:NO];
        [self.timeSlider setEnabled:NO];
+        [self.timeSlider setHidden:YES];
+        [self.nowPlayingView setHidden:YES];
        return;
    }

+    _songNameTextField.stringValue = inputItem.name;
+    _artistNameTextField.stringValue = inputItem.artist;
+
+    NSURL *artworkURL = inputItem.artworkURL;
+
+    if (artworkURL) {
+        [_artworkImageView setImageURL:inputItem.artworkURL placeholderImage:[NSImage imageNamed:@"noart"]];
+    } else {
+        _artworkImageView.image = [NSImage imageNamed:@"noart"];
+    }
+
+    [self.nowPlayingView setHidden:NO];
+    [self.timeSlider setHidden:NO];
    [self.timeSlider setKnobHidden:NO];
    [self.timeSlider setFloatValue:_playerController.position];
+    [self.bottomBarView setHidden:NO];

    vlc_tick_t duration = inputItem.duration;
    bool buffering = _playerController.playerState == VLC_PLAYER_STATE_STARTED;
--- a/modules/gui/macosx/windows/mainwindow/VLCMainWindowControlsBar.m
+++ b/modules/gui/macosx/windows/mainwindow/VLCMainWindowControlsBar.m
@ -76,8 +76,8 @@
    [self.volumeDownButton setImage: imageFromRes(@"volume-low")];
    [self.volumeUpButton setImage: imageFromRes(@"volume-high")];

-    [self.fullscreenButton setImage: imageFromRes(@"fullscreen-double-buttons")];
-    [self.fullscreenButton setAlternateImage: imageFromRes(@"fullscreen-double-buttons-pressed")];
+    [self.fullscreenButton setImage: imageFromRes(@"VLCFullscreenOffTemplate")];
+    [self.fullscreenButton setAlternateImage: imageFromRes(@"VLCFullscreenOffTemplate")];

    [self.prevButton setImage: imageFromRes(@"previous-6btns")];
    [self.prevButton setAlternateImage: imageFromRes(@"previous-6btns-pressed")];
@ -89,6 +89,7 @@
    [self updateVolumeSlider:nil];

    [self playbackStateChanged:nil];
+    [self.stopButton setHidden:YES];
 }

 #pragma mark -