* fix(large-video): trigger update after timeout for 1-on-1 calls

Currently no video switch happens if a user joins audio and video
muted. For example, User A is in a call and User B joins with no
mic and camera. User A will keep seeing local video on large video.
The fix is to set a timeout, of a somewhat arbitrary 3 seconds, to
show User B on large video.

* SQUASH: wrap videoElement access in if

* SQUASH: split out remoteVideoActive logic

* fix(vertical-filmstrip): different label animations for filmstrip states

Instead of one timing for sliding the video status label left and right,
have different timings depending on the filmstrip state. To facilitate
triggering the different animations, add more classes to the labels
that need to move that specify the filmstrip state.

- Faster transition if focusing on self-view with videos present so
  the label does not overlap videos transitioning from 0 opacity.
- Transition delay when de-focusing on self-view with videos present
  so videos have time to go away before the label moves over them.
- Maintain no movement if there are no videos, regardless of
  filmstrip toggle state.
- Different delays for when the filmstrip is being toggled visible
  and hidden if there are remote videos visible.

* SQUASH: remove remote videos count

* SQUASH: add docs to scss

The video status labels, which include recording and hd status,
have been moved back to the top left while in vertical filmstrip
mode. The following had to be done:
- Remove styling to move the labels to the bottom left
- For VideoStatusLabel, move filmstrip remote video count, toggle
  state, and 1:1 state into redux.
- Use middleware to emit out to the Recording label when the
  filmstrip changes.
- Create an empty Filmstrip file for web and identify the existing
  Filmstrip component as native.

- Expose an api on Filmstrip to hide the remote videos container, which does so
  by adding a class
- Modify listeners for user join, leave, share video to call the api
- Hide the container when there is 1 or fewer remote participants
- Always show the container if self view is in focus
- Show the container if the number of remote thumbnails does not match the count
  of remote participants, such as the case of sharing a video

- Add a class to the body when in vertical filmstrip mode
- Override styles as necessary to support the mode
- Add an option to make tooltips display from the left
- Move the HD Label to the bottom left
- Move the remote video menu to the bottom left, move the mute
  icons to the bottom right
- Scale the local video's height and width to fit the filmstrip

The 1:1 call UI and vertical filmstrip act on remote videos
while leaving local video alone. To facilitate acting only on
remote videos, place remote videos into their own container element.

In its current implementation, the VideoStatusLabel shows HD based on peer
connection stats. These stats will be available on temasys browsers soon but
will remain unavailable on Firefox, which does not collect height/width stats.
To support VideoStatusLabel showing cross-browser, move the high-definition
detection out of stat sniffing and instead check the video element itself using
an interval in LargeVideoManager. (An interval was used because the temasys
video object does not support the onresize event.) Also, add a cleanup path from
conference.web to LargeVideoManager to remove the interval.

During the implementation of starting as video muted, a check
was put in place to update the local thumbnail view container's
known local track only if the track was not muted. This can
cause the container to become desynced with the current local
track.(Ideally in the future all state would be in redux so this
manual syncing would not be needed.) Removing the if-muted
check seems to cause no side-effects and makes implementation of
device-switch-while-audio-only a lot simpler because new tracks
can be muted and used immediately.

Move the HD label into the newly renamed VideoStatusLabel
component. That way it cannot be possible for the audio only
label and the HD label to display simultaneously.

Audio only mode can be used to save bandwidth. In this mode local video is muted
and last N is set to 0, thus disabling all remote video.

When this mode is enabled avatars are shown.

We seemed to be using the names "film strip" and "filmstrip" (and,
consequently, their source code-conscious forms such as film-strip,
FilmStrip, etc.) In order to comply with our coding style which requires
a consistent one name for a given abstraction, choose one name and
rename the uses of the other name.

Wikipedia has a definition of a "filmstrip", I couldn't find a "film
strip". I guess our abstraction can be seen as what's described there.
When I google "film strip", I get results about "filmstrip" at the top.
That's why I chose "filmstrip".

Certain uses of "film strip" such as interfaceConfig.filmStripOnly and
in the external API I left untouched in an attempt to preserve
compatibility.

I wasn't sure whether CSS was tangled in compatibility so I made a
choice and renamed there was well.

* Uses new peer connection statuses to check and show different user msgs.

Checks for interrupted state of peer connection and shows appropriate messages. In case of inactive or restoring state a message is show to user that video was stopped on purpose. Removes some unused parameters from the event handlers about peer connection status change.

* Removes isParticipantConnectionActive.

Moves the P2P indication next to the remote IP address
and rewords it to "(p2p)".

Uses leavingIDs to more efficiently iterate over remote videos.

Will show (direct) next to the UPD or TCP transport type if we're
running on P2P connection.

* Handle last n in the client

* fix(LargeVideoManager.js): Fixes check for low bandwidth. Needs more work

* fix(LargeVideoManager.js): Fixes the Shared Video test.

* fix(LargeVideoManager): Fix shared video view and remove last n checks.

* fix(LargeVideoManager): Fixes jsdoc comment

* fix(RemoteVideo): Fix connection status check

* fix(LargeVideoManager,RemoteVideo): Syntax errors

Updates transport type to show multiple values as we do for addresses and ports.

Recently, we reimplemented the watermarks in React. Unfortunately, we
didn't take into account film strip-only mode.

Additionally, we duplicated watermark-related source code on the Welcome
and Conference pages.

If we:
 - pin a remote and click it, unpin is signalled.
 - pin a remote and the click another remote, the new one is pinned and signalled.
 - pin a remote and then click local. UI pins local, but unpinning remote is not signaled, fix addressed with this commit.
 - pin/unpin local, nothing is signalled.

It was not switching and staying on local video on unpinning, after change the last shown video will be used to switch to it.