Comments (22)
I've already started working on this, I should have a pr for this shortly :)
For the friendly name it doesn't show the name of all grouped speakers, just the master one. So I'm making sure to display the name of all grouped entities.
from ha-component-kit.
Agree on all your points and I'm fine with the 140 character limit, I work on a 40" wide monitor so I'm sure I'll be fine with that change to character limits haha
Didn't even realise some of the files were that long, it's generally a rule I follow, and usually something I enforce in my team at work too (guess that's what happens when you fly solo and move too quickly 😉)
As for the documentation, that's good to hear! And I've actually made the docs better again in the next release (story book args table was missing plenty of props because of typescript alias issues)
But thankyou! All very valid points!
from ha-component-kit.
Thanks for the reply and I must say, It's fun to work with someone as passionate as you!
from ha-component-kit.
Sorry, i've been working on the massive pr: #92, haven't yet reviewed your PR but will do soon, and i'll get you a mockup of tthe media player as soon as i can!
from ha-component-kit.
If you need to jump on another call to go over the issue I'm happy to help :)
Sounds good mate, I'll let you know how if I need the help from the master ;)
I'm about to start focusing on an addon for hakit, my end goal is to have templates people can purchase with drag / drop / resize
What's your thoughts on this? Do you think people would purchase templates? They'd still be highly customisable, curious to get your thoughts
I think that's a great idea, if I wasn't a freak of customizability I would definitely pay for such a beautiful UI/UX!!
from ha-component-kit.
Released under V3.0.4 - Thankyou for all your hard work :)
from ha-component-kit.
I'll take a look! If the entity doesn't have a group_members property the players won't be in sync, but I can at least provide a secondary attribute to just play it through multiple regardless if they're in sync or not?
Does your media_player have the group_members property in the attribute?
As for the artwork, that's an oversight on my behalf, I tested with streaming services but didn't think about local media, easy fix
As for the friendly name, it should already be doing this if the friendly name exists in home assistant, are you seeing otherwise?
from ha-component-kit.
I will fix the artwork url with the next release, I'm doing a massive refactor and improvements on responsive layouts at the moment to give more control to the user and to cleanup alot of repetitiveness, will wait for you to clarify the last point
from ha-component-kit.
Hey @shannonhochkins
This is very much a POC, but I'd like to get your initial thoughts on the UI/UX.
I was also thinking that maybe it would be nice to avoid the modal altogether and use chips components to select/unselect grouped speakers.
from ha-component-kit.
Hi yann, thanks for asking for feedback, and I think you're right, I think this behaviour should be quick access and easy to manipulate
What I suggest, is potentially a collapsible section within the card where you can not only enable the players, but also control volume of individual players, would you like me to mock something up for you?
Great work though, it's nice to see you're interest in the project and that you've managed to pickup what you've picked up with no guidance!
from ha-component-kit.
I would absolutely love some help with a mockup, you have great UI/UX skills ;)
from ha-component-kit.
No problems mate! I will send something over when I can, things are a bit wild over here with work and in general, but I'll try send you something tomorrow :)
How have you found working with the kit in general, any feedback? It is a bit of a learning curve for sure
from ha-component-kit.
I get it; life can be crazy at times!
You've done an outstanding job with this framework. I do have a few points of feedback for newcomers like me:
- Write smaller files: some files have over 800 lines, which makes it really hard to understand what's going on. We should split these into smaller chunks for readability.
- Code style: this is more a personal preference, but I find the 80-character limit of prettier quite hard to work with. I've been working with 140 for the past few years, and it is a life changer. It really cleans up the code by avoiding multiple lines on small blocks of code.
- Documentation: has been beneficial. It's straightforward to grasp the different components available simply by using storybook.
from ha-component-kit.
Regarding the media player ui, here's what i suggest!
- In the code, there's already a button with a class of "speaker-group", which is conditionally rendered based on the suppport of grouping
- There's an error that's thrown if a user provides the groupMembers prop but the player doesn't support grouping, remove that error, and instead the joinGroups method should be conditionally called based on the support
- Now that this button is rendering, in the onClick of this button, create a new state variable called "showGrops" or something similar
- When showGroups is true, hide the entire "Base" element, and render the VolumeControls component in the "slider" layout for every group_members property, or use the allEntitiesId
As for your idea around selecting which players should part of the group, I think by simply including a mute button for each entity is enough!
The idea here is that you can basically swap the view inside the card to control the volume / power / mute etc from within the card, i think add a simple divider between each entity and it should be okay!
If you get to a point with the functionality and you're not overly happy with the UI i can do some tidy up for you!
from ha-component-kit.
If you have time, I think it would be worthwhile for us to hop on a call and discuss these, just to make we understand each other and we're on the same page as to what we're trying to achieve.
My discord id is: king_luche
from ha-component-kit.
That's cool bro, might be easier chatting there anyways!
from ha-component-kit.
Still very rhough in terms of it fully working and being polished, but what do you think about this design?
from ha-component-kit.
That's cool bro! I know it's not something you've done, but the flicking animation is a bit odd after pressing the enable buttons! I'll have to see what has happened there because it's happening in other places too
As for the ui I think it's fine! You've done a good job 👏
from ha-component-kit.
Yeah, there are quite a few challenges to solve, one of them being that sometimes it seems the state isn't correctly propagated on state changes, but when I refresh the page, everything is fine.
Have you ever had this issue?
from ha-component-kit.
Yep! You have two options, remove internal state and just use the property on the entity which will basically cause a slight delay in the UI, or you can do an optimistic update, (set state, trigger service call, use useEffect watching the entity values, then update state from the changed values
If you want to do this without the optimistic hook, you can simply do something like
const entity = useEntity(_entity);
const [groupMembers, setGroupMembers] = useState([]);
useEffect(() => {
setGroupMembers(entity.attributes.group_members);
}, [entity.attributes.group_members]);
return <button onClick={() => {
/// logic to group members, set internal state here
}}>join</button>
Im assuming this is the issue you're facing, you do need to create a sync between the state and the entity, in some components I don't have internal state at all but rely completely on the entity values updating via websockets, this is usually fine as the updates are fairly quick and you don't notice too much latency
from ha-component-kit.
Awesome. Thanks for the detailed reply, you really are aware of all the new toys that come out, and I thought I was keeping myself up to date 😂
I'll do some more investigation this week and come out with a nice solution.
To get the state the update, do you use the redux store or get it from Hass entities usually?
from ha-component-kit.
Haha, we have to keep up. In our world 😅 the front-end world changes so quickly that it's insane!
I use zustand for the store internally, I find zustand to be the simplest manager out there, currently the store isn't really use for anything other than globally shared data
If you need to jump on another call to go over the issue I'm happy to help :)
I'm about to start focusing on an addon for hakit, my end goal is to have templates people can purchase with drag / drop / resize
What's your thoughts on this? Do you think people would purchase templates? They'd still be highly customisable, curious to get your thoughts
from ha-component-kit.
Related Issues (20)
- Entity icon only updates when refreshing the page HOT 5
- TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" HOT 17
- Problem using the dashboard in companion app HOT 28
- Modal - Animation Control HOT 1
- Discord link is expired HOT 1
- Vacuum Card - New card to control Vacuum entities HOT 1
- Prevent sidebar/group collapsing HOT 5
- POC - Swap store to signals HOT 1
- Multi lingal HOT 1
- Option to disable animations HOT 5
- Authorization request after each page refresh HOT 7
- access to HA without logging in (use token) HOT 4
- AlarmCard
- Card title and description HOT 3
- useDevice hook HOT 6
- Style rgb variables for error/warning/success HOT 4
- Deploy docs update: SSH add-on HOT 3
- Theme provider flashes HOT 1
- ThemeProvider - precompile and make more dynamic
- useTemplate
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ha-component-kit.