My GSoC experience with VLC (macOS Interface Redesign)

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 ūüôā

You can have a look at my GSoC Project Page and Proposal

Feel free to jump right to the code

Our Team

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¬†which is read-only.¬† We use our mailing list¬†to 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 on GitLab. We used this to divide the whole work into subcategories. Further, I have made different branches and 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 ūüėÄ

My Work Goals

  1. Add a feature enhancement to Go-to-time popup (more details): Ready to be merged
  2. Draggable Panel instead of ControlBar in windowed video  window To bring the draggable-control-panel (currently only in Fullscreen more) inside the normal Video playing windows and test with multiple Video Windows (more details): Done and tested
  3. Title Bar Autohiding (more details): Almost done
  4. 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 (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 ‚Ćė+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

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  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)

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 ūüėÄ

  • 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 ūüôā

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 and git 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 for more options

git branch and git checkout branch-name

To list and change to a particular branch

Useful Links

Ideas, Projects, Methodology, Results, Blogs, and Videos. Privacy and Security in Online Social Media.

I taught CSE648: Privacy and Security in Online Social Media in Fall 2017 semester. We had 108 students taking the course for credits, and 5 Teaching Assistants. We also had 2 Research Associates helping with the course. There were in total 22 projects developed as part of the course. It was wonderful to see the projects spanning all popular networks, Facebook, Twitter, Reddit, Tinder, Foursquare, YouTube and many networks that are designed for specific purposes like Twitch, SoundCloud, GoodReads. The intention for this blog is to capture all the projects related details and share it widely for larger audience. Thanks to all the wonderful work by students in the class.

Poster presentation was attended by at least 100 people. Below is the customary picture of the entire class with all Students, Teaching Assistants, and Evaluators from the poster presentation and for more pictures, please see here. Below is the list of all 22 projects (arranged in the alphabetical order of project name) with the following details: Project name | Students involved | Project description | Video | Picture taken from the poster presentation. All blogs, videos were developed by the students, we (instructor, TAs) do not take any responsibility for the content produced (both quality and the details).

  1. Buyout | Mayank, Pulkit, Divay, Sahil, Kunal Sharma | Blog | Video
  2. Enhancing Privacy on FB | Ujjwal Kanodia, Prashant Saini, Prankul Singh, Himanshu Negi | Blog | Video
  3. FixBook | Gargi Gupta, Varnit Jain, Aayushi Malik, Ishbir Walia, Pahal Krishnia | Blog | Video
  4.  FriendFarmer | Gurek Singh, Hemant Rattey, Atul Mathur, Kartik Mathur | Blog | Video
  5.  Identifying Facebook profiles from Tinder profiles | Karan Grover, Ritvik Agarwal, Shrey Bagroy, Simran saxena, Shambhavi Singh, Shubham Chauhan | Blog | Video
  6.  Identifying fake reviews on goodreads | Prateek Kumar Yadav, Ojasvi Aggarwal, Prerna Kalla | Blog | Video
  7.  iFROOSN | Sahil Babbar, Akash Kumar Gautam, Mayank Kumar, Shyam Agrawal | Blog | Video
  8.  LetsTinder | Darvesh Punia, Hirak Chandravanshi, Aditya Diundi, Nandika, Vasu Chand | Blog | Video
  9.  PC : Privacy Control | Himanshu Pahadia, Nitin Kumar, Utsav Dave, Bhrigu Gupta, Mohammad Sameer Malik, Shivam Rustogi | Blog | Video
  10.  Prediction and Analysis on Foursquare | Azhar Tak, Sumeet Bhardwaj, Aman Varma, Nickey Kumar, Sanidhya Daeeyya | Blog | Video
  11.  Preventing Inference Attacks on OSN | Anand Kumar, Akash Gautam, Vedaint , Gaurav Yadav | Blog | Video
  12.  Preventing Molestation using Twitter | Ronak Kumar, Harsh, Ritaban Basu, Mohd Saquib, Mayur Vilas Shingote | Blog | Video
  13.  Project YouTube | Abhishek Baliyan, Rahul Manchanda, Utkarsh Singh, Vikas Godara, Vivek Negi | Blog | Video
  14.  Racism on reddit | Ashutosh, Abhishek, Shreya, Aarushi, Shivani | Blog | Video
  15.  RainCheck for SoundCloud | Akshat Sharda, Anisha Sejwal, Arushi Kumar, Ishita Verma, Prachi Singh, Rishi Mohan | Blog | Video
  16.  Safe Than Sorry | Shiven Mian, Madhav Varma, Parikshit Diwan, Mridul Gupta | Blog | Video
  17.  Social Bot Detection in Twitch | Mayank Bhoria, Tushita Rathore, Akhil Goel, Sarthika Dhawan, Shreyash Arya | Blog | Video
  18. Social Policing: Analyzing Real World Policing on Social Media | Aravinda Kumaran, Sanchit Sinha, Subramanyam Dantu, Suril Mehta, Mohit Agarwal, Tanmay Goyal | Blog | Video
  19.  SteemEarn | Nitin Yadav, Umesh Umesh, Rishabh Khatri, Ashutosh Kumar | Blog | Video 1 | Video 2
  20.  The Blue Whale Challenge: A Social Analysis | Shaan Chopra, Abhinav Khattar, Karan Dabas, Kshitij Gupta | Blog | Video
  21.  TweetyLeaks | Pranav Nambiar, Prashant, Sourav, Tanishq, Vanshit, Siddharth | Blog | Video
  22.  Youtube video Clickbait Detection | Nikhil M Prasanna, Anshul Anil Gaur, Ojasvi Singh Randhawa, Aditya Dwivedi, Avadh Yadav, Nishant Yadav | Blog | Video

All blog entries can be seen here and videos are part of the YouTube channel

Thanks to the students who gave feedback for the course, I received 4.1 or more on 5 for all parameters of evaluation. Parameters of evaluation were, Course Outcomes, Course Organization, Course Administration and Instruction, and Post conditions.

Stay tuned for updates from the edition that I am teaching this Fall 2018 at IIITH!