feat(chat): full screen video chat

Implements #2922 and #2514.
This change adds:
- a button for enabling full screen mode
- a panel with buttons for controlling the chat in full screen mode
- a button to toggle video preview
- new icons

fix(chat): fix buttons in full screen video call
feat(chat): add hotkey for exiting full screen video
fix(chat): use screen res to position button panel
fix(chat): dont remove video widget on window close

res.qrc

@@ -53,10 +53,16 @@
         <file>ui/chatArea/scrollBarLeftArrow.svg</file>
         <file>ui/chatArea/scrollBarRightArrow.svg</file>
         <file>ui/chatForm/buttons.css</file>
+        <file>ui/chatForm/fullScreenButtons.css</file>
         <file>ui/chatForm/callButton.svg</file>
         <file>ui/chatForm/micButton.svg</file>
+        <file>ui/chatForm/micButtonRed.svg</file>
         <file>ui/chatForm/videoButton.svg</file>
+        <file>ui/chatForm/videoButtonRed.svg</file>
         <file>ui/chatForm/volButton.svg</file>
+        <file>ui/chatForm/volButtonRed.svg</file>
+        <file>ui/chatForm/videoPreview.svg</file>
+        <file>ui/chatForm/videoPreviewRed.svg</file>
         <file>ui/chatForm/emoteButton.svg</file>
         <file>ui/chatForm/fileButton.svg</file>
         <file>ui/chatForm/screenshotButton.svg</file>
@@ -64,6 +70,7 @@
         <file>ui/chatForm/searchHideButton.svg</file>
         <file>ui/chatForm/searchUpButton.svg</file>
         <file>ui/chatForm/sendButton.svg</file>
+        <file>ui/chatForm/exitFullScreenButton.svg</file>
         <file>ui/emoticonWidget/dot_page.svg</file>
         <file>ui/emoticonWidget/dot_page_current.svg</file>
         <file>ui/emoticonWidget/dot_page_hover.svg</file>

src/video/genericnetcamview.cpp

@@ -19,9 +19,21 @@
 
 #include "genericnetcamview.h"
 
+#include <QApplication>
 #include <QBoxLayout>
-#include <QFrame>
+#include <QDesktopWidget>
+#include <QKeyEvent>
 #include <QPushButton>
+#include <QVariant>
+
+namespace
+{
+const auto BTN_STATE_NONE = QVariant("none");
+const auto BTN_STATE_RED = QVariant("red");
+const int BTN_PANEL_HEIGHT = 55;
+const int BTN_PANEL_WIDTH = 250;
+const auto BTN_STYLE_SHEET_PATH = QStringLiteral(":/ui/chatForm/fullScreenButtons.css");
+}
 
 GenericNetCamView::GenericNetCamView(QWidget* parent)
     : QWidget(parent)
@@ -29,35 +41,66 @@ GenericNetCamView::GenericNetCamView(QWidget* parent)
     verLayout = new QVBoxLayout(this);
     setWindowTitle(tr("Tox video"));
 
-    int spacing = verLayout->spacing();
+    buttonLayout = new QHBoxLayout();
-    verLayout->setSpacing(0);
+
+    toggleMessagesButton = new QPushButton();
+    enterFullScreenButton = new QPushButton();
+    enterFullScreenButton->setText(tr("Full Screen"));
 
-    QHBoxLayout* buttonLayout = new QHBoxLayout();
     buttonLayout->addStretch();
-    button = new QPushButton();
+    buttonLayout->addWidget(toggleMessagesButton);
-    buttonLayout->addWidget(button);
+    buttonLayout->addWidget(enterFullScreenButton);
-    buttonLayout->setSizeConstraint(QLayout::SetMinimumSize);
-    connect(button, &QPushButton::clicked, this, &GenericNetCamView::showMessageClicked);
 
-    verLayout->addSpacing(spacing);
+    connect(toggleMessagesButton, &QPushButton::clicked, this, &GenericNetCamView::showMessageClicked);
-    verLayout->addLayout(buttonLayout);
+    connect(enterFullScreenButton, &QPushButton::clicked, this, &GenericNetCamView::toggleFullScreen);
-    verLayout->addSpacing(spacing);
 
-    QFrame* lineFrame = new QFrame(this);
+    verLayout->addLayout(buttonLayout);
-    lineFrame->setStyleSheet("border: 1px solid #c1c1c1;");
+    verLayout->setContentsMargins(0, 0, 0, 0);
-    lineFrame->setFrameShape(QFrame::HLine);
-    lineFrame->setMaximumHeight(1);
-    verLayout->addWidget(lineFrame);
 
     setShowMessages(false);
 
     setStyleSheet("NetCamView { background-color: #c1c1c1; }");
+    buttonPanel = new QFrame(this);
+    buttonPanel->setStyleSheet(Style::getStylesheet(BTN_STYLE_SHEET_PATH));
+    buttonPanel->setGeometry(0, 0, BTN_PANEL_WIDTH, BTN_PANEL_HEIGHT);
+
+    QHBoxLayout* buttonPanelLayout = new QHBoxLayout(buttonPanel);
+    buttonPanelLayout->setContentsMargins(20, 0, 20, 0);
+
+    videoPreviewButton = createButton("videoPreviewButton", "none");
+    videoPreviewButton->setToolTip(tr("Toggle video preview"));
+
+    volumeButton = createButton("volButtonFullScreen", "none");
+    volumeButton->setToolTip(tr("Mute audio"));
+
+    microphoneButton = createButton("micButtonFullScreen", "none");
+    microphoneButton->setToolTip(tr("Mute microphone"));
+
+    endVideoButton = createButton("videoButtonFullScreen", "none");
+    endVideoButton->setToolTip(tr("End video call"));
+
+    exitFullScreenButton = createButton("exitFullScreenButton", "none");
+    exitFullScreenButton->setToolTip(tr("Exit full screen"));
+
+    connect(videoPreviewButton, &QPushButton::clicked, this, &GenericNetCamView::toggleVideoPreview);
+    connect(volumeButton, &QPushButton::clicked, this, &GenericNetCamView::volMuteToggle);
+    connect(microphoneButton, &QPushButton::clicked, this, &GenericNetCamView::micMuteToggle);
+    connect(endVideoButton, &QPushButton::clicked, this, &GenericNetCamView::endVideoCall);
+    connect(exitFullScreenButton, &QPushButton::clicked, this, &GenericNetCamView::toggleFullScreen);
+
+    buttonPanelLayout->addStretch();
+    buttonPanelLayout->addWidget(videoPreviewButton);
+    buttonPanelLayout->addWidget(volumeButton);
+    buttonPanelLayout->addWidget(microphoneButton);
+    buttonPanelLayout->addWidget(endVideoButton);
+    buttonPanelLayout->addWidget(exitFullScreenButton);
+    buttonPanelLayout->addStretch();
 }
 
 QSize GenericNetCamView::getSurfaceMinSize()
 {
     QSize surfaceSize = videoSurface->minimumSize();
-    QSize buttonSize = button->size();
+    QSize buttonSize = toggleMessagesButton->size();
     QSize panelSize(0, 45);
 
     return surfaceSize + buttonSize + panelSize;
@@ -66,13 +109,116 @@ QSize GenericNetCamView::getSurfaceMinSize()
 void GenericNetCamView::setShowMessages(bool show, bool notify)
 {
     if (!show) {
-        button->setText(tr("Hide Messages"));
+        toggleMessagesButton->setText(tr("Hide Messages"));
-        button->setIcon(QIcon());
+        toggleMessagesButton->setIcon(QIcon());
         return;
     }
 
-    button->setText(tr("Show Messages"));
+    toggleMessagesButton->setText(tr("Show Messages"));
+
+    if (notify) {
+        toggleMessagesButton->setIcon(QIcon(":/ui/chatArea/info.svg"));
+    }
+}
+
+void GenericNetCamView::toggleFullScreen()
+{
+    if (isFullScreen()) {
+        exitFullScreen();
+    } else {
+        enterFullScreen();
+    }
+}
+
+void GenericNetCamView::enterFullScreen()
+{
+    setWindowFlags(Qt::Window | Qt::CustomizeWindowHint | Qt::FramelessWindowHint);
+    showFullScreen();
+    enterFullScreenButton->hide();
+    toggleMessagesButton->hide();
+
+    const auto screenSize = QApplication::desktop()->screenGeometry(this);
+    buttonPanel->setGeometry((screenSize.width() / 2) - buttonPanel->width() / 2,
+            screenSize.height() - BTN_PANEL_HEIGHT - 25, BTN_PANEL_WIDTH, BTN_PANEL_HEIGHT);
+    buttonPanel->show();
+    buttonPanel->activateWindow();
+    buttonPanel->raise();
+}
+
+void GenericNetCamView::exitFullScreen()
+{
+    setWindowFlags(Qt::Widget);
+    showNormal();
+    buttonPanel->hide();
+    enterFullScreenButton->show();
+    toggleMessagesButton->show();
+}
+
+void GenericNetCamView::endVideoCall()
+{
+    toggleFullScreen();
+    emit videoCallEnd();
+}
+
+void GenericNetCamView::toggleVideoPreview()
+{
+    toggleButtonState(videoPreviewButton);
+    emit videoPreviewToggle();
+}
+
+QPushButton *GenericNetCamView::createButton(const QString& name, const QString& state)
+{
+    QPushButton* btn = new QPushButton();
+    btn->setAttribute(Qt::WA_LayoutUsesWidgetRect);
+    btn->setObjectName(name);
+    btn->setProperty("state", QVariant(state));
+    btn->setStyleSheet(Style::getStylesheet(BTN_STYLE_SHEET_PATH));
+
+    return btn;
+}
+
+void GenericNetCamView::updateMuteVolButton(bool isMuted)
+{
+    updateButtonState(volumeButton, !isMuted);
+}
+
+void GenericNetCamView::updateMuteMicButton(bool isMuted)
+{
+    updateButtonState(microphoneButton, !isMuted);
+}
+
+void GenericNetCamView::toggleButtonState(QPushButton* btn)
+{
+    if (btn->property("state") == BTN_STATE_RED) {
+        btn->setProperty("state", BTN_STATE_NONE);
+    } else {
+        btn->setProperty("state", BTN_STATE_RED);
+    }
+
+    btn->setStyleSheet(Style::getStylesheet(BTN_STYLE_SHEET_PATH));
+}
+
+void GenericNetCamView::updateButtonState(QPushButton* btn, bool active)
+{
+    if (active) {
+        btn->setProperty("state", BTN_STATE_NONE);
+    } else {
+        btn->setProperty("state", BTN_STATE_RED);
+    }
+
+    btn->setStyleSheet(Style::getStylesheet(BTN_STYLE_SHEET_PATH));
+}
 
-    if (notify)
+void GenericNetCamView::keyPressEvent(QKeyEvent *event)
-        button->setIcon(QIcon(":/ui/chatArea/info.svg"));
+{
+    int key = event->key();
+    if (key == Qt::Key_Escape && isFullScreen()) {
+        exitFullScreen();
+    }
+}
+
+void GenericNetCamView::closeEvent(QCloseEvent *event)
+{
+    exitFullScreen();
+    event->ignore();
 }

src/video/genericnetcamview.h

@@ -20,11 +20,13 @@
 #ifndef GENERICNETCAMVIEW_H
 #define GENERICNETCAMVIEW_H
 
+#include <QFrame>
 #include <QPushButton>
 #include <QVBoxLayout>
 #include <QWidget>
 
 #include "src/video/videosurface.h"
+#include "src/widget/style.h"
 
 class GenericNetCamView : public QWidget
 {
@@ -35,16 +37,42 @@ public:
 
 signals:
     void showMessageClicked();
+    void videoCallEnd();
+    void volMuteToggle();
+    void micMuteToggle();
+    void videoPreviewToggle();
 
 public slots:
     void setShowMessages(bool show, bool notify = false);
+    void updateMuteVolButton(bool isMuted);
+    void updateMuteMicButton(bool isMuted);
 
 protected:
     QVBoxLayout* verLayout;
     VideoSurface* videoSurface;
 
 private:
-    QPushButton* button;
+    QHBoxLayout* buttonLayout = nullptr;
+    QPushButton* toggleMessagesButton = nullptr;
+    QPushButton* enterFullScreenButton = nullptr;
+    QFrame* buttonPanel = nullptr;
+    QPushButton* videoPreviewButton = nullptr;
+    QPushButton* volumeButton = nullptr;
+    QPushButton* microphoneButton = nullptr;
+    QPushButton* endVideoButton = nullptr;
+    QPushButton* exitFullScreenButton = nullptr;
+
+private:
+    QPushButton* createButton(const QString& name, const QString& state);
+    void toggleFullScreen();
+    void enterFullScreen();
+    void exitFullScreen();
+    void endVideoCall();
+    void toggleVideoPreview();
+    void toggleButtonState(QPushButton* btn);
+    void updateButtonState(QPushButton* btn, bool active);
+    void keyPressEvent(QKeyEvent *event) override;
+    void closeEvent(QCloseEvent *event) override;
 };
 
 #endif // GENERICNETCAMVIEW_H

src/video/netcamview.cpp

@@ -40,7 +40,6 @@ NetCamView::NetCamView(int friendId, QWidget* parent)
     const ToxPk pk = FriendList::findFriend(friendId)->getPublicKey();
     videoSurface = new VideoSurface(Nexus::getProfile()->loadAvatar(pk), this);
     videoSurface->setMinimumHeight(256);
-    videoSurface->setContentsMargins(6, 6, 6, 6);
 
     verLayout->insertWidget(0, videoSurface, 1);
 
@@ -145,3 +144,12 @@ void NetCamView::updateFrameSize(QSize size)
     else
         selfFrame->setMaximumHeight(selfFrame->maximumWidth() / selfVideoSurface->getRatio());
 }
+
+void NetCamView::toggleVideoPreview()
+{
+    if (selfFrame->isHidden()) {
+        selfFrame->show();
+    } else {
+        selfFrame->hide();
+    }
+}

src/video/netcamview.h

@@ -42,6 +42,7 @@ public:
 
     void setSource(VideoSource* s);
     void setTitle(const QString& title);
+    void toggleVideoPreview();
 
 protected:
     void showEvent(QShowEvent* event) final override;

src/widget/form/chatform.cpp

@@ -626,6 +626,10 @@ GenericNetCamView* ChatForm::createNetcam()
     CoreAV* av = Core::getInstance()->getAv();
     VideoSource* source = av->getVideoSourceFromCall(friendId);
     view->show(source, f->getDisplayedName());
+    connect(view, &GenericNetCamView::videoCallEnd, this, &ChatForm::onVideoCallTriggered);
+    connect(view, &GenericNetCamView::volMuteToggle, this, &ChatForm::onVolMuteToggle);
+    connect(view, &GenericNetCamView::micMuteToggle, this, &ChatForm::onMicMuteToggle);
+    connect(view, &GenericNetCamView::videoPreviewToggle, view, &NetCamView::toggleVideoPreview);
     return view;
 }
 
@@ -907,6 +911,9 @@ void ChatForm::updateMuteMicButton()
     bool active = av->isCallActive(f);
     bool inputMuted = av->isCallInputMuted(f);
     headWidget->updateMuteMicButton(active, inputMuted);
+    if (netcam) {
+        netcam->updateMuteMicButton(inputMuted);
+    }
 }
 
 void ChatForm::updateMuteVolButton()
@@ -915,6 +922,9 @@ void ChatForm::updateMuteVolButton()
     bool active = av->isCallActive(f);
     bool outputMuted = av->isCallOutputMuted(f);
     headWidget->updateMuteVolButton(active, outputMuted);
+    if (netcam) {
+        netcam->updateMuteVolButton(outputMuted);
+    }
 }
 
 void ChatForm::startCounter()

ui/chatForm/exitFullScreenButton.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="20"
+   height="20.000362"
+   viewBox="0 0 20 20.000363">
+  <defs
+     id="defs2" />
+  <metadata
+     id="metadata5">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-2.4999999,-295.2666)">
+    <path
+       style="opacity:1;fill:none;fill-opacity:1;fill-rule:evenodd;stroke:#ffffff;stroke-width:0.72138608;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       d="m 2.8606929,295.62754 v 4.60721 h 0.3600048 v -4.24701 h 4.4824852 v -0.36043 z m 14.4624221,0.0236 v 0.36044 h 4.447384 v 4.25305 h 0.354961 v -4.6133 z M 2.8738071,309.85279 v 5.04937 h 4.8387917 v -0.35807 H 3.2338116 v -4.69139 z m 18.9105419,0.004 v 4.6914 h -4.447384 v 0.35808 h 4.802342 v -5.04938 z"
+       id="rect4485"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="cccccccccccccccccccccccccccc" />
+  </g>
+</svg>

ui/chatForm/fullScreenButtons.css

@@ -0,0 +1,78 @@
+QFrame
+{
+    background-color: rgba(50, 50, 50, 0.6);
+    border-radius: 20px;
+}
+
+QAbstractButton
+{
+    background-color: transparent;
+    background-repeat: none;
+    background-position: center;
+    border: none;
+    border-radius: 5px;
+}
+
+QAbstractButton:hover
+{
+    background-color: rgba(255,255,255, 0.2);
+}
+
+QAbstractButton:pressed
+{
+    background-color: rgba(0,0,0, 0.2);
+}
+
+QAbstractButton#volButtonFullScreen
+{
+    background-image: url(":/ui/chatForm/volButton.svg");
+    width: 11px;
+    height: 9px;
+    padding: 12px;
+}
+
+QAbstractButton#micButtonFullScreen
+{
+    background-image: url(":/ui/chatForm/micButton.svg");
+    width: 11px;
+    height: 9px;
+    padding: 12px;
+}
+
+QAbstractButton#videoButtonFullScreen
+{
+    background-image: url(":/ui/chatForm/videoButtonRed.svg");
+    width: 37px;
+    height: 33px;
+}
+
+QAbstractButton#videoPreviewButton
+{
+    background-image: url(":/ui/chatForm/videoPreview.svg");
+    width: 13px;
+    height: 13px;
+    padding: 10px;
+}
+
+QAbstractButton#exitFullScreenButton
+{
+    background-image: url(":/ui/chatForm/exitFullScreenButton.svg");
+    width: 30px;
+    height: 30px;
+    padding: 1px;
+}
+
+QAbstractButton#volButtonFullScreen[state="red"]
+{
+    background-image: url(":/ui/chatForm/volButtonRed.svg");
+}
+
+QAbstractButton#micButtonFullScreen[state="red"]
+{
+    background-image: url(":/ui/chatForm/micButtonRed.svg");
+}
+
+QAbstractButton#videoPreviewButton[state="red"]
+{
+    background-image: url(":/ui/chatForm/videoPreviewRed.svg");
+}

ui/chatForm/micButtonRed.svg

@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="30"
+   height="28"
+   viewBox="0 0 28.124999 26.25">
+  <metadata
+     id="metadata4873">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs4871" />
+  <g
+     id="g4579">
+    <path
+       transform="scale(0.93749998)"
+       id="path4566"
+       d="M 23.042969 11.054688 A 1.1421142 1.1421142 0 0 0 21.962891 12.251953 C 21.962891 12.251953 22.024446 14.395045 21.130859 16.478516 C 20.237269 18.561987 18.648123 20.503906 14.654297 20.503906 C 12.26917 20.503906 10.834958 19.825509 9.9023438 18.849609 L 8.2460938 20.300781 C 9.6278794 21.729986 11.703239 22.789063 14.654297 22.789062 C 19.464186 22.789062 22.100408 20.013725 23.230469 17.378906 C 24.36053 14.744087 24.246094 12.166016 24.246094 12.166016 A 1.1421142 1.1421142 0 0 0 23.042969 11.054688 z M 6.9453125 11.101562 A 1.1421142 1.1421142 0 0 0 5.8046875 12.130859 C 5.8046875 12.130859 5.4834581 14.690516 6.4179688 17.335938 C 6.4620129 17.460618 6.5270768 17.585843 6.578125 17.710938 L 8.4277344 16.089844 C 7.8929617 14.20501 8.0722656 12.394531 8.0722656 12.394531 A 1.1421142 1.1421142 0 0 0 6.9453125 11.101562 z "
+       style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#df3b3b;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.28399992;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+    <path
+       id="rect5419"
+       transform="scale(0.93749998)"
+       d="M 13.640625 2 C 11.851206 2 10.410156 3.44105 10.410156 5.2304688 L 10.410156 14.353516 L 19.529297 6.3652344 L 19.529297 5.2304688 C 19.529297 3.44105 18.0902 2 16.300781 2 L 13.640625 2 z M 19.529297 10.416016 L 11.470703 17.474609 C 12.044235 17.997563 12.79973 18.324219 13.640625 18.324219 L 16.300781 18.324219 C 18.0902 18.324219 19.529297 16.883169 19.529297 15.09375 L 19.529297 10.416016 z "
+       style="fill:#df3b3b;fill-opacity:1;stroke:none;stroke-width:0.85247785;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <rect
+       rx="0.37638026"
+       ry="0.73836523"
+       y="22.89827"
+       x="8.2009907"
+       height="1.4767305"
+       width="11.667788"
+       id="rect5423"
+       style="fill:#df3b3b;fill-opacity:1;stroke:none;stroke-width:0.79919797;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <rect
+       ry="0"
+       rx="0"
+       y="19.703161"
+       x="12.636901"
+       height="4.0542965"
+       width="2.4195859"
+       id="rect5427"
+       style="fill:#df3b3b;fill-opacity:1;stroke:none;stroke-width:0.79919797;stroke-miterlimit:10;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
+    <rect
+       transform="matrix(0.68672446,0.72691782,-0.75217782,0.65896019,0,0)"
+       y="-13.410425"
+       x="16.876799"
+       height="22.56399"
+       width="2.2383029"
+       id="rect4487"
+       style="opacity:1;fill:#df3b3b;fill-opacity:1;stroke:none;stroke-width:0.60107476;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+</svg>

ui/chatForm/videoButtonRed.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   width="25"
+   height="15"
+   viewBox="0 0 25 15"
+   xml:space="preserve"><metadata
+     id="metadata13"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+     id="defs11" /><g
+     transform="matrix(1.1065089,0,0,1.0395229,0,0.03502821)"
+     id="g3"
+     style="fill:#df3b3b;fill-opacity:1"><path
+       d="m 8.845,2 c 0,-1.1 0.9,-2 2,-2 h 9.78 c 1.1,0 2,0.9 2,2 v 10.396 c 0,1.1 -0.9,2 -2,2 h -9.78 c -1.1,0 -2,-0.9 -2,-2 V 2 z"
+       id="path5"
+       style="fill:#df3b3b;fill-opacity:1" /><polygon
+       points="0,12.916 7.509,8.581 7.509,5.814 0,1.48 "
+       id="polygon7"
+       style="fill:#df3b3b;fill-opacity:1" /></g></svg>

ui/chatForm/videoPreview.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   viewBox="0 0 21 21"
+   enable-background="new 0 0 40 40"
+   xml:space="preserve"
+   width="21"
+   height="21"
+   ><metadata
+     id="metadata13"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
+     id="defs11" /><g
+     id="g4494"
+     style="stroke:#ffffff"
+     transform="matrix(0.87011066,0,0,0.87011066,-0.41325191,-0.45274106)"><g
+       transform="matrix(0.51354912,0,0,0.51354912,2.2393718,3.5951719)"
+       style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:1.9744947;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.98818898"
+       id="g6"><path
+         inkscape:connector-curvature="0"
+         style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:1.9744947;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.98818898"
+         id="path2"
+         d="M 25.8,24.5 C 42,30.3 36.8,40 36.8,40 H 2.6 c 0,0 -2.7,-10.9 11.9,-15.5 0,0 5.8,4.9 11.3,0 z" /><path
+         inkscape:connector-curvature="0"
+         style="fill:none;fill-opacity:1;stroke:#ffffff;stroke-width:1.9744947;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.98818898"
+         id="path4"
+         d="m 10.3,10.1 c 0,0 0.9,13.5 9.6,13.5 8.7,0 9.7,-12.6 9.7,-12.6 0,0 0.4,-11 -9.7,-11 -10,0 -9.6,10.1 -9.6,10.1 z" /></g><rect
+       y="0.92332584"
+       x="0.87794179"
+       height="23.328861"
+       width="23.328861"
+       id="rect4492"
+       style="opacity:1;fill:none;fill-opacity:0;stroke:#ffffff;stroke-width:0.80599999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.98818898" /></g></svg>

ui/chatForm/videoPreviewRed.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   viewBox="0 0 21 21"
+   enable-background="new 0 0 40 40"
+   xml:space="preserve"
+   width="21"
+   height="21"
+   ><metadata
+     id="metadata13"><rdf:RDF><cc:Work
+         rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><defs
+     id="defs11" /><g
+     id="g4494"
+     transform="matrix(0.87011066,0,0,0.87011066,-0.41325191,-0.45274106)"><g
+       transform="matrix(0.51354912,0,0,0.51354912,2.2393718,3.5959177)"
+       style="fill:none;fill-opacity:1;stroke:#df3b3b;stroke-width:1.9744947;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="g6"><path
+         inkscape:connector-curvature="0"
+         style="fill:none;fill-opacity:1;stroke:#df3b3b;stroke-width:1.9744947;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path2"
+         d="M 25.8,24.5 C 42,30.3 36.8,40 36.8,40 H 2.6 c 0,0 -2.7,-10.9 11.9,-15.5 0,0 5.8,4.9 11.3,0 z" /><path
+         inkscape:connector-curvature="0"
+         style="fill:none;fill-opacity:1;stroke:#df3b3b;stroke-width:1.9744947;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         id="path4"
+         d="m 10.3,10.1 c 0,0 0.9,13.5 9.6,13.5 8.7,0 9.7,-12.6 9.7,-12.6 0,0 0.4,-11 -9.7,-11 -10,0 -9.6,10.1 -9.6,10.1 z" /></g><rect
+       y="0.92332584"
+       x="0.87794179"
+       height="23.328861"
+       width="23.328861"
+       id="rect4492"
+       style="opacity:1;fill:none;fill-opacity:0;stroke:#df3b3b;stroke-width:0.80599999;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" /></g></svg>

ui/chatForm/volButtonRed.svg

@@ -0,0 +1,61 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   viewBox="0 0 20.625 20.625"
+   height="22"
+   width="22"
+   version="1.1">
+  <metadata
+     id="metadata5878">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <defs
+     id="defs5876" />
+  <g
+     id="g4509">
+    <rect
+       style="fill:#df3b3b;fill-opacity:1;stroke:#df3b3b;stroke-width:0.65625;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
+       id="rect6422"
+       width="6.0391855"
+       height="6.3892837"
+       x="1.2816311"
+       y="7.0294061"
+       ry="1.6575612"
+       rx="1.4790546" />
+    <path
+       id="path4750"
+       d="M 6.4654902,7.554553 10.99233,3.0713816 V 17.59614 L 6.3560847,12.536151 Z"
+       style="fill:#df3b3b;fill-opacity:1;fill-rule:evenodd;stroke:#df3b3b;stroke-width:0.65625;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       inkscape:connector-curvature="0" />
+    <rect
+       transform="rotate(46.412557)"
+       y="-9.3177042"
+       x="17.554688"
+       height="8.7275753"
+       width="1.2551807"
+       id="rect4487-3"
+       style="opacity:1;fill:#df3b3b;fill-opacity:1;stroke:#df3b3b;stroke-width:0.41779324;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    <rect
+       transform="rotate(133.86159)"
+       y="-22.748537"
+       x="-4.7673388"
+       height="8.7275753"
+       width="1.2551807"
+       id="rect4487-3-3"
+       style="opacity:1;fill:#df3b3b;fill-opacity:1;stroke:#df3b3b;stroke-width:0.41779324;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+  </g>
+</svg>