Blog

[GSoC’18] Pitivi’s UI Polishing – Final Report

As part of Google Summer of Code 2018, I worked on the project Pitivi: UI Polishing. This is my final report to showcase the work that I have done during the program.

Work Done

I worked on the issue #1302 to integrate Pitivi’s welcome dialog box into its main window and display projects in a more informative, discoverable, and user friendly layout. This is how Pitivi greeted users before I started working on the issue:

Screenshot from 2018-08-11 13-59-26

My first task was to remove the welcome dialog from Pitivi and integrate a simple greeter perspective that displays the name of recent projects in a listbox with all the relevant buttons placed in the headerbar. This was a big task and took nearly 5 weeks to complete. The main challenge of this task was to understand the big codebase of main window and refactor it. The refactoration lead to the following architectural changes:

pitivi_architecture (2)

In the the new architecture, I have developed a perspective based system which allows easily adding more perspectives to Pitivi. Every class has single responsibility in the new architecture as opposed to everything being managed by main window in the previous architecture.

!33 is the merge request for this change and 330d62a4 is the committed code. This is how the greeter perspective looked like after this change:

pitivi_greeter_ad

I also did some code clean up to conclude my greeter perspective’s integration:

  • Remove unused “ignore_saved_changes” param from newBlankProject() function in project class – b2f19ea3
  • Make newly added shortcuts available when users upgrade Pitivi – 8b3a691a
  • Move dialog for locating missing asset to dialogs package – c08007a8
  • Remove directly called callback methods – 7a8d23ba
  • Remove project title functionality because we only care about project file name – 4ea9d89f

My next task was to display meta info regarding a project such as its directory and last updated timestamp in the greeter perspective. !43 is the merge request for this change and ff672460 is the committed code. This is how the greeter perspective looked like after this change:

aaa

My next task was to show a welcome message on greeter perspective when there are no recent projects. !44 is the merge request for this change and d9c8f6c8 is the committed code. This is how the empty (no recent projects) greeter screen looks like:

empty_greeter

Finally, I added the following to greeter perspective:

  1. “Search” feature for easy browsing of recent projects, and
  2. “Selection” feature for removing project(s) from recent projects list.

!46 is the merge request for search feature and c72ebce7 is the committed code. !48 is the merge request for selection feature and 809d7599 is the committed code.

search
Search feature
remove
Selection feature

After resolving issue #1302, I worked on the issue #1462 to integrate project thumbnails in greeter perspective. The main idea behind these thumbnails is to give the user a hint what a certain project is about. The main challange of this task was to come up with a simple and robust algorithm for thumbnail generation (link). More details about our project thumbnail generation approach can be found here.

!51 is the merge request for this change and a6511c1e is the committed code.

I also made the following optimizations to project thumbnails (!54):

  • Use assets thumbnails if no thumbnails are present in XDG cache – cb47d926
  • While opening greeter perspective, defer loading of project thumbnails until the main thread is idle – 37c973e1

So this is how the greeter perspective looks finally after all these changes:

Screenshot from 2018-07-21 00-29-40

After wrapping integration of project thumbnails, I added the following features to greeter perspective:

  • Right click on a recent project to select it and start selection mode – !67 is the merge request and 6db06472 is the committed code
  • Drag & drop a project file from Nautilus onto greeter to open it – !68 is the merge request and 817d885a is the committed  code

Next, I worked on the issue #1816 to allow video viewer resizing.

The first task was to integrate a marker on the bottom left corner of the viewer container to allow for easy resizing of the viewer. !60 is the merge request for this change and 25609f3a is the committed code.

resize1
Viewer resizing using corner marker

Work in Progress…

Two more tasks are left under issue #1816:

  1. Displaying resize status (in %) over slightly dimmed video, and
  2. Snapping of viewer to 100% and 50% if the current resize status is between [100%, 100% + Δ ] and [50%, 50% + Δ ] respectively.

I have submitted a merge request !70 for review for both these tasks.

resize2
Displaying resize status over dimmed video

Final Words

I would like to thank my mentor Alexandru Băluț (aleb) for his help and guidance throughout this project. I would also like to thank all other members of GNOME community who helped me along the way. This turned out to be an amazing summer for me with lots of learning and fun. I will continue to contribute to Pitivi as I feel like this is just the beginning of many exciting things yet to be done in Pitivi to make it the best video editing application.

Until next time 🙂

Advertisements

[GSoC 2018] Welcome Window Integration in Pitivi – Conclusion

In my last post (link), I talked about integrating “Search” and “Remove” feature in Pitivi’s welcome window. Search feature allowed for easy browsing of recent projects and remove feature allowed removing project(s) from recent projects list.

In this post, I want to introduce “Project Thumbnails”. I have successfully integrated project thumbnails in recent projects list. This is the last task under issue 1302.

The main idea behind thumbnails is to give the user a hint what a certain project is about. This can be seen as information in addition to project name and uri which helps to identify the desired project faster and more easily.

Screenshot from 2018-07-20 23-01-52
Project thumbnails integrated in recent projects list

We display our project thumbnails in a dark grayish container of size 96×54 (16:9). We preserve the aspect ratio of our project thumbnails while displaying them in the container, for example, aspect ratio of thumbnail of project “demo3” in the above screenshot is 21:9 while projects “demo7” and “demo1” have 16:9 aspect ratio thumbnails. If a project has no thumbnail, such as an empty project, we show “video-x-generic” theme icon as project thumbnail, for example, project “demo4” in the above screenshot.

We create a thumbnail for a project if and only if:

  • the project doesn’t have a thumbnail, or
  • user imported/deleted asset(s) while working on the project.

Our project thumbnail generation approach is as follows:

  1. We go through all the assets in the project and fetch their thumbnails from the XDG cache.
  2. Out of all the fetched thumbnails, we pick the one with maximum file size as our project thumbnail (Why?).
  3. If we are not able to get any thumbnail from the XDG cache, we pick the preview thumbnail of the first asset that has a thumbnail cache** as our project thumbnail.

** This is the cache maintained by Pitivi for the assets imported in a project. This is different from XDG cache. XDG cache is a system wide cache for thumbnails.

So, finally after 10 weeks, I conclude the issue 1302. To give a brief idea of what I did in these 10 weeks, this is how welcome dialog in Pitivi looked 10 weeks back…

Pitivi's Current Welcome Dialog

And this is how it looks now…

Screenshot from 2018-07-21 00-29-40

I would also like to express my gratitude to my mentor Alexandru Băluț (aleb) for helping and guiding me throughout these 10 weeks.

Next, I will be working on the issue 1816. My aim is to complete it in the next 2 weeks.

I will keep posting my progress on this blog. Until next time.

Stay tuned 🙂

[GSoC 2018] Welcome Window Integration in Pitivi – Part 4

In my last post (link), I talked about:

  1. Changing the layout of recent projects items to display meta info regarding a project such as its directory and last updated timestamp, and
  2. Displaying greeter message when there are no recent projects.

In this post, I want to introduce the two new features that I have added to the new welcome window in Pitivi:

  1. “Search” feature for easy browsing of recent projects (box marked as “1” in the screenshot below), and
  2. “Remove” feature to allow removing project(s) from recent projects list (box marked as “2” in the screenshot below).

sear

“Search” feature…

Search feature is meant to allow users to easily browse throught recent projects list to quickly get to the project they want to work on. This feature can be pretty handy if there are lots of recent projects.

I have implemented it using Gtk.SearchEntry and it is focussed by default to allow users to quickly search for a project as soon as the welcome window appears.

Screenshot from 2018-07-14 23-53-19
Recent projects found for search query “demo1”
Screenshot from 2018-07-14 23-55-01
No recent project found for search query “demo12”

“Remove” feature…

Remove feature is meant to remove unwanted/unused project(s) from recent projects list. The removed project(s) are not deleted from the disk. One use case for this feature can be to unclutter the recent projects list after we have finished working on a project and we no longer need it.

Screenshot from 2018-07-15 00-06-45
Remove project(s) screen
Screenshot from 2018-07-15 00-09-02
Selected “demo4” project for removal
Screenshot from 2018-07-15 00-10-18
“demo4” project removed from recent projects list

The next and the last task under “Welcome Window Integration in Pitivi” as per my GSoC project is to integrate project thumbnails in recent projects list. I am currently working on this task and hope to finish it by next week.

I will keep posting my progress on this blog. Until next time.

Stay tuned 🙂

[GSoC 2018] Welcome Window Integration in Pitivi – Part 3

In my last post (link), I talked about Pitivi finally getting a Welcome window. In this window, the layout of the recent projects list was pretty basic – we were only showing the name of the projects.

pitivi_greeter_ad
Welcome window – “Recent Projects” list is only showing name of projects

The next two tasks on my ToDo list were –

  1. Displaying meta info regarding a project, such as its directory and last updated timestamp, and
  2. Greeter message on Welcome window when there are no recent projects.

I have successfully completed these two tasks. The layout of recent projects list now shows project name, project uri, and project’s last updation timestamp.

greeter_new
New layout of recent projects list

Note: If the project is inside user’s home directory, we replace the home directory path with (tilde).  Also, the “Updated” info might not be accurate everytime as it is not displaying project’s last updation timestamp in very specific manner (like 30 mins ago, 2 days ago, etc.) but in a vague manner (like Just now, Yesterday, etc.). The idea is to present this info in a nice human readable format and not care much about the accuracy of the timestamp as it doesn’t matter too much for a video editing app. Also, there are other GNOME apps like Builder who display updation timestamp in exact same manner.

This is how the empty (no recent projects) greeter screen looks like –

empty_greeter

For now we have kept this screen very simple as it is more like a one time welcome screen and we don’t want to put a lot of effort into it as we have other important tasks at hand. Almost all the time users will be dealing with the screen displaying recent projects.

The next two tasks on my ToDo list are:

  1. Adding search functionality for easy browsing of projects.
  2. Allowing removing items from “Recent Projects” list.

I will keep posting my progress on this blog. Until next time.

Stay tuned 🙂

[GSoC 2018] Welcome Window Integration in Pitivi – Part 2

In my last post (link), I gave an overview of Welcome window integration in Pitivi. I started working on this task from the first coding day of Google Summer of Code 2018, i.e. May 14, 2018 and after one amazing month of coding it finally got merged (commit) on June 19, 2018. Apparently it was a large change consisting of 702 additions and 329 deletions (link) involving 75 code-review discussions and 29 versions. A special thanks to my mentor aleb for giving constructive reviews on my code.

So, finally Pitivi has a Welcome Window!!! and this is how it looks like:

pitivi_greeter_al
Welcome window – Adwaita light theme
pitivi_greeter_ad
Welcome window – Adwaita dark theme

There are two major changes in the Editor window:

1. We have added a “Close Project” button in the header bar of Editor window that closes the current project and opens Welcome window.

editor-headerbar
“Close Project” button (highlighted in right)

2. We have removed “New Project” and “Open Project” options from the menu because these options are already provided in the Welcome window’s headerbar and it can get confusing for the user to have these in multiple places.

In the coming weeks, I will do more additions to the Welcome window such as:

1. Custom project view – displaying meta info regarding a project, such as its directory and last accessed timestamp.

custom_view
Initial design of custom project view

2. Greeter message on Welcome window when user opens Pitivi for the first time or when there are no recent projects.

3. Integrating project thumbnail into project’s custom view.

4. Adding search functionality for easy browsing of projects.

5. Allowing removing items from “Recent Projects” list.

I believe there are more exciting things to come in the upcoming weeks. I will keep posting my progress on this blog. Until next time.

Stay tuned 🙂

[GSoC 2018] Welcome Window Integration in Pitivi – Part 1

I will be working on Pitivi as my Google Summer of Code 2018 project under GNOME. One of the major task in my project is to integrate the current Welcome dialog box of Pitivi into it’s main window and display projects in a more informative, discoverable, and user friendly layout.

Currently when Pitivi starts, a Welcome dialog appears that displays the recent projects and some buttons for creating a new project, browsing projects, etc. This dialog box needs to be integrated into the main window.

Pitivi's Current Welcome Dialog
Pitivi’s current welcome dialog

Some GNOME apps that already have their Welcome screen integrated into their main window are Builder, Boxes, Notes, ToDo, etc.

builder
Integrated welcome window in GNOME Builder app
ToDo
Integrated welcome window in GNOME ToDo app

The integration of Welcome dialog into Pitivi’s main window will provide us with more space that will be used for –

  • displaying relevant meta information regarding a project like its directory, last access timestamp, thumbnail, etc. in a nice custom layout rather than just displaying the title of the project (which we currently do in Pitivi’s Welcome dialog)
  • displaying projects categorically as “Starred” and “Recent”
  • providing a search interface to allow for easy browsing of projects
  • better positioning of the buttons based on their actions. Rather than stacking all
    the buttons vertically (which we currently do in Pitivi’s Welcome dialog), we will
    place Important buttons like  “New Project”, “Open Project”, etc. in the Header Bar, and Other buttons like “Help”, “Keyboard Shortcuts”, etc. inside a menu in the Header Bar

As of now, I have integrated the welcome dialog into Pitivi’s main window. Now, we have two main screens in Pitivi – Greeter Perspective (the welcome screen) and Editor Perspective (the video editing screen). The main window manages these perspectives and handles the switch between them.

pitivi_new_1
Integrated welcome/greeter window in Pitivi. Notice that the important action buttons like “New” and “Open” are shown prominently in the header bar.
pitivi_new_2
Integrated welcome/greeter window in Pitivi. Notice that other (not so important) action buttons like “Keyboard Shortcuts”, “User Manual”, etc. are shown inside a menu in the header bar.

Currently, I have a merge request pending for this change !33. I will keep posting my progress on this blog and on the issue 1302. Until next time.

Stay tuned 🙂

How I got selected in GSoC 2018?

In my previous post, I shared my GNOME (Pitivi) journey so far. In that post, I have mentioned all the issues that I resolved while contributing to Pitivi.

I was actively involved in Pitivi from mid Jan to mid March and became highly familiar with its code base. In this time, I contributed to Pitivi by resolving 5 issues and reporting 2 bugs. My in-depth understanding of Pitivi’s code base prepared me to take up some challenging tasks that I could work on in the upcoming summer under GSoC with considerable speed and accuracy. Apart from Pitivi, I also made contributions to GES (Pitivi’s back-end) which made me fairly familiar with its code base too. I closed 2 bugs in GES.

Google started accepting GSoC proposals from students this year from March 12th and kept March 28th as the deadline.

I went through the ideas listed on GNOME’s GSoC 2018 ideas page (link) and after going briefly through all the listed ideas for Pitivi, I selected “UI Polishing” idea. The main focus of this idea is to enhance user experience by improving the UI of Pitivi by completing these two main tasks:

  1. Integrating the Welcome dialog box into Pitivi’s main window and displaying projects in a more informative, discoverable, and user friendly layout.
  2. Allowing easy resizing of the video previewer.

I told aleb that I want to work on this project and he gave me the green signal to go ahead and start writing a proposal. After a week of writing a draft proposal and another week of making modifications after addressing comments from aleb and thiblahute, I finally had my proposal ready by March 27th and I submitted it on GSoC website. You can checkout my final proposal here.

The accepted proposals were announced on April 23rd and I got mail from GSoC confirming my proposal acceptance. Pitivi even announced this from their twitter account –

I am really excited after getting accepted into GSoC this year. I am eagerly looking forward to work on this project and do amazing things over the summer.

STAY TUNED for the further updates on my project 🙂