[Enhancement] Adding the Mac mosaic blur to sidebars

[mathew-kurian]

I have added the mosaic blur to the app to mimic the Apple style. I have made changes in my fork. I will be happy to test and then make a PR if this is something you are interested in. It looks like this:

Left Sidebar

Right Sidebar

Header Sidebar (testing)

[BarakaAka1Only]

I like that.

I took a look at your changes on your fork i see you applied:

-webkit-backdrop-filter

Since its only in 3 areas, i think it would be best if it were in a preference setting so that you can choose with or without the blur then from there, if any other sections needs blurs etc it can be added in one place than going through the main file where its all crowded.

Either way nice 👍

[mathew-kurian]

@BarakaAka1Only Awesome, I can try to do that. Any idea on how to read preference settings via css? Additionally, if you notice the window (of the first picture), you can see a light white border. Has there been any effort to hide that?

PS. I updated the images to give you a better idea of the header.

[BarakaAka1Only]

That is interesting, looks like something with #main

try something with border-top on that id as that is the main window

Also there isn't a way to read the preference in css because the file, the css is added to the dom on load thats where you would need to add a your own set take a look at the Styles folder [DarkCyanStyle.h/DarkCyanStyle.m/ApplicationStyle.m]

Last thing the -webkit-backdrop-filter does not exist on Yosemite and below its -webkit-filter:

[MarshallOfSound]

@BarakaAka1Only backdrop-filter and filter are two very different properties.

The first applies to the area behind a DOM Node. The other applies to the DOM Node itself

[BarakaAka1Only]

Whoops a mistype just, didn't notice i meant to say backdrop-filter my bad

[mathew-kurian]

@BarakaAka1Only Yes. I was aware of the compatibility issue but it has a very safe fallback which is basically no blur. Additionally, the "background blur" preference will only be visible to who are able to run this feature i.e. >= Safari 9. What do you think?

[BarakaAka1Only]

Sounds reasonable because of the fact when doing a version test comes out as version 5 when it only works 9 and above

version: "5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/600.8.9 (KHTML, like Gecko)"

Not sure if there is a way to change the framework version to use 9 or something but i don't think it's possible.

So i think that would be best for now 👍

[mathew-kurian]

How about something akin to this?

"webkitBackdropFilter" in document.body.style // true

[BarakaAka1Only]

That comes out false because the version that Yosemite is using is 5 when backdrop is only supported 9 and above

hence @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {} and

var vendorPrefixes = ",Webkit,Moz,O,ms,Khtml".split(",");

function supports(feature) {
        var support = false;
        for (var i = 0; i < vendorPrefixes.length && !support; i++) {
                support = vendorPrefixes[i] + feature in document.body.style
        }
        return support;
}

supports("webkitBackdropFilter"); // false
supports("BackdropFilter");  // false

credits codepen for the js

caniuse

[mathew-kurian]

Added a preference in the appearance option.

PS. Will add for other themes as well. Just wanted to show the procedure via. options window

[BarakaAka1Only]

Tested on Sierra and works as expected 👍 only thing since the css update, DarkCyanStyle now get sets after spotify-black as it inherits the styles from there and adds the cyan color(s) so as of right now with the blur enabled the DarkCyanStyle on the #material-app-bar is black other than that awesome 👍

[mathew-kurian]

@BarakaAka1Only Thanks. There are issues still to resolve. These issues will be resolved over the next couple of days after some testing. I'll will update here as soon as it seems stable.

[BarakaAka1Only]

Looking forward to it.

[BarakaAka1Only]

To add on if OS is Yosemite and below,

i played around with the AppearancePreferencesViewController files and pretty much if the case is true via is Yosemite and below it will hide and rearrange the preferences settings in that view

so it will look like

while if El Capitan and above will have the background blur option ;)

AppearancePreferencesViewController.h added:

@property (assign) IBOutlet NSButton *BlurPrefs;
@property (assign) IBOutlet NSButton *AppearancePrefs;
@property (assign) IBOutlet NSButton *StyleChoosePrefs;
@property (assign) IBOutlet NSTextField *StyleChooseTextPrefs;

updated code for shorter condition as i got it working now

AppearancePreferencesViewController.m added:

@synthesize BlurPrefs;
@synthesize AppearancePrefs;
@synthesize StyleChoosePrefs;
@synthesize StyleChooseTextPrefs;

- (void)awakeFromNib
{
    self.sortDescriptors = @[ [NSSortDescriptor sortDescriptorWithKey:@"name" ascending:YES] ];

    if (floor(NSAppKitVersionNumber) <= NSAppKitVersionNumber10_9 || floor(NSAppKitVersionNumber) <= NSAppKitVersionNumber10_10_Max) {
        [BlurPrefs setHidden:TRUE];
        [AppearancePrefs setFrameOrigin:NSMakePoint(AppearancePrefs.frame.origin.x, AppearancePrefs.frame.origin.y + 15)];
        [StyleChoosePrefs setFrameOrigin:NSMakePoint(StyleChoosePrefs.frame.origin.x, StyleChoosePrefs.frame.origin.y + 5)];
        [StyleChooseTextPrefs setFrameOrigin:NSMakePoint(StyleChooseTextPrefs.frame.origin.x, StyleChooseTextPrefs.frame.origin.y + 5)];
    }

}

Then added the Referencing outlets in PreferencesWindowController.xib

I've tested it on all OS's ranging from Mavericks to Sierra.

Doing this addition will give less opened issues with users saying this option doesn't work etc if on Yosemite and below.

sorry for the redundancy

[mathew-kurian]

@BarakaAka1Only Ok Ill put this code in. Feel free to add this code into the working repo on my account (added you as a collaborator). Also, do you know how i can bundle this application (with the new blur) so i can share with some friends who can then test it out on their machines?

After some fine tuning :)

[BarakaAka1Only]

Looks amazing! And yeah, when you build the project it automatically compiles it to a runnable application you would have to go to the build folder here ~/Library/Developer/Xcode/DerivedData

from there you will see radiant-player-mac- with a bunch of random numbers / letters at the end something like radiant-player-mac-dshnwexnfcmktxegznoofisfgxhb go into the folder then Build -> Products -> Debug and you will see Radiant Player.app you can compress it to a zip and send it off.

[jacobwgillespie]

Hey, what's the status of this? Looks awesome, I would love to get this merged.

[mathew-kurian]

There are some performance issues to take into consideration. Additionally, there are some CSS changes needed to ensure that it works well across all the pages. But other than that it pretty much there - just got busy at work.