TL;DR: Avatar and nickname can now be changed, Extension now on Firefox, Performance improvements, bugfixes, etc.
Since the start of 2019, we’ve been working hard on developing new features and improving the styling of twoseven.xyz. While some of these features will go unnoticed by the end-user, they are nonetheless important technical milestones. We will list out all of the updates, describe why they were important and if applicable, how they will impact you, the user.
Avatar and nickname can now be modified!
If you’ve read some of our older posts, you’ll already know that we coded TwoSeven as a means to watch content with loved ones and friends. Therefore, we assumed that people knew each other’s email addresses and were OK with sharing them; even if said email accounts were created in middle school and as embarassing as [email protected] (my current email account). Boy, were we wrong! Recently, due to some changes made to Rabb.it, we had a large number of users try out TwoSeven and got a lot of complaints, some about how they didn’t like their avatar, a lot about how they detested having their email username as their nickname.
You voiced your opinions and made a compelling case. We listened and put in the work necessary to enable you to change your nicknames and avatars 🙂.
TwoSeven extension now available on Firefox
The TwoSeven extension has been successfully deployed on Chrome since 2016. We attempted to publish the extension on Firefox as well, but our application was constantly rejected. Their feedback, particularly Rob Wu‘s was extremely useful to us since we’d never written a WebExtension before, but it also felt like we were constantly chasing a moving target that was always just beyond our reach. An example of this was when we were rejected with one comment stating
This, when we used commands like
wget https://cdnjs.cloudflare.com/ajax/libs/jquery/2.x.x/jquery.min.js to get the libraries we wanted 😐. Nevertheless, I’m pleased to say that two years later, Mozilla seems to have gotten rid of their human reviewers thus enabling us to get our extension approved! 🥳🎉.
Much to our dismay, it turns out that the WebExtensions API is not yet a standard. As a result, we had to tweak several complex parts of the extension to make it work on both, Chrome and Firefox. The fact that Firefox will not allow passing objects via Events between the extension (content script) and the website was a particularly frustrating pain point. Instead,
CustomEvent objects had to be modified to send across data as strings rather than objects, and we use a lot of events. Somehow, encoding the exact same information as a string is deemed safe whereas sending it as an object is considered a security risk.
As a consequence of all this, you may find yourself running into an occasional bug. Please do report these if possible so that we can fix them for you as well as others.
One such bug that we are aware of (and suffer from) is the fact that the login window will not close automatically while logging into the extension on Firefox. However, if you simply hit the ESC key on your keyboard, the window will close instantly and you will be logged in. We’ve reported this bug and we’re waiting on a solution.
Ability to change audio/video inputs
Among the exodus of people from rabb.it, a group of videocasters reached out to us requesting the ability to change webcam inputs. They stated that this capability would enable them to use TwoSeven as part of their videocasts. I’m guessing they would use TwoSeven to synchronize video playback among the multiple participants in the videocast. Initially, we had some reservations about this, since Operating Systems (OS), specifically Windows, works by allowing users to set the default input and output as part of the OS and then providing applications access to these defaults. But as I thought about it more, I realized that such a capability would be necessary on smartphones to allow users to switch between their front and rear cameras. That settled it. We were going to figure out how to allow users to switch their audio/video streams and implement it.
In this update, once you provide the webcam and microphone permissions, a settings icon will appear on your webcam video. Clicking this will bring up a modal where you will be able to change your audio and video inputs. In a later update, we plan to also include the ability to change your output. This should allow you to use a bluetooth speaker or a TV as your speakers.
Migrated to Vue CLI 3
Moving to Vue CLI 3 also gave us a few other benefits as well:
- Promise of easy upgrade unlike vue-cli2 -> vue-cli3
- Ability to inject new plugins without setting up project from scratch
- End-to-end Cypress-based testing
- A production build targeted at modern browsers (
Upgraded materialize-css to v1.0.0
materialize-css, our CSS framework had also matured a great deal during this time. We were on v0.100.2 for over two years while they began working on their first major release. The biggest change with this realease is the removal of the jquery dependency. This motivated us to get rid of our jquery dependency and a few other dependencies as well. Specifically, we replaced almost all our icons/fonts with material-design-icons and it’s companion vue-material-design-icons. This meant getting rid of FontAwesome and Typicons, which when combined with all the other dependencies we eliminated, led to an overall reduction of ~270KB, which is pretty significant.