Web is in The Past - Native UI in C is Back

are we live or is the Page dead or something I don't know we're live okay so twitch is being twitch and stuff like that right so this this is the reason why you need react to keep the page in in sync with the actual state right this is why you need react am I right so anyway hello everyone and welcome to yet another recreational programming session with aist Ain uh let's make a little bit of an announcement and officially start the stream as usual as usual uh right so red circle live on Twitch and what are we doing today on Twitch at television website uh today we are adding uh volume control to mutualize I'm going to give the link to where we do all that uh twitch.tv/ and I'm going to Ping everyone who's interested in being pinked and there we go the stream has officially started the stream has officially started so today we continue uh developing visualizer right so which is the music visualizer that we started to develop some time ago uh I'm going to give the link to the chat right and for people who's watching on YouTube is going to be in the description as usual uh so uh let's take a look at it so I'm going to actually quickly start this entire thing um visualiz there we go uh look how fast the application has started this is unbearable this is a bad ux like look is what the is that why is it so Snappy it's getting too disar like I don't understand like it's it's difficult for me to use this kind of application it confuses me anyway I'm sorry right so just a second uh so musiz uh music and let's put some music in here I oose I'm going to just drag and drop this entire look how quickly it loaded it up this is such a bad ux this is unbearable that's impossible to use like holy dude uh right look how quickly it recomputes its layout it's disgusting I swear to God look how quickly it goes to full screen it's just like it doesn't feel good it it doesn't feel good right what the is this you your native applications are you need to use electron to slow down your application because that's better ux that is better anyway so um yeah essentially um um recently we addit uh this full screen button recently we addit this full screen button and one of the things I would also like to have in here like in a similar fashion is some sort of of like a volume control right some sort of volume control somewhere here and uh the way I want the volume control to behave is essentially I want it to be originally in this sort of like a collapsed form it's going to be similar to YouTube right you know how in YouTube it works right so it's sort of in collapsed form but when you H over that icon it expands into a slider and then you can click a slider and just drag it around and that controls the volume then you uh basically H out is is that a word that you can use like s of basically go out of the control and it collapses again uh right so I'd like to implement something like that we can even try to maybe uh draw uh right so initially we're going to have uh just a second uh some sort of a volume control right so and uh so what's going to be the icon of the volume control so it's going to be something like this right so this is going to be be something like that and you have this kind of thing so this is the volume so this is the sort of the first state when you hover over this entire thing it gets expanded it gets expanded into something like this right and then you can have something like that right uh right and then you have this sort of slider in here uh which is like some sort of a circle uh which then can drag around and when you're done it goes back to here right it goes back to here so depending on the uh sort of volume right so the current volume uh we also probably want to change the icon uh in in three different sort of stages right so uh so the no volume at all is going to be something like this then like a little bit of a volume uh is probably going to be something like this and the full volume is going to be something like this right so there's going to be three states uh and we'll need to draw icons for all of the states right and depending on the percentage in here we will just have to pick three different icons maybe for no volume at all uh this is going to be something like this right who who knows I think it's it's a pretty good idea to just indicate because maybe uh you're going to put volume somewhere here but it's still going to be playing something so it's not completely mute it's not completely zero so and because of that uh it's going to be displayed uh without this cross right so because of that I think there's going to be uh four of such icons right so the uh no volume whatsoever is just like a cross in here or something like that right so there's four stages of of this entire thing so that's basically the idea right so that's basically the idea and uh it's going to be literally the same icon of the same shape of the same size but the on the other side right on the other side side but when you have over it it's going to be extended and stuff like that right so uh yesu yesu yesu so that's the idea for today so the last time when I was trying to implement this icon it took me 2 hours so this is a more complicated um more complicated element so I expected to take roughly the same amount of um time uh just because I get a little bit better at developing these kind of uh elements these kind of elements um all right so uh let's go ahead and do that so I already closed this entire thing so let me start it and maybe put some music in here um all right so I'm going to put it like that I'm going to put it like that uh point of no return let's also put this thing like that okay so that's fine so let's keep it in here right so because we're going to be you know um working on that so I'm going to go to the plug. C uh where do we have a full screen button right so where do we have a full screen button I don't really see that where is it so full screen a full screen button okay so where do we call the full screen button so I think that's very important so we call it in two places uh and I think in both of the cases in both of the cases we'll have to all surrender the volume control the volume slider uh right so volume uh why why did you lag volume slider um right and I suppose uh I think volume slider also should accept the preview boundary the preview boundary is uh basically this rectangle and the position of the full screen button is computed based on that specific boundary right so based on that specific boundary and I have a feeling that for volume slander it also going to be like that right I think it makes sense to keep it like that as well uh right so let's go to full screen button and then in here we're going to have volume uh slider and we're going to have a rectangle which is preview boundary right so which is a preview boundary so with the prev boundary we are essentially constructing uh this entire thing so we have a full button um full screen button Sid and I have a feeling that these parameters are going to be the same for the volume right is going to be the button size and the margin the the same but from the left side right it's going to be the same but from the left side because of that I feel like maybe this has to be something like um how to say that constants right so full screen button size uh but the problem here is that I need to come up with a different prefix for this thing because this is going to be used for both volume slider and the full screen button right so maybe I'm G to call it something like hot button I think that makes a little bit more sense so and um yeah so let me go through all of these things I'm going to do full uh screen button size and I'm going to uh rename it with HUD uh button size right so H button size uh there we go and uh full screen button margin is going to be HUD uh button margin there we go so I'm going to do it like that so okay so here we have full screen button boundary we're going to use the same thing in here but we actually need to align that from the left right and to align it from the left it's actually way easier than from the right uh we just have to add the hot B margin right so we just add this entire thing after we uh created this boundary we can just go ahead and draw uh the rectangle right so we can just draw the rectangle um and we also need to pick the color right so we also need to pick the color and the color in here is the color full screen button hover over so we'll need to come up uh with a different name for all of these parameters in here uh right but before we do that I think uh we need to test this entire thing and see if it even works right so let's actually see if it even works uh all right so I'm going to hot reload and there we go we have a button on the right side now when we hover over this entire thing we'll need to expand it we'll need to expand it a little bit uh all right so let me let me see so color full screen button hover over so I think the time has come to actually rename this entire stuff right so we're going to call it HUD button background and HUD button H over right and they're the same as the track buttons right so basically synchronize the colors between these two things um right so that's totally fine and um so full screen uh timer sex uh which is seconds not what you thought uh right so we also going to call it HUD Tim SE so uh yeah I'm just thinking that I usually like prefix special thing in here but I don't prefix anything in here because it's not a color so maybe maybe sex should be first because uh here I use like measure units as the prefix but I'm not 100% sure I think it's it doesn't really matter as of right now so let's go to the compilation errors and uh just simply rename everything accordingly so this is a HUD so what's the next one HUD uh HUD I hope you can actually see everything well not hu but HUD uh yeah timer seconds for by the way so the timer is needed when you do full screen right so when you do full screen and you go into idle mode this thing disappears as you can see so that's basically like the amount of seconds after which it starts to disappear then you move around and it just like appears again and you can go back right so this is basically what's uh what's going on here uh so it's it's seconds um so what's the next thing this one is going to be HUD uh button hover over so what else do we have okay so that's fine so we're totally done with all of that so interestingly we do the timing uh okay so the timer I baked the timer inside of the full screen button uh I literally baked it inside of the uh of this thing so what I'll have to do I'll have to share this timer between full screen button and the volume control right because I want the volume control also in full screen mode uh to be available for certain amount of seconds right available for certain amount of seconds and then disappear on idle uh after one second so that that makes that makes sense um right so because of that I think the timer has to be outside this entire stuff furthermore all right so maybe we want to return Boolean in here and I think I originally returned Boolean and then I get rid of that but the problem is that if we want to move the timer outside of this component we need to be able to know uh that the button is HED over so returning Boolean just indicates whether you clicked this thing or not uh right so but we need to uh be able to know whether it's clicked or HED clicked or HED or nothing so this is quite important maybe because of that uh we want to introduce some sort of enumeration uh button uh state right some sort of a button State and we're going to call it B none right so everything's okay so nothing was clicked or nothing happened and then BS uh hover hover over right so so hover over and then BS clicked uh hover over or BS clicked and this is what we want to return in here so button State uh right and depending on what happened in there we're going to just return different things so this kind of stuff will require a little bit of refactoring um right so yeah as you can see in here we have hover over uh which is nice so and we also actually we have this kind of stuff as two booleans right we have this kind of stuff as two booleans and we indicate a click uh click uh yeah so here we go so yeah this is where we indicate a click so a Boolean uh clicked Boolean clicked and essentially we can yeah if we're going to be factoring this kind of stuff out what we have to do we have to say how over and is button released right so this is what we have what's funny is that you know what like hover over and click like if you clicked it kind of implies hover over wouldn't it be better to actually make this sort of like a beat mask well I mean if you just do uh one two it's already automatically a bat mask uh right so in essentially uh how over is going to be one and the clicked is going to be one Z so if they were HED over and clicked uh simultaneously the result is going to be one one so of speak so yeah so essentially we can actually return an integer uh and then we can indicate some sort of a state right some sort of a state which is initially zero uh and yeah so we already have hover over and clicked and at the end when we return out of this entire stuff um right when we return out of this entire stuff so here we are essentially doing something that should have been done outside right so I'm going to uh just uh remove that so here we checking whether we are in a full screen and we're not H over so this is the logic that should be handled outside of the button not inside of it not inside of it so when we uh a return here so here we don't return anything okay so in essentially essentially however over right so this is the first bit and then clicked is going to be the second bit uh right and I want to combine them together and I want to combine them together that way when you're using this function you can have something like State full screen button uh right some sort of a boundary and then you can easily check whether it's just hover over or just clicked right or or none right um so in the easiest way if you want to do that inside of sort of like a condition you can always do something like BS clicked so so it's sort of like a um beat mask so you can do it like that we just return two beats in here uh whether it's a good idea or not I'm not 100% sure but essentially what we need to do we need to return two booleans in here uh what's the easiest way to return two booleans in C it just return it as a bat mask right uh we could have maybe um just created a structure we could have created a structure so button State uh right so button state Boolean clicked and hover over we could have done it like that so but in C it is more common to use these bit masks for some reason I don't really know why to be fair uh because uh the compiler is if you just return structure I'm pretty sure the compiler just going to optimize all of that stuff anyway uh right and if you return this kind of thing button State um right so you still can use it like if full screen button full screen button preview boundary uh clicked it's even more like readable I think it's even more readable what do you guys think so what should we use like a return structure with booleans or maybe Flags or something like that um so I don't really know but it's not going to be maybe using like masks is a little bit more optimized so Flags like people say in the chat that flags are a little bit better people like beat Flags instead okay so we can we can do it like that then and this is going to be uh like this so maybe on top of that since all of that is integer I might as well just return an integer here as well uh what about beit Fields beit fields are for me at least are associated with a huge pain p in s right so so they also kind of work like I I can't understand them honestly I just like I can never understand them they so weird um right anyway so let me let me find some stuff in here so where is the full screen leaton uh yeah this is where we do all of that this is where we do with that and uh essentially we can int state right and if State uh BS clicked if State BS clicked uh we just flipflop the full screen right we just flipflop the uh the full screen uh like so and if um we are in full screen we are currently in full screen okay so and we're not hover overing right we're not hover overing we're going to do this kind of stuff um if State BS hover over like so what we have to do if the mouse was not moved if if the mouse is moved we reset the full timer then um we subtract the full timer thingy right so essentially if the fulltime uh full screen timer or maybe I I should actually start calling it hot timer if the hot timer is less or like greater than zero if it's greater than zero we're rendering all of that stuff we're rendering the volume slider we're rendering the full screen button and stuff like that and if uh the the button was clicked in here the full screen button was clicked we flipped the full screen and stuff like that uh right if the hard timer is gred this uh this thing and we're not Hing over the button uh right we're not hovering over the button but we are moving around we keep resetting the timer and if we're not we're just doing it like this we're just doing it like this uh and that should automatically uh do the thing I wanted to do right in a full screen button in here it doesn't really matter all right so I can do BS clicked if it's clicked we just do p full screen uh button right so yeah and basically the reason why it takes so much effort is because I'm separating the logic from the button right so before the logic was inside of the button so it takes a little bit of an effort to separate all of that so but it is what it is all right so some like it is needed because this kind of timer thingy has to be shared between two buttons now so you can't keep it inside of the button so it's really really necessary uh right this is really really necessary to actually uh separate all of that stuff from it uh otherwise it's not going to work exactly as expected so sometimes you need to do the work sometimes you need to do the work so that's what I'm saying essentially so this stuff this is the logic that I was trying to separate out uh all this entire stuff right and uh yeah so this one does not really matter so because it's also a logic so full screen button is actually rather interesting right so you take the mouse position uh because it's going to be used somewhere down there then you build the boundary for your button you figure out whether it's h over situation and whether it's clicked and whether it's clicked it always depends on H over right so because if it's not H over and when you release the button it's not going to be registered as a click uh right so in the color is also dependent uh depends on whether we in H overstate or not uh right then we do the rendering and then we just return the the current state right so we just com um basically compose both of the bits right we compose both of the bits and there we go here is the state and that's what we have in here right so this is just like the button State oh we can try to compile this entire thing and see uh like what is going on here so semicolon we forgot the semicolon nothing particularly special so the high timer I actually put it somewhere here I didn't think it's a good idea so let's actually put it somewhere here uh all right so full screen timer so this is a hard timer now uh this is not that all right uhuh what's the next one what's the next one okay okay okay okay so we're going to try to uh restart everything then I'm going to go to full screen uh and it doesn't go away doesn't go away because I'm hovering over it I'm going to uh go away and it disappears and both of them disappear notice and I start moving around and it doesn't go back and this is because uh this kind of stuff needs to be checked uh outside right so this kind of stuff needs to be checked outside I believe uh right something like this so essentially if you move your mouse if you move the mouse we always reset the H timer we always reset it to the beginning uh so this could be even compressed further right so and make it even more compact right so we have a full screen buttton if it was clicked we swap around full screen or not uh and if it's not HED we keep decreasing the hard timer uh to the point when it becomes equal to Zer or less and because of that it's not going to be shown it's not going to be shown so as you can see the the all logic here in front of us and it's not that complicated uh it's not based on some sort of like idea of signals times out or anything like that it's just like it's literally like a single float that keeps track of the seconds and every frame we just subtract it and it's a very simple straightforward logic like you can see the entirety of the logic in front of you in the form of 11 lines right it's just like this is the entirety of the thing uh that's what I like about the Simplicity of software right so there we go okay so it seems to be working it's pretty cool it's pretty cool so we factored out that logic out of the uh out of the thing right okay so uh that is very very POG in my in my opinion so we kind of need to do a similar thing now right so we probably want to maybe return uh something that indicates that something was hovered over um but with the slider it's a little bit more complicated so I'm not 100% sure how exactly we're going to approach that but we'll see we'll see so I'm not going to return anything yet we'll see we'll see uh so um now we may try to detect whether we have over this entire stuff or not do we have our over this en stuff or not that's a good question uh if we do all right if we do H over that specific button we need to expand it which means that we need to have some sort of a state we need to track the state of whether we are expanded or not expanded and this is very interesting right so maybe we we should introduce some sort of a uh Boolean which answerers whether it's expanded or not right so this is going to be initially expanded if we uh H over um this thing we expand it right so it automatically becomes expanded um so if Hing over and by the way this is very interesting situation if we are expanded it's it's a completely different boundary now that's the thing if it's expanded it's a completely different boundary so essentially uh what we have to do is uh maybe reconsider it right so maybe we should literally update the boundary before trying to render it uh so let me try to do it like that so if H over we have expanded uh full screen uh it's not a full screen button boundary it's a volume uh volume button um volume slider I would say volume slider boundary uh uhhuh volume slider boundary uh volume slider boundary we can just take width and maybe multiply it by five right just multiply it by five so that's an interesting so it's going to be five icons in a row uh just five icons in a row uh and uh yeah so and maybe because of that we don't really have to m yeah this one is interesting because we still need to keep track of that we still need to keep track of that so if expanded if expanded only then we have to multiply it right so and then we check it like that all right that's very interesting uh because in the expanded State you just H over a larger area but it's still should be detected as H and over this thing um and interestingly when you not have run over when not you just do expanded uh false which is essentially just doing expanded hover over but with a little bit of a lag with a little bit of a lag you know what I mean so expand it sort of like the hover over state from the previous frame um but anyway so this should already work this uh theoretically should already work and let's actually see how it's going to work exactly uh all right so let's actually put it somewhere here so this is the thing that we need to have uh and um so full screen it's a slider volume slider volume slider boundary there we go uh so what do we have in here I'm going to refresh it and now when I H over it it expands and it keeps expanding while I'm inside of it and I H out and it uh collapses right it's a simple logic actually right so no call back signals or anything like you can see like I'm literally spelling out that logic in here expanding animation we can add expanding animation right uh so but first we need to implement the logic itself right so that guides this entire thing uh right so I would also like to have animation for this thing uh right but I'll think about it so it's going to be sort of licker to do uh right so this is what we have and it's kind of cool that it stays until you just go out until you just go out interestingly [Music] um uh interestingly can we just get rid of the expanded I think we can't really get rid of the expanded uh we can't really get rid of the expanded so we have to but I can get rid of the hover over I think right so I can just say expanded equals right and because of that maybe I have to make it an integer because in the future probably going to be uh you know working with all that uh so okay that's pretty cool the next thing we need to do is we need to render the slider within uh the entire area right we need to render the slider within this entire area and how we're going to do that we're going to say if expanded if expanded let's render some sort of a slider right so let's render some sort of a slider and we need to have the boundary for that specific slider um right so so we can provide but the question is how should we do that how should we do that so we had uh hard button size so we know that width is that I would like to actually say explicitly that we taking like a five of the hard button size so then I can do something like CIT cital uh uh rectangle uh rectangle so let's do X in terms of X it is going to be basically volume slider boundary X but Plus a single H button size right a single one uh in terms of Y it's going to be the same as the slider boundary y width is going to be actually four of these things right because the whole thing is five one icon takes one slot takes the icon so for the slider we have only four right for the slider we have only four and for the height right so for the height we have uh one button size so this is what we want to um render in here and if it's not expanded we never render that specific slider right we never render that specific slider so let's go ahead and just maybe create this function uh let's create this function and it's going to accept uh boundary right so this is the boundary it's not returning anything but it's in the future it's probably going to return something uh and what we can do we can draw a rectangle I suppose rect right so we're going to just literally draw the boundary and let's uh render it as red so it's obvious what is going on in there right so it's instantly obvious so HUD button size it doesn't like that because it's supposed to be comma okay sure we can make it comma if that's you think uh right so and boom yeah as you can see so we do have a boundary in here so this red thing is its own separate component right it is its own separate component so we can start trying to do something in there right so let's actually try to do some stuff in there first of all let's maybe make it uh kind of like white right so let's make it white uh and of course uh because that's going to be probably the color that we're going to use in here uh yeah so it became White and uh maybe what we want to do actually we want to draw a line from left to right right we want to draw a line line from left to right so and what's interesting is that this is specifically a horizontal slider right so maybe we should call it horse uh like horse slider uh so where is it horse slider because everything is going to be oriented horizontally I I don't know if we're going to have vertical sliders maybe we will for some sort of like equalizer or stuff like that uh right but we'll get to that a little bit later so draw line XC I think that's the function we need uh so let me go to tags so yeah it does have thickness right so we can thick it just like your mom and uh we can specify the start point the end point and in terms of the thickness I think the thickness could be like a half of the boundary maybe half of the boundary and let's actually make the color white all right so what's going to be the start position uh start position so it's going to be boundary in terms of X right so in terms of X is going to be of course the boundary X right so it's going to be that but in terms of Y uh we can say it's going to be the boundary y plus the boundary height like half of the boundary height so we're trying to do that like Center this entire thing right so you see how easy it is to Center things in pury right how easy it is to to Center things in CSS can you tell me got you got you oh oh oh anyway so what's going to be the height uh well there's no hide in here so this is just like a start and end position simply start and end position and here this is just a boundary uh width so that should be more than enough so we can just do it like that so we can just do it like that is it going to work uh width so this is end position so what's next okay so this is width uh cool boom all right so this is like a half of the of the width of this entire stuff so I think we need to make it a little bit thinner uh what if we take like a 25 of this stuff right so 25 of this stuff okay so that looks good maybe even like um 15 what about 15 uh I think 15 is actually perfect right so there go so there's some sort of line in here so I think maybe five icons is not enough uh what about like maybe seven and this one becomes six so because of that I think there should be some sort of a parameter in here right so slots right so expanded expanded slots uh expanded slots so here we can do expanded slots minus one expanded slots minus one right so that way we can make it a little bit uh longer right so forgot some G of course so that's a thing that may happen so that's a little bit better so it's a little bit longer now we can control this entire thing right so now we can control this entire thing uh so that's pretty cool so maybe hard button a hard button size let me find hard button size so it's right now 50 what about 60 I think it needs to be a little bigger so what about making it a bit a tiny bit bigger boom so they are bigger now so it looks yeah that's that's much better that's much better so I think the ends of this thing should be a little bit to the right so you see how this particular thing sticks to the right I really don't like how it sticks to the right it doesn't really look good in my opinion right it should be if we divide it by the cells this thing should be half of the cell it should be at the center of the cell somewhere here and this one is you know correspondingly also somewhere at the center of the cell so we can use the size of the cell as basically the boundary height of the slider right so we can essentially take the boundary height half of the boundary height and add it to the start and subtract it from the end and that way it will kind of align it properly more or less so there we go so look at that look at that isn't that AOG isn't that a so the next thing we want to do probably is uh draw a circle right so um let's go ahead and draw a circle um so what kind of parameters do we have in here so we have a center radius and stuff like that so can do we have other so extended for instance do we have extended what other circles do we have uh draw Circle I think it's Circle V emex yeah it's Circle V there we go so center radius uh and there we go so that's cool so what's going to be the radius uh we can just say that the radius is going to be half of the half of the height right because it's a radius uh right so it's going to be fourth and this one is going to be white we might as well just factor out color right so this is going to be color uh White so this is the color this is the color there we go and what's going to be the center well let's take this thing let's take this thing so this is the center this is the center in terms of X it's the start position X Plus so let's put it somewhere like in the middle all right so let's put it in the middle so that means we need to take end position xus start position x uh right and multiply it by half so this is going to be literally the center in terms of Y we can just pick this thing and uh we are basically good to go I think we're basically good to go so let's go ahead and take a look at this entire thing so I mean come on so isn't it cool come on come on come on come on it's cool it's freaking cool all of that is native seam no electron no JavaScript no react like look how easy it is I'm not even restarting the application not even restarting the application and if you telling me that after that you do need electron skill ISU dab dab dab there's literally nothing you can say now to convince me otherwise skill isue anyways so what do we have in here so maybe I would like to make that thing a little bit thinner so what about like 10 uh what about like 10 about 10 and yeah that's a little better um so this entire thing does not really automatically highlight as we hover over this entire stuff maybe it should actually maybe it should we'll see we'll see look at the how is that a freaking Circle rayan this is not a circle okay it's like a hexagon or it's like how many what the um so let me see there there's some Circle lines there there was a version of the draw Circle that accepts the segments or something like that uh right so we probably want to do do that MH um okay so interesting like usually slider is supposed to modify the thing right so it's supposed to modify some sort of a value right so we can accept that value as a parameter in here and uh by the way that value I suppose should be from0 to one right we can kind of expect that value to be from 0 to one uh and because of that we can just put it in here right so this is going to be that uh and if I try to recompile this entire thing so we can have some sort of a value uh WR static float value so which is initially going to be zero uh and in here we're going to just provide the pointer to that value and it's going to be modifying that uh so it's definitely should be provided as a parameter in here like it's definitely but since we explicitly say that this is a volume slider this is a volume slider maybe after modifying horse slider right if it got modified so maybe we're going to have some sort of a state in here and like State uh slider state right so modified modified right so so um and what we'll have to do right so we can just do set music volume set music volume and volume is supposed to be uh from 0 to one right if I'm not mistaken uh right if I'm not it's it's from 0 to one I suppose and we just set that value something like this so State modified um this is not how we do that so you just call uh call it like that so we can just allocate it within uh this particular scope not on the stack in the in the global data section right but yeah uh but we are not really there yet we're not really there yet because we need to detect whether we are currently dragging this entire thing or not right so we need to we need to know whether we're currently dragging this thing or not uh so I'm already streaming for almost an hour and I ran out of my water I was actually drinking water not tea so but I really need tea to continue so I propose to make a small break I propose to make a small break and so I can make a cou of tea and after the small break we're going to continue slapping the co so yeah is that poish I think that's pretty freaking I really like how it's just like it's pretty easy so we can uh even expand this entire thing right so this seems to be working uh and uh then if I go that so it just disappears yo that's so cool all right uh so um all right so uh let's continue development this sh uh so what we need to do I forgot what I wanted to do actually kind of uh I think I need to detect that I'm hovering over this thing and then start dragging this around so I think that's what I need to do that's what they need to do so let's go ahead and do that I suppose so horse slider where is my horse slider so we have so I'm pretty sure there was some sort of function check Collision uh right check Collision Circle point right is this something like that check Collision point maybe Point Point Circle look at that so you provide the point you provide the center you provide the radius blah blah blah so here we can replace this entire thing with the radius and this is going to be a radius boom boom boom boom boom I want you in my room so this is going to be Mouse uh center radius uh center radius and that's how we know that we Hing over this thing this is how we know that we Hing over it so we can even say h over uh okay and and now if um we so we need to keep track of the current state of the slider we need to get keep track of the state of the slider whether we are dragging or not so we already keep track of the value of the slider so I think we need to uh accept something like dragging right so because depending on the dragon we're going to be handling that slightly differently right if dragging uh we're going to do one thing otherwise we're going to do the other thing so let's actually start with not dragging if you have her over if you H over and uh is mous pressed uh Mouse button pressed um Mouse button um yeah let's let's say pressed specifically Mouse button left we are going into drag mode so and of course we probably want to dreference this entire thing right otherwise it's not going to work that well so if we are in dragging mode right if we are in dragging mode and um the mouse button was released the mouse button was released uh we are no longer no longer in Dragon mode so this has become false while we are in a dragon mode what we want to do what we want to do we want to um essentially track the position of the X of the mouse right so let's take X position of the mouse right and we want to kind of clamp it between start position and end position of the slider right so essentially if x is less than start position uh X is going to be start uh position X is that simple as that it is simple as that if x is greater than end position than end position it becomes equal to end position like so so we're clamping this entire thing we're clamping them all right so after that we want to subtract the start position so it actually becomes from zero to the whole width of the thing and then we can divide this entire stuff by the width of the whole thing and that way X becomes a value from 0 to one which we can assign to Value right so essentially we just like take the mouse position clamp it then upset it then normalize it and that's the value of x that we need that's the value of x that we need that simple hopefully all right so I think that is basically it that is basically it um interestingly we don't really need hover over anywhere else but maybe in the future we'll need it for the rendering purposes so I'm not going to remove this thing yet so let's go to the uh compilation errors this is not what I wanted you didn't see anything I was programming in Java in the in the break ignore that ignore that uh anyways so let's do no uh all right so here so we didn't have a mouse right so let's actually do something like vector 2 uh Vector 2 Mouse get mouse position get mouse POS what else do we have horse horse slider so we have a value right so we have a value uh so let's introduce something like dragging dragging of false uh a boom a boom so this one is dragging yo mother flipper yo I think well I think we got it I think we actually got it so let me refresh the en think easy peasy lemon squeezy so don't we already automatically set the volume of the thing I think we do so yeah that's that's so pogers I can just slide this around look at that I can just slide this around slide this around easy uh interestingly interestingly so we keep track of the value but does it have to be a global thing the value has to be synchronized with the like actual Master value um if we take a look at the r Li if we take a look at the r Li so somewhere r. H so set music volume right so we setting specifically Music volume but maybe what we want to do we want to set the master volume volume set master volume right set master volume listener specifically so let me uh let me see did I just close Mutual God damn it like what's the point of implementing hot reloading if I keep closing this thing bra bra come on that is not acceptable in this day and age so it doesn't really as you can see it doesn't work right so it doesn't do anything I swear to go N is a genius right so if you want if you want to like uh find more about like this kind of music from the same author like check out the the song command uh right and all all of the links are going to be in description on YouTube as well all right uh all right so uh let me let me see so what we going to do we already set uh music volume to 05 what we probably need to do right I think we need to set master volume to have add the initialization so we do plug init and way here we is Set uh set master volume to half uh we just set it to H then in R set master volume okay can we get master you rayan really I'm I'm disappointed why can't you okay so there is a m device Set uh master volume but there's is there something like my device get master volume uh so my device get there is get master volume um why I suppose it was not really that important so get volume there's literally no get master volume I'm disappointed I'm disappoint literally unusable literally unusable uh set master volume so essentially what I wanted to do like I literally ex expanded rip right I literally expanded ra and now uh what I should be able to do is is um get master volume right so horse slider um so this is going to be volume get master volume right we get in master volume then we modifying it and then we set master volume to uh to this whatever we got in here and we get rid of this entire thing so this is why I like to use the radi right I just demonstrated you I literally took the source code of rad and I just expanded did it like a and let's try to rebuild it and see if it works or you can read the source code you can modified it's almost like it's your cord well I mean I'm not claiming the ownership of the Cod what I'm saying is that it's almost like a template that that you can copy paste to your project and then modify and adapt to your needs and people suggesting send a blue request I think this is something that we should probably do uh right so yeah and as you can see it started to rebuild the thing uh right so let's actually should go and fix the compilation errors uh all right so what else do we have in here so we now have modified version of R right um probably they expect you to track volume yourself maybe but maybe it's just like was not uh a concern at the time maybe not that many people use even that functionality uh right so but yeah I just modified r i just extended it literally and it is as easy as that right it is as easy as that and uh I copy paste it I I basically have a copy of the source code of R inside of my reer right so if I do any modifications they're going to be just there uh right and I can even ship my software with a modified version of R so in my opinion these kind of uh third party def dependes are ideal the problem with third partyy dependencies quite often is that you rarely have control over them right but here if you copy the third party dependences on like as part of your project you have full control over it and you can modify it and do like your own thing uh right so and of course it would be kind of nice if the array just had that functionality right so anything we can um make a pool request on that at some point but let's actually see if whatever we have already works right um uh and it crashed did it just crash I think it's just crre oh yeah because okay because I modified rip and the previous version of rip was in the memory loaded right so that's why it SEC faulted when it tried to reload it when they triy to help reload so it doesn't really work like that okay so you can't modify the dependency that's dangerous yeah because smarter people than you those dependen don't even try to be as smart as them right the classical argument do you think you're smarter than the developers of the depend how dare you just like you you trying to understand how react Works what the you're not supposed to understand how this thing what the are you do holy literally an average react developer I swear to God who we have old school Russian software developers holy how old are you how old are you brother it's like 41 okay so yeah because that's roughly how I see it's such an old Russian software development mean holy I forgot about it and you just reminded me about it it's like a meme from a different world what the yo yo all right so um I keep it alive teaching nice nice doing God's job uh all right all right all right so uh does it work okay so this is half right so this is half and we can just like listen to this thing oh [Music] so okay we noticed um a little bit of the ux problem so when you go outside it disappears so we need to keep track uh we need to keep track whether this thing is currently dragon or not so and if it's currently Dragon we should stay in the expanded state right so there's a little bit more logic involved in here uh a little bit more logic involed in here okay um okay we need the animation of the bar expanding okay I I'll add to do for that right so it it would be nice to have some sort of animation and it's not even that difficult to add I think all right so it's essentially just keeping track of the uh of the state of the animation within the volume slider right so it's going to be just another static variable in here right just another static variable in here so something like static float um expanding uh and it's going to be a simple interpolator from 0 to one a simple interpolator from 0 to one and yeah is just like you have an access to Delta time in here get frame time and you just expand it and you use that to render the bar and you can animate it quite nicely you can even add a little bit of easing uh to that but I don't think uh we can do it right now um all right so um but let me actually do it like this uh so uh we need to know whether we well I mean we already know whether we're dragging or not so that's the thing that's the thing so where do we update expanding okay so when you are uh inside of the boundaries so how can we do all of that if expanded if expanded if we are currently expanded uh and and not dragging not dragging this becomes true right this becomes the thing so we expand it not dragging so expansion depends on whether we are inside of the boundary or not so otherwise otherwise this thing always depends on that stuff can I compress that logic somehow uh probably can but my brain cannot just right away do that mhm and of course we can compress these two things who said we can't uh cuz why not MH so if expanded volume sign the boundary width is going to be a bit bigger right so we're just expanding this entire stuff um and then if we are not dragging whether it's expanded or not will [Music] depend dragon or um collusion yeah maybe maybe that maybe that so let's actually go back so that's a good idea actually uh expanded uh dragging or check Collision it's not bad uh but probably want to do it like this right so we first want to check for the expansion before we start using expanding I think that makes sense M so and then okay all righty okay h uhhuh all right uh yeah was not a good idea um I just remembered why I organized my code like that thank you just remembered uh all right and yep that's cool it's pretty cool and if I go outside it's totally fine and yep cool uh all righty so I suppose what we need to do we need to make a pull request so let's actually see how easy it is to make a pull request to to radi up maybe uh we already have uh that function in there maybe we already have that function in there them ah okay so I'm taking the latest version so this is the master version this is the master version can I close this from GitHub I literally don't don't care it doesn't even work that well to be fair in my opinion so um get master volume uh set so you can set the master volume but you can't really get the master volume okay so let's go ahead and try to uh you know maybe Fork that I'm not going to say anything and uh so let's just Fork it create a new Fork so this how we Fork this days uh I think I want to Fork work it into soing simple easy to use library to enjoy all right GitHub Coke pilot piloting the coke uh so where I want to actually put this entire thing so Fork let's put it here and can I do I have to clone the entire thing if I want to push things can I push into a shallow clone does anybody remember right clone um depth one and let's see if it's going to to work why aren't you using the GF CLI you sound like this react deps like you must use V you must use what is that there is git listen listen Git Version Control System right git and there is a website that hosts git so to use the git hosting you you use git that's it simple as that it's just like simple as that there's nothing to discuss um okay so if I was using SVN hosting I would be using SVN I'm using G hosting I'm using G easy all right uh so let me let me see so what we have in here can I simply copy paste I think if I copy paste uh the previous versions uh they're going to be they're going to overwrite too much because I'm pretty sure they added a lot of things already right so they edit a lot of things so this is our audio uh and the ray Li all right uh so what is that so this is Fork rip and this is my relip uh Ray Li uh so I'm going to just copy paste let's replace is this entire thing and R audio where is R audio I'm going to Qui paste it and replace it okay so let's take a look at what we got let's take a look at the diffs and it must be huge I'm going to predict that they okay so yeah because I'm using the released version and this is literally Master right so because of that it's just like it's not particularly great idea to do it like that um right and obviously yeah yeah that's not that's not great so let's not do that I suppose let's not do that so let's do a slightly different thing uh array lib um uh and put it in here so Set uh master volume right so set master volume uh and here we can do get master volume void get master volume listener there we go uh and then we can go to R audio get master uh set master volume Set uh set master volume uh get master volume get float uh we may put this thing in here and then maybe we can initialize that doesn't really matter um get and then we simply return the volume uh volume it's as simple as that is there any way for us to check how this entire thing we we can simply try to just use build maybe I can just do make file um do we have make file in here okay so there's no make files in here but there is a make file inside of here so I can try to do that all right so let's see God damn how do you do stuff fast like that uh what exactly what you talking about navigating uh is just contrl F or or what so what I was doing is I was using crl f contrl c contrl v so that's the only things I was using um so I don't know what you're talking about I wasn't even using any special features of text editors [Music] I know what you're talking about I don't know what you're talking about um so is there any contributing rules right so before contributing so here's the thing here's the thing um um I react very harshly when people tell me what to do in my projects and rightfully so because these are my projects I do whatever the I want with my project don't tell me what to do on the contrary I believe if you come to somebody's else project you should respect uh their rules you should respect what they do in their project because who the are you to tell them what to do because of that before contributing let's read contribution rules let's respect the place this is very important uh right so there's some sort of conventions um I don't care right hello contributors welcome to rip uh do you enjoy rip and want to contribute nice you can help with f in points C programming documentation testing rip philosophy rip is is a tool to enjoy video games programming every function in rip is designed as a mini tutorial on itself R is simple and easy to use try to keep it compact with a small set of functions if a function is too complex better not include it I think our function is very simple so yeah I think it's fine R is open source and free Educators and institutions can use this tool to teach video games video games programming complet free all right so um uh C code conventions despite being written in C does not follow the standard hanger anotations for C I disagree that it is standard in the Microsoft mind maybe it is but I mean like Microsoft programmers there's such a minority among C programmers like I wouldn't say such a strong word as a standard right it's a Microsoft thing it's not tell that to Unix developers and run away uh anyway so opening a new issue open okay so sending P request so this is what we're interested in make sure that PR description clearly describes the problem and solution include the relevant issue number if applicable don't send big pool requests okay so uh that checks out our pool request is very small lots of change lists they are difficult to review it's better to send small request one at a time I agree with that like I also don't like to read big pool requests uh if you need to make a big like if you want to implement a big feature first make sure that the initial developer wants that big feature in their project because they're going to be supporting it after you done with it right first of all make sure that they actually want that big feature and once you agreed upon that big feature it it's better to actually develop it incrementally sending small incremental pool requests that are easy to review not a huge one that nobody's going to review right so that's that's very important uh verify that changes don't break the build at least on Windows platform um so I I checked it on Linux so maybe that's fine as many platforms where you can test it the better but don't worry if you can cannot test all the platforms I guess that's it if that's the contribution rules I think we can try to I accidentally clicked this thing I didn't mean to click it so whatever so there's no that many sort of like rules on how to name the branches or anything like that so I think I can just like go ahead and simply uh add uh this thing so let's create a branch called get master volume uh right so get master volume uh so if we take a look at the history all right if we take a look at the history so there's a must oh shoot uh so I didn't have the full history unfortunately so let's take I want to take a look at the history and the convention and stuff like that so you see they're marking things with this brackets so core uh and some other stuff so our audio do they did they do that yeah I think uh there is R text yeah so they basically marking the uh the module uh where they implement this syta thing okay so let's go ahead and do that uh R AIO Implement get master volume um it feels uh a little unfinished when you can set master volume but can't really get it so so to close the Symmetry here is the get master volume implementation uh right is this how we spell symmetry I think this is how we spell symmetry so it feels a little un A little unfinished when you can set master but can't really get it so to close the Symmetry to maybe to finish the Symmetry to finish the Symmetry uh here is the get master volume implementation right so let's just try to push that into the origin oh to complete okay so uh luckily so what was that so I pushed it in here uh let's try to amend that to complete right so I'm going to do Force push I'm Force pushing into my own Fork so that's fine uh all right so I'm pushing a force pushing into my own Fork so don't worry about it reject it okay it's too late so there's probably some some sort of rule set for the for this thing to not be able to to push this uh thing anywhere so whatever uh compare and P Quest so Implement get master volume uh by the way uh I I think I need to check uh has anybody actually discussed get master volume because maybe there was some disc oh my God this is so slow holy okay nobody ever discussed that so that's fine uh it feels a little unfinished when okay so let's just create a pquest there go so let's let's wait for the continuous integration well I mean yeah these days the author of The Reaper has to approve the continuous integration you guys know why you guys know why the the author must first approve uh The Continuous itation before before you can do that so it was some time ago uh but yeah yeah Bitcoin mining it's insane like the fact that nobody's thought about it like it's so unexpected right so so whoever came up with this idea that forced GitHub to implement this feature is a freaking genius right whoever first came up with that it's genius so essentially uh through a PO request you can modify the do GitHub files right so you can modify the do GitHub files in here so the yaml things uh workflows and stuff like that and whatever you put in there is going to be automatically executed on the instances of the CI so what people started to do some Bitcoin miners they started to inject like mining code in there and started to just randomly submit pool request and M ton of Bitcoins like holy so they basically hijacked the entire like infrastructure of Microsoft of GitHub specifically to just mine Bitcoins it was insane right so and this is basically what they had to do it's so so funny actually it is actually genius like I I can respect the hustle like seriously it's so cool it is bad right and it should not be allowed but at least we can respect the like the creativity of the people who came up with this how did you get discard must be not the genius well when you start doing that at scale it becomes kind of OB so yeah um Wrong by respectable yeah exactly oh look at that 34 34 is that PO is that poke I think it's pretty freaking poke holy so let's make sure that everything's fine in here right everything seems to be fine uh yes and basically yeah so we've got that so here's the interesting thing I could try to commit I could try to commit um this thing and my own R implementation but here's the thing according to the license of radi and you need to respect the license you need to respect the license if the license says that uh you can do whatever you want with the code but you always must include the uh name of the original author you should follow that and you should not create a separate Reaper uh with uh my code and strip off my name you should not do that because that's against the license and uh yeah the license is very important so and here one of the close of the license uh altered source code versions must be plainly marked as such and must not be misrepresented as being the original software right so because uh this thing is not really merged yet uh this thing is not really merged yet and uh and I'm going to commit that that means I have a modified version of rad uh so what I probably need to do I think what's fair to do in this regard is to at least Mark that this contains modification that that and that right so here I have a rme uh which actually explains what is going on here so here's the original R 4.5 so it's called downloaded from here stripped of uh everything except license and SRC no other modifications were applied so far right so uh this is the modification that I've done and I plainly stated so right so I plainly stated what exactly I did to the source code so what I think I need to now do I need to say that uh I also have thiso request applied right I also have this request applied so applied uh patches applied patches like this so I think that's fair right so I think that's fair applied patches so because this is the uh release source code right this is the release source code uh and I basically uh I submitted this patch to the master but for myself I kind of back ported it to to the release 4.5 right I think the next release of rip is not there yet right it's not there yet but as soon as it as it will be there I think I'm going to just replace it in the same way as I did with four 4.5 right so yeah so it's it's still 4.5 so I think this is how we're going to go with all of that uh so let me let me see what we need to do I think I can right away just uh commit whatever I already have on here M Implement volume slider without without icons right so that's what we have so it's a volume slider without any icons uh do we have any time to implement the icons uh we probably could we could probably could Implement um you know the icons but I need to make a small break for that um do I have time nah I think I already don't have time to do that so I'm going to do the icons already off screen I already do icons S screen uh so the result of today's stream is actually quite quite cool I think uh right so we have that so there's no volume and I can control this kind of thing so that's pretty cool so that works in a full screen as well uh right now these things are connected so let's actually make it a little bit lower uh so all these things are connected so and uh the idle thing also is applicable okay so that's really cool all right so uh I guess that's it for today thanks everyone who's watching me right now I really appreciate that have a good one and I see you all on the next Recreation programming session withen I love you all

Channel: Tsoding Daily

Views: 49,779

Keywords:

Id: oyyV59dCyrA

Length: 86min 51sec (5211 seconds)

Published: Sat Dec 09 2023