Mastermindzh / tidal-hifi

The web version of Tidal running in electron with hifi support thanks to widevine.
Other
977 stars 56 forks source link

[Thread]: user images. #3

Closed Mastermindzh closed 2 years ago

Mastermindzh commented 4 years ago

I'd love to collect some images of Tidal-Hifi running in the wild on this issue. By uploading a picture you will essentially allow me to use the picture as an example on the repo.

Please don't add the pictures as a PR but instead add them on this issue.

PS: including parts of the desktop is perfectly fine!

jabolina commented 4 years ago

image

Screenshot with a great brazilian artist.

GostLy commented 4 years ago

Screenshot from 2019-12-12 21-53-34

noahbliss commented 4 years ago

Screenshot from 2020-01-05 12-53-50

gazben commented 4 years ago
➜  ~ lsb_release -a
LSB Version:    n/a
Distributor ID: ManjaroLinux
Description:    Manjaro Linux
Release:    18.1.5
Codename:   Juhraya
➜  ~ uname -a
Linux razorback 5.4.6-2-MANJARO #1 SMP PREEMPT Tue Dec 24 15:55:20 UTC 2019 x86_64 GNU/Linux

image

Mastermindzh commented 4 years ago

Thanks friends, I will be using these! :D

cosminmocan commented 2 years ago

image

cool00geek commented 2 years ago

Screenshot_20211121_171218

BitterSweetcandyshop commented 2 years ago

I saw Mastermindz's dotfiles where similar style to mine, and I love transparent windows... so with the power of glass cord I started on this: 1646981007

BitterSweetcandyshop commented 2 years ago

I THOUGHT I POSTED THE UPDATE!!! so sorry I used https://github.com/NyaomiDEV/Glasscord with the code below to get the above image (I added transparent effects to bottom and side bar). Make sure you have the css injection delayed by like 5 seconds to be sure everything loads fine. It took me like 10 minutes to do in total.

(No I did not theme the login in screen bc I never see it and I'm lazy.)

Works without hassle, longer startup time, Arch Linux (xmonad + picom), looks cooler.

/* Transprency */
/* Main Area */
.css-1ezs1pk, .css-1emr5z5, .contentArea--1raSP, .css-9dfit8 {
    background-color: transparent !important
}
.enable-scrollbar-styles {
    background-color: rgba(0, 0, 0, 0.5) !important
}

/* Side bar */
.sidebar--2_gw0 {
    background: transparent !important
}

.sidebarWrapper {
    background-color: rgba(0, 0, 0, 0.3) !important;
    margin: 15px 0px 15px 10px;
    border-radius: 5px;

}

/* Bottom */
.css-17hdx1j {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border-radius: 5px;
    right: 10px;
    bottom: 5px;
    max-width: calc(100% - 15px);
}

/* Search Bar */
.css-1un3uiy:not(:hover) {
    width: 110px;
    transition: ease-in-out 1s;
}
.css-1un3uiy:hover {
    width: 100%;
    transition: ease-in-out 1s;
}
licentiapoetica commented 2 years ago

image

Mastermindzh commented 2 years ago

@licentiapoetica, great choice of music!

Karate is one of my favourites 😄 !

licentiapoetica commented 2 years ago

@licentiapoetica, great choice of music!

Karate is one of my favourites smile !

hehe it really is banging!

gus3008 commented 2 years ago

Tidal-hifi-on-Win95-Linux

lanceseidman commented 1 year ago

image

1nikolas commented 1 year ago

My theme color is almost the same as the sidebar color. Also yes, it's the default KDE wallpaper. Can't be bothered to change it

image

cdebix commented 1 year ago

tidal-hifi-fs8

Fortless commented 1 year ago

My little setup here :) Maybe in the future, due to MQA being proprietary, im just hoping maybe there will be MQA support, since I run a IFI Zen Signature v2 dac (full unfold) and IFI headphone preamp :)

Otherwise, good work! image

Mastermindzh commented 1 year ago

Good looking setup @Fortless!

I also hope for MQA support but I don't have high hopes for it. Rocking the Klipsch amp and HP3's and the r51-pms 😄

Fortless commented 1 year ago

Good looking setup @Fortless!

I also hope for MQA support but I don't have high hopes for it. Rocking the Klipsch amp and HP3's and the r51-pms 😄

Thanks! Yours too!

Yep. They however announced possible support for mqa quality in the browsers. I guess it's only a matter of time..? It's a matter of how it talks to the API in order for it to know that the listener supports MQA.

Mastermindzh commented 1 year ago

Did they? That would be cool! I'll certainly look into it when it comes out!

Dinh6789 commented 1 year ago

Hello, Could you can show tutorial video, i cant understand :(

AydroPunk commented 1 year ago

My humble setup in which I always spend my time developing :).

I thank you for creating this beautiful app, you should open a sponsor here on github, surely there are people who would support you with something.

In other topics I would like to ask you the following question:

Do you think that someday there will be an official client for linux, what do you think that Tidal is slowly moving away from MQA and this will put Hi-Res as Quoboz does, and if you think that Hi-Res will be available in the browser? I say this because I found out in this news: https://www.whathifi.com/news/tidal-is-introducing-hi-res-flac-to-its-hifi-plus-subscription-tier

Sorry for so many questions, I just want to know the opinion of someone expert.

Captura desde 2023-04-22 20-31-36

And I also want you to look at the icon I asked you to make, it looks nice, if you want you can use it as a substitute, to make the application more "unique".

Mastermindzh commented 1 year ago

Hey AydroPunk,

Amazing setup! I will look into Github sponsorship, thanks!

Unfortunately, I don't think there will be a Linux client soon. If they remove MQA, we can improve this app a bit more to become a proper Linux replacement.

Do you know who the original copyright owner/artist of that new Tidal logo is? I'd be happy to include it (with a setting to revert to the original perhaps) but I'd need to have written consent from the artist (or even better, a PR adding the written consent into the docs folder)

Mastermindzh commented 1 year ago

Hey @AydroPunk,

I've managed to set up sponsors if you're interested 😄: https://github.com/sponsors/Mastermindzh

wojciech-zurek commented 1 year ago

Tokyo night inspiration :) tidal2

AydroPunk commented 1 year ago

Hey @Mastermindzh Thanks for the compliment :)

I don't think we'll see an official client so soon, I looked it up on Tidal's reddit (/r/TIdaL/) and there doesn't seem to be much interest in doing it and they've been asking for it for a while.

And speaking of the Tidal logo, I asked a brother who makes themes and icons for gtk to make it for me, here is the request: https://github.com/EliverLara/candy-icons/issues/460

And having the artist's consent, you could ask him if you can use it in the app, although I think he is someone open minded and will agree.I really don't know how you could ask him and if he can handwrite you something, I feel he is someone a bit busy (he is the main maintainer of themes for gtk like dracula or nord). And finally this last logo is hosted at: https://github.com/EliverLara/candy-icons/blob/master/apps/scalable/tidal-hifi.svg

If you could do the icon configuration, maybe select which one you want to have, it would be very cool to give a unique touch to the application.

Finally, I thank you with $3 (something is something) for making this great app, it really is a true alternative to linux and I love the details you put in this one: like the discord integration, the gpu acceleration and that Tokyo theme I love, although if you could add one that looks like the Dracula theme, it would be great.

Also, in the reddit forums, tidal's own CEO already said that in August we will be able to play Hi-res music in the browser for the first time, leaving little by little that proprietary codec of dubious quality (MQA). The note is here: https://www.reddit.com/r/TIdaL/comments/14m6j5o/hires_flac_is_almost_here/

pd: at the end you accepted to be the sponsor :).

LEMMIIX commented 8 months ago

PS: including parts of the desktop is perfectly fine!

Screenshot_20231223_153915

PS: best techno playlist: .com/browse/playlist/ec1fa388-62a1-4e8e-a264-8fb5b1229844

Zombiefleischer commented 5 months ago

image My Catppuccin Frappe Sapphire theme setup

CSS code is based on @wojciech-zurek and definitely not perfect!

The CSS File

```css :root { --footer-player-background: #232634; /* Done: Player Footbar Background */ --sidebar-background: #232634; /* Done: Sidebar Menu Background */ --sidebar-hover-background: #62688080; /* Done: Sidebar Hover Background */ --sidebar-menu-top-text: #85c1dc; /* Done: Active Folder Text and Icon */ --sidebar-menu-top-text-hover: #85c1dc; /* Done: Active Folder Text and Icon Hover */ --sidebar-menu-playlist-text: #85c1dc; /* Done: Active Playlist in Folder */ --search-background: #232634; /* Done: Normal Search Background */ --search-focus-background: #62688080; /* Done: Focused Search Background */ --search-focus-text: #c6d0f5; /* Done: Focused Text Background */ --main-background: #303446; /* Done: Main App Background */ --main-navigation-control-background: #232634; /* Done: Forward and Back Buttons */ --main-feed-button-background: #232634; /* Done: Bell Feed Button */ --player-control-background: #85c1dc; /* Done: Background of the active Player Control Buttons */ --player-control-active-button: #232634; /* Done: Icon color of the active Player Control Buttons */ --player-progress-bar: #85c1dc; /* Done: Color of the Progress Bar */ --player-volume-bar: #85c1dc; /* Done: Color of the Volume Bar */ --indicator-hifi-background: #ca9ee6; /* Done: Background of the HIFI indicator */ --indicator-hifi-span: #232634; /* Done: Text Color of the HIFI indicator */ --player-control-favorite: #74c7ec; /* Done: Color of the Favorite Icon (Heart) */ --right-queue-background: #45475a; /* Done: Color of the Queue Sidebar */ --pop-ups: #45475a; /* Done: Color of Pop Ups */ } .player--gAOQG.notFullscreen--xbpBL { background-color: var(--footer-player-background); } .sidebar--jVJai { background-color: var(--sidebar-background); contain: strict; flex-grow: 1; overflow-y: auto; } .item--ZrMxl:hover { background-color: var(--sidebar-hover-background); } .main--jxfcQ { background-color: var(--main-background); } button.button--yO9Cd { background-color: var(--main-navigation-control-background); } .player--gAOQG button.withBackground[aria-checked="true"] .icon--dd0Ta { fill: var(--player-control-active-button); } .player--gAOQG button.withBackground[aria-checked="true"] { background-color: var(--player-control-background); } .activeItem--kFIk0 .activeItem--kFIk0 .playlistItem--mQrxp .section--PSIay.playingItem--eWkYS { color: var(--sidebar-menu-playlist-text); } .activeItem--kFIk0 .icon--w7IgY { color: var(--sidebar-menu-top-text); } .activeItem--kFIk0:hover .icon--w7IgY { color: var(--sidebar-menu-top-text); } .progressBarWrapper--seZqz { color: var(--player-progress-bar); } .playbackControls--FhKVf button .tidal-ui__icon { transform: scale(1); } .moreContainer--JnBwQ > button:nth-child(1) span { background-color: var(--indicator-hifi-background); color: var(--indicator-hifi-span); } .activeItem--kFIk0 { color: var(--sidebar-menu-top-text); } .activeItem--kFIk0 .playlistItem--mQrxp { color: var(--sidebar-menu-playlist-text); } .folderTitle--XDemO { color: var(--sidebar-menu-top-text); } button.feedBell--XaJus { background-color: var(--main-feed-button-background); } .favorite--yK4ZG { color: var(--player-control-favorite); } .favorite--E0GIx { color: var(--player-control-favorite); } svg.accentedIcon--avEQv { color: var(--player-control-favorite); } button.buttonStates--VkrQG:nth-child(3) > div:nth-child(1) > span:nth-child(2) { color: var(--player-control-favorite); } .container--PFTHk { background-color: var(--right-queue-background); } .container--cl4MJ { background-color: var(--search-background); } .container--cl4MJ:focus-within{ background-color: var(--search-focus-background); color: var(--search-focus-text); } .searchFieldHighlighted--Fitvs { color: var(--snow-white); } .settings-window { color: var(--sidebar-menu-playlist-text); } .settings-window__wrapper { background: var(--main-background); box-shadow: inset 0 0 2px 0 var(--main-feed-button-background); } .settings-window__close-button:hover { background: var(--main-feed-button-background); } .settings input:checked + label { border-bottom: 2px solid var(--player-control-active-button); color: var(--player-control-active-button); } .tabs::-webkit-scrollbar-thumb { background-color: #404248; box-shadow: inset 0 0 10px 2px var(--search-background); } .group { border-bottom: 1px solid #333; } .group__description p { color: var(--sidebar-menu-top-text); } .group__description .text-input { border-bottom: solid 1px #333; color: var(--sidebar-menu-top-text); } .group__description .text-input:focus { border-color: var(--player-control-active-button); color: var(--sidebar-menu-playlist-text); } .switch input:checked + .switch__slider { background-color: var(--player-control-active-button); } .switch input:checked + .switch__slider::before { background-color: var(--sidebar-menu-playlist-text); } .switch input:focus + .switch__slider { box-shadow: inset 0 0 0 1px var(--player-control-active-button); } .switch__slider { background-color: var(--search-background); } .switch__slider::before { background-color: var(--sidebar-menu-playlist-text); } .textarea { background: var(--search-background); color: var(--sidebar-menu-top-text); } .textarea:focus { border-color: var(--player-control-active-button); color: var(--sidebar-menu-playlist-text); } .about-section__version a { background-color: #404248; color: var(--player-control-active-button); } .about-section__links a { color: var(--sidebar-menu-playlist-text); background-color: var(--search-background); } .about-section__links a i { color: var(--sidebar-menu-playlist-text); } .about-section__links a:hover { background-color: var(--player-control-favorite); } .footer__note { color: var(--sidebar-menu-top-text); } .footer__button { background: #404248; color: var(--sidebar-menu-playlist-text); } .footer__button:hover { background: #55585f; } .file-drop-area { border: 1px dashed var(--sidebar-menu-top-text); } .file-drop-area.is-active { background-color: #17171a; } .file-btn { background-color: #17171a; border: 1px solid var(--sidebar-menu-top-text); } .select-input { border-bottom: solid 1px #333; color: var(--sidebar-menu-top-text); } .select-input:focus { border-color: var(--player-control-active-button); color: var(--sidebar-menu-playlist-text); } .select-input option { background-color: var(--search-background); } .select-input option:disabled { color: var(--sidebar-menu-playlist-text); } .contextMenu--a963y { background-color: var(--pop-ups); } .subMenu--xEgVU { background-color: var(--pop-ups); } .nativeRangeContainer--H2ePf { background-color: var(--pop-ups); } .nativeRange--u6L4A::-webkit-slider-runnable-track { background: linear-gradient(var(--player-volume-bar), var(--player-volume-bar)) 0 /calc(2px + (var(--val) - var(--min))/(var(--max) - var(--min))*(100% - 2px)) 100% no-repeat var(--wave-color-opacity-contrast-fill-ultra-thin); } ```

T1z3n commented 4 months ago

very Standard setup ^^´

grafik

--Sys-Info-- Operating System: EndeavourOS KDE Plasma Version: 6.0.4 KDE Frameworks Version: 6.1.0 Qt Version: 6.7.0 Kernel Version: 6.8.7-arch1-1 (64-bit) Graphics Platform: Wayland Processors: 4 × Intel® Pentium® CPU GOLD 6500Y @ 1.10GHz Memory: 7.7 GiB of RAM Graphics Processor: Mesa Intel® UHD Graphics 615 Manufacturer: Microsoft Corporation Product Name: Surface Go 3 System Version: 124I:00074T:000M:0300000D:0B:06F:6C:09P:38S:01E:0Y:0L:0

Mastermindzh commented 4 months ago

@T1z3n, looking good! I love how the little Tidal logo matches some of your system logos!

nohouse-felix commented 3 months ago

Bildschirmfoto vom 2024-05-13 19-28-50 A legitimate use case of the "Skip Artists automatically" feature.

lmsoren commented 2 months ago

billede

Fedora 40 Thank you so much!

duckyondiscord commented 1 month ago

Running beautifully on Nobara 39, thank you for this wonderful app! Screenshot_20240708_235240