For the second part of release 0.3 I was asked to continue my progression with an external project. Having worked with FreeTube for my last two PR’s of Hacktoberfest working with them felt like an obvious choice. I won’t have to spend time installing or learning a new system, and since PR’s can only be merged by one member of FreeTube I have some social credit building up from my previous contributions.
My last PR for Hacktoberfest was having the title of the application be the title of the video instead of the generic “Watch – Freetube” title it had. This issue works with the title as well so I felt like it would be a good PR for me to take on. After getting the ok to use a plugin I found made for the underlying video player I was assigned the issue and started to try and get the plugin to work.
I was having a hard time getting the plugin to work so I decided to look for some more examples then the one in the plugins documentation. I cam across this issue that someone else was having in a different application that extended videojs. In that issue the overlay people suggested that they call the overlay in the players .ready() function. Hey, I’ve worked with .ready() before in FreeTube, this might work! After a little more time I was finally able to produce an overlay.
this.player.ready(function () {
v.player.overlay({
overlays: [{
showBackground: false,
content: title,
start: 'mousemove',
end: 'userinactive'
}]
})
})
There was one slight issue though, for some reason it would only work on videos that were shot in widescreen. Otherwise the overlay was an underlay since it decided to stay in the background. I found this issue that seemed to be very similar to what was happening with me. The solution to that issue was to include the plugins .css file. I tried to include it and nothing happened. I tired to manipulate the css but none of the changes would apply to the text. After some more searching I found that I should include the overlay class tag in the video players containing div. I did that and it worked, sort of…
The video overlay was now working as interned, but I was still unable to manipulate the css. After trying three different locations for the css I decided, on the advise of a member, to create a draft PR and asked for help. After doing so PrestonN, the member who can merge, was pretty quick to respond. He gave me a couple of revisions to make as well as told me what my problem was. I was using the wrong css file. After putting it in the correct css file I was able to change my PR from a draft to ready for review. I got the LGTM message from Preston and I was good to go.
I have already asked about a potential solution for another one of their issues. I have had great interactions with the community and feel like I am learning a lot . There was a lot of time staring at the screen thinking “I almost got this”. I need to get better at learning when to walk away from something and work on something else for a bit. Had I reached out and asked the community for help earlier I could have saved myself a lot of stress and time. Lessons learned.
Tim's Blog for DPS 909 