![\"\"](\"http:\/\/precog.iiitd.edu.in\/blog\/wp-content\/uploads\/2018\/08\/daksh_vlc_logo-300x300.png\"){kind=logo}
<\/p>\n<\/p>\n
Earlier this summer I got selected in Google Summer of Code<\/a> to work with VideoLAN<\/a> on the Project VLC macOS Interface Redesign<\/a>. It has been a blessing to get a chance to work on one of the highest impact open source projects. I had a phenomenal experience. Let’s have a look at my contributions \ud83d\ude42<\/p>\n You can have a look at my <\/span>GSoC Project Page<\/span><\/a>\u00a0and <\/span>Proposal<\/span><\/a><\/p>\n Feel free <\/span>to jump right to the <\/b><\/span>code<\/b><\/span><\/a><\/p>\n Left to Right: Vibhoothi, Daksh(Me), Jean-Baptiste, Felix, David<\/p>\n Let’s start by looking at our workflow at VLC. VLC has a GitHub Repository<\/a>\u00a0which is read-only.\u00a0 <\/span>We use our mailing list\u00a0to send Patches<\/a>. We also have a GitLab instance at https:\/\/code.videolan.org\/<\/a>.<\/p>\n For my GSoC project, my mentors created a clone of upstream at the beginning of our coding period. It helped to keep things organized and eased the process of reviewing. You can find the repository we worked on during the summer at https:\/\/code.videolan.org\/GSoC2018\/macOS\/vlc<\/a><\/p>\n We have an <\/span>Issues Page<\/span><\/a>\u00a0on GitLab. We used this to divide the whole work into subcategories. Further, I have made <\/span>different branches<\/span><\/a>\u00a0and <\/span>various commits<\/span><\/a>.<\/span><\/p>\n I was lucky to be able to meet with my Mentors along with Jean-Baptiste for a couple of days. VideoLAN was very kind to sponsor me to come and meet our mentors in Europe. I would like to thank them from the bottom of my heart.<\/p>\n During our meeting, we discussed various design aspects of several Media Players and how do we envision the new VLC design to be. We also clearly divided the parts that were to be done by each one of us (Me and Vibhoothi). This helped kickstart the work and proved to be extremely useful and increased the productivity exponentially \ud83d\ude00<\/p>\n It shows promising performance, hence in future – To extend it and have the actual panel as a View instead of Window<\/i><\/b>.<\/p>\n It is a pop-up which helps you to jump to any particular time. To access it, you can do any of the following:<\/p>\n Window’s title bar (and its close \/ minimize \/ maximize icons) automatically appears if the mouse is moved over the window, and disappear again if the mouse pointer hides or leaves the window.<\/p>\n The draggablePanel was earlier a window. Having the draggablePanel as a window was creating a problem. When the video window was moved, in order to keep it at its place we had to programmatically move the panel in the same way. But a drag and a delay was coming in that.<\/p>\n So we decided to make it as a view instead of a window. After testing, it seems to have solved the problem \ud83d\ude00<\/p>\n Currently, the buttons are non-functional. Discussion on how the classes and their instances need to be done, after which it can be implemented.<\/p>\n git diff –color-words<\/span><\/p><\/blockquote>\n To see the changes in words instead of sentences<\/p>\n git checkout commitHash<\/span><\/p><\/blockquote>\n To temporarily switch to a branch at that particular commit, helps in testing<\/p>\n git stash<\/span>\u00a0and\u00a0git stash apply<\/span><\/p><\/blockquote>\n To undo\/redo the uncommitted changes<\/p>\n git diff HEAD~2<\/span><\/p><\/blockquote>\n To see the changes done since HEAD~2 (two commit before HEAD). Refer to this post<\/a>\u00a0for more options<\/p>\n git branch<\/span>\u00a0and git checkout branch-name<\/span><\/p><\/blockquote>\n To list and change to a particular branch<\/p>\n Earlier this summer I got selected in Google Summer of Code to work with VideoLAN on the Project VLC macOS Interface Redesign. It has been a blessing to get a chance to work on one of the highest impact open source projects. I had a phenomenal experience. Let’s have a look at my contributions \ud83d\ude42 You can have a look at my GSoC Project Page\u00a0and Proposal Feel free to jump right to the code Our Team Jean-Baptiste Kempf\u00a0(President of VideoLAN) Felix Paul K\u00fchne\u00a0(Mentor) David Fuhrmann\u00a0(Mentor Vibhoothi\u00a0(Student at Amrita University) Daksh Shah\u00a0(Me, Student at IIITD) Left to Right: Vibhoothi, Daksh(Me), Jean-Baptiste, Felix, David Workflow Let’s start by looking at our workflow at VLC. VLC has a GitHub Repository\u00a0which is read-only.\u00a0 We use our mailing list\u00a0to send Patches. We also have a GitLab instance at https:\/\/code.videolan.org\/. For my GSoC project, my mentors created a clone of upstream at the beginning of our coding period. It helped to keep things organized and eased the process of reviewing. You can find the repository we worked on during the summer at https:\/\/code.videolan.org\/GSoC2018\/macOS\/vlc We have an Issues Page\u00a0on GitLab. We used this to divide the whole work into subcategories. Further, I have made different branches\u00a0and various commits. Face-To-Face with the team I was lucky to be able to meet with my Mentors along with Jean-Baptiste for a couple of days. VideoLAN was very kind to sponsor me to come and meet our mentors in Europe. I would like to thank them from the bottom of my heart. During our meeting, we discussed various design aspects of several Media Players and how do we envision the new VLC design to be. We also clearly divided the parts that were to be done by each one of us (Me and Vibhoothi). This helped kickstart the work and proved to be extremely useful and increased the productivity exponentially \ud83d\ude00 My Work Goals Add a feature enhancement to Go-to-time popup\u00a0(more details): Ready to be merged Draggable Panel instead of ControlBar in windowed video\u00a0 window\u00a0To bring the draggable-control-panel (currently only in Fullscreen more) inside the normal Video playing windows and test with multiple Video Windows\u00a0(more details): Done and tested Title Bar Autohiding\u00a0(more details): Almost done Make the draggable-control-panel as a View instead of a separate window. For now, just test with a plain view and see how it performs with an underlying video being played\u00a0(more details): Done It shows promising performance, hence in future – To extend it and have the actual panel as a View instead of Window. Work in-depth along with code 1. Go\/Jump to Time popup (branch: is9-goToTime) It is a pop-up which helps you to jump to any particular time. To access it, you can do any of the following: Press \u2318+J Go to Playback -> Jump to Time Double Click on Time-Elapsed or Time-Remaining (in the ControlBar) Visual Difference Features Now you can add time in the hh:mm:ss format Allows you to write bigger numbers, example: You can write 80 in seconds, and it will automatically convert that to 00:01:20 You can switch between fields with tab You can use the stepper to change the fields Related Code Branch Merge Request Issue-9 How it is inside IB(Interface Builder), Xcode A sneak peek at constraints AutoLayout is a bit tricky at times. David taught me how to set the constraints in a way, that even when the language of the text changes, it still looks the way it should. It also takes care of languages that are written from right to left 2. Draggable Panel instead of ControlBar in windowed video\u00a0 window (Issue 1) Removed the fixed ControlBar and replaced it with a movable draggable panel. Just like the fullscreen controller On resizing or moving the window, the draggable panel re-centers along with the window. There is a bit of a delay+drag as the panel is a window and not a view The draggablePanel is constrained in the bounds of the window. 3. Title Bar Autohiding (Issue 3) Window’s title bar (and its close \/ minimize \/ maximize icons) automatically appears if the mouse is moved over the window, and disappear again if the mouse pointer hides or leaves the window. Implementation of Issue 1 and 3 (branch: PanelInMultipleVout) Code for Making the titleBar seamless Code for draggable panel 4. Draggable Panel as a View The draggablePanel was earlier a window. Having the draggablePanel as a window was creating a problem. When the video window was moved, in order to keep it at its place we had to programmatically move the panel in the same way. But a drag and a delay was coming in that. So we decided to make it as a view instead of a window. After testing, it seems to have solved the problem \ud83d\ude00 It remains at its position even when the window is moved Added the panel as a custom NSView Created two new Classes `VLCDraggablePanelView` and `VLCDraggablePanelController` to handle the operations of the Panel Connected all the components with the related class files TO-DO Currently, the buttons are non-functional. Discussion on how the classes and their instances need to be done, after which it can be implemented. Things I learnt How to work on a huge code base Objective C Xcode Interface Builder AutoLayout Cocoa Framework Git There were numerous small and big things I learnt in Git and how to version code. Here are a few tips that you can make use of \ud83d\ude42 git diff –color-words To see the changes in words instead of sentences git checkout commitHash To temporarily switch to a branch at that particular commit, helps in testing git stash\u00a0and\u00a0git stash apply To undo\/redo the uncommitted changes git diff HEAD~2 To see the changes done since HEAD~2 (two commit before HEAD). Refer to this post\u00a0for more options git branch\u00a0and git checkout branch-name To list and change to a particular branch Useful Links GSoC 2018: Blog by Vibhoothi GSoC 2017: VLC for macOS interface redesign by ePirat<\/p>\n","protected":false},"author":61,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[2,3],"tags":[],"class_list":["post-2495","post","type-post","status-publish","format-standard","hentry","category-experiences","category-students"],"_links":{"self":[{"href":"https:\/\/precog.iiit.ac.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/precog.iiit.ac.in\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/precog.iiit.ac.in\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/precog.iiit.ac.in\/blog\/index.php?rest_route=\/wp\/v2\/users\/61"}],"replies":[{"embeddable":true,"href":"https:\/\/precog.iiit.ac.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2495"}],"version-history":[{"count":26,"href":"https:\/\/precog.iiit.ac.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2495\/revisions"}],"predecessor-version":[{"id":2557,"href":"https:\/\/precog.iiit.ac.in\/blog\/index.php?rest_route=\/wp\/v2\/posts\/2495\/revisions\/2557"}],"wp:attachment":[{"href":"https:\/\/precog.iiit.ac.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/precog.iiit.ac.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/precog.iiit.ac.in\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Our Team<\/h2>\n
\n
![\"\"](\"http:\/\/precog.iiitd.edu.in\/blog\/wp-content\/uploads\/2018\/08\/daksh_team-1024x768.jpg\")
<\/p>\nWorkflow<\/h2>\n
Face-To-Face with the team<\/h2>\n
My Work Goals<\/h1>\n
\n
Work in-depth along with code<\/h1>\n
<\/a>1. Go\/Jump to Time popup (branch: is9-goToTime<\/a>)<\/h2>\n
\n
Visual Difference<\/h3>\n
![\"\"](\"http:\/\/precog.iiitd.edu.in\/blog\/wp-content\/uploads\/2018\/08\/daksh_gtt_Before_After.png\")
<\/p>\nFeatures<\/h3>\n
\n
Related Code<\/h3>\n
\n
How it is inside IB(Interface Builder), Xcode<\/h3>\n
![\"\"](\"http:\/\/precog.iiitd.edu.in\/blog\/wp-content\/uploads\/2018\/08\/daksh_goToTime_ib-1024x719.png\")
<\/p>\nA sneak peek at constraints<\/h3>\n
![\"\"](\"http:\/\/precog.iiitd.edu.in\/blog\/wp-content\/uploads\/2018\/08\/daksh_goToTime_constraints.png\")
AutoLayout is a bit tricky at times. David taught me how to set the constraints in a way, that even when the language of the text changes, it still looks the way it should. It also takes care of languages that are written from right to left<\/p>\n<\/a>2. Draggable Panel instead of ControlBar in windowed video\u00a0 <\/span>window (Issue 1<\/a>)<\/h2>\n
\n
Issue 3<\/a>)<\/h2>\n
Implementation of Issue 1 and 3 (<\/span>branch: PanelInMultipleVout<\/a>)<\/span>
![\"\"](\"http:\/\/precog.iiitd.edu.in\/blog\/wp-content\/uploads\/2018\/08\/daksh_is3and1_reduced.png\")
<\/h2>\n\n
4. <\/a>Draggable Panel as a View<\/h2>\n
![\"\"](\"http:\/\/precog.iiitd.edu.in\/blog\/wp-content\/uploads\/2018\/08\/daksh_draggablePanel_under_development-1024x492.png\")
<\/p>\n\n
![\"\"](\"http:\/\/precog.iiitd.edu.in\/blog\/wp-content\/uploads\/2018\/08\/daksh_dpasview-1024x611.png\")
<\/p>\n\n
TO-DO<\/h3>\n
Things I learnt<\/h1>\n
\n
\n
Useful Links<\/h2>\n
\n