videopage: move/resize preview image

- Implements moving and resizing of the preview window during a
  video call. The preview window will anchor to the corner it's
  closest to after completing the movement. The preview window can
  be resized.

- Refactors the full-screen mode change to be separated into
  setFullScreenMode and setWindowedMode.

Change-Id: I147094c9c56c15f9e423acab7f09fd3e0f295bb0
Tuleap: #1515

MainPage.xaml.cpp

@@ -104,7 +104,7 @@ MainPage::MainPage()
         _loadingStatus_->Foreground = brush;
     });
 
-    RingD::instance->toggleFullScreen += ref new RingClientUWP::ToggleFullScreen(this, &RingClientUWP::MainPage::OnToggleFullScreen);
+    RingD::instance->fullScreenToggled += ref new RingClientUWP::FullScreenToggled(this, &RingClientUWP::MainPage::OnFullScreenToggled);
 }
 
 void
@@ -182,6 +182,7 @@ RingClientUWP::MainPage::showLoadingOverlay(bool load, bool modal)
 void
 RingClientUWP::MainPage::OnResize(Platform::Object^ sender, Windows::UI::Core::WindowSizeChangedEventArgs^ e)
 {
+    RingD::instance->raiseWindowResized();
 }
 
 void
@@ -382,7 +383,7 @@ void RingClientUWP::MainPage::OnvolatileDetailsChanged(const std::string &accoun
     showLoadingOverlay(false, false);
 }
 
-void RingClientUWP::MainPage::OnToggleFullScreen(bool state)
+void RingClientUWP::MainPage::OnFullScreenToggled(bool state)
 {
     static bool openState;
     if (state == true) {

MainPage.xaml.h

@@ -64,7 +64,7 @@ private:
     void _toggleSmartBoxButton__Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);
     void showFrame(Windows::UI::Xaml::Controls::Frame^ frame);
     void OnsummonMessageTextPage();
-    void OnToggleFullScreen(bool state);
+    void OnFullScreenToggled(bool state);
     void OnsummonWelcomePage();
     void OnsummonPreviewPage();
     void OnhidePreviewPage();

RingD.cpp

@@ -275,6 +275,11 @@ void RingClientUWP::RingD::unPauseCall(const std::string & callId)
     tasksList_.push(task);
 }
 
+void RingClientUWP::RingD::raiseWindowResized()
+{
+    windowResized();
+}
+
 void RingClientUWP::RingD::cancelOutGoingCall2(String ^ callId)
 {
     MSG_("$1 cancelOutGoingCall2 : " + Utils::toString(callId));
@@ -950,7 +955,7 @@ RingD::dequeueTasks()
             break;
         case Request::PlaceCall:
         {
-            auto callId = DRing::placeCall(task->_accountId_new, "ring:" + task->_ringId_new);
+            auto callId = DRing::placeCall(task->_accountId_new, std::string("ring:" + task->_ringId_new));
             CoreApplication::MainView->CoreWindow->Dispatcher->RunAsync(CoreDispatcherPriority::High,
             ref new DispatchedHandler([=]() {
 
@@ -1367,21 +1372,28 @@ Vector<String^>^ RingClientUWP::RingD::translateKnownRingDevices(const std::map<
     return devicesList;
 }
 
-void RingClientUWP::RingD::raiseToggleFullScreen()
+void RingClientUWP::RingD::setFullScreenMode()
 {
-    ApplicationView^ view = ApplicationView::GetForCurrentView();
-    if (view->IsFullScreenMode) {
-        view->ExitFullScreenMode();
-        toggleFullScreen(false);
-        MSG_("Successfully exited fullscreen");
+    if (ApplicationView::GetForCurrentView()->TryEnterFullScreenMode()) {
+        MSG_("TryEnterFullScreenMode succeeded");
+        fullScreenToggled(true);
     }
     else {
-        if (view->TryEnterFullScreenMode()) {
-            MSG_("Successfully entered fullscreen");
-            toggleFullScreen(true);
-        }
-        else {
-            ERR_("Unsuccessfully entered fullscreen");
-        }
+        ERR_("TryEnterFullScreenMode failed");
     }
 }
+
+void RingClientUWP::RingD::setWindowedMode()
+{
+    ApplicationView::GetForCurrentView()->ExitFullScreenMode();
+    MSG_("ExitFullScreenMode");
+    fullScreenToggled(false);
+}
+
+void RingClientUWP::RingD::toggleFullScreen()
+{
+    if (isFullScreen)
+        setWindowedMode();
+    else
+        setFullScreenMode();
+}

RingD.h

@@ -25,6 +25,7 @@ using namespace concurrency;
 
 using namespace Windows::UI::Notifications;
 using namespace Windows::Data::Xml::Dom;
+using namespace Windows::UI::ViewManagement;
 
 namespace RingClientUWP
 {
@@ -54,7 +55,8 @@ delegate void CallsListRecieved(const std::vector<std::string>& callsList);
 delegate void AudioMuted(const std::string& callId, bool state);
 delegate void VideoMuted(const std::string& callId, bool state);
 delegate void NameRegistred(bool status);
-delegate void ToggleFullScreen(bool state);
+delegate void FullScreenToggled(bool state);
+delegate void WindowResized();
 delegate void VolatileDetailsChanged(const std::string& accountId, const std::map<std::string, std::string>& details);
 
 using SharedCallback = std::shared_ptr<DRing::CallbackWrapperBase>;
@@ -64,6 +66,7 @@ public ref class RingD sealed
 {
 public:
     /* functions */
+    void raiseWindowResized();
 
     /* properties */
     static property RingD^ instance
@@ -91,6 +94,14 @@ public:
         }
     }
 
+    property bool isFullScreen
+    {
+        bool get()
+        {
+            return ApplicationView::GetForCurrentView()->IsFullScreenMode;
+        }
+    }
+
     property bool isOnXBox
     {
         bool get()
@@ -140,7 +151,9 @@ internal:
     String^ getUserName();
     Vector<String^>^ translateKnownRingDevices(const std::map<std::string, std::string> devices);
 
-    void raiseToggleFullScreen();
+    void toggleFullScreen();
+    void setWindowedMode();
+    void setFullScreenMode();
 
     void hangUpCall2(String^ callId);
     void pauseCall(String ^ callId);
@@ -186,7 +199,8 @@ internal:
     event AudioMuted^ audioMuted;
     event VideoMuted^ videoMuted;
     event NameRegistred^ nameRegistred;
-    event ToggleFullScreen^ toggleFullScreen;
+    event FullScreenToggled^ fullScreenToggled;
+    event WindowResized^ windowResized;
     event VolatileDetailsChanged^ volatileDetailsChanged;
 
 private:

SmartPanelItemsViewModel.cpp

@@ -37,6 +37,19 @@ SmartPanelItemsViewModel::SmartPanelItemsViewModel()
     RingD::instance->stateChange += ref new RingClientUWP::StateChange(this, &RingClientUWP::ViewModel::SmartPanelItemsViewModel::OnstateChange);
 }
 
+bool
+SmartPanelItemsViewModel::isInCall()
+{
+    bool isInCall = false;
+    for (auto item : itemsList) {
+        if (item->_callId && item->_callStatus == CallStatus::IN_PROGRESS) {
+            isInCall = true;
+            break;
+        }
+    }
+    return isInCall;
+}
+
 SmartPanelItem^
 SmartPanelItemsViewModel::findItem(String^ callId)
 {

SmartPanelItemsViewModel.h

@@ -30,6 +30,9 @@ namespace ViewModel {
 
 public ref class SmartPanelItemsViewModel sealed
 {
+public:
+    bool isInCall();
+
 internal:
     /* singleton */
     static property SmartPanelItemsViewModel^ instance

VideoCaptureManager.cpp

@@ -64,6 +64,13 @@ VideoCaptureManager::VideoCaptureManager():
     captureTaskTokenSource = new cancellation_token_source();
 }
 
+double
+VideoCaptureManager::aspectRatio()
+{
+    auto resolution = activeDevice->currentResolution();
+    return static_cast<double>(resolution->width()) / static_cast<double>(resolution->height());
+}
+
 Map<String^,String^>^
 VideoCaptureManager::getSettings(String^ device)
 {

VideoCaptureManager.h

@@ -40,12 +40,16 @@ namespace Video
 
 public ref class VideoCaptureManager sealed
 {
+public:
+    double aspectRatio();
+
 internal:
     property bool isPreviewing
     {
         bool get() { return isPreviewing_; }
         void set(bool value) { isPreviewing_ = value; }
     }
+
     property bool isSettingsPreviewing
     {
         bool get() { return isSettingsPreviewing_; }

VideoPage.xaml

@@ -125,7 +125,6 @@
                                           IsTabStop="False"
                                           AutomationProperties.AccessibilityView="Raw"
                                           ZoomMode="Disabled" />
-
                             <Button x:Name="_sendBtn_"
                                     Background="Transparent"
                                     BorderThickness="0"
@@ -152,7 +151,7 @@
             <Frame x:Name="_chatPanel_"/>
         </SplitView.Pane>
         <SplitView.Content>
-            <Grid>
+            <Grid x:Name="_videoContent_">
                 <Grid.RowDefinitions>
                     <RowDefinition Height="*"/>
                     <RowDefinition x:Name="_rowChatBx_" Height="0"/>
@@ -162,6 +161,7 @@
                         PointerMoved="_videoControl__PointerMoved">
                     <StackPanel x:Name="_headerBar_"
                                 Background="{StaticResource SemiTransparentBlack}"
+                                Canvas.ZIndex="99999"
                                 HorizontalAlignment="Stretch"
                                 VerticalAlignment="Top"
                                 Height="50">
@@ -172,7 +172,7 @@
                     </StackPanel>
 
                     <!-- video -->
-                    <Image Name="IncomingVideoImage"
+                    <Image Name="_IncomingVideoImage_"
                            Grid.Column="0"
                            Canvas.ZIndex="-1"
                            DoubleTapped="IncomingVideoImage_DoubleTapped"
@@ -189,12 +189,24 @@
                                Canvas.ZIndex="-1"/>
 
                     <!--camera preview-->
-                    <CaptureElement Name="PreviewImage"
-                                    Width="200"
-                                    VerticalAlignment="Center"
-                                    HorizontalAlignment="Right"
-                                    Stretch="Uniform"
-                                    Grid.Column="0"/>
+                    <Canvas   Name="_PreviewImageRect_"
+                              HorizontalAlignment="Right"
+                              VerticalAlignment="Bottom"
+                              PointerReleased="PreviewImage_PointerReleased"
+                              PointerCaptureLost="PreviewImage_PointerReleased">
+                        <Polygon    Name="_PreviewImageResizer_"
+                                    Visibility="Collapsed"
+                                    Fill="#FF3BC1D3"
+                                    Points="0,0,20,0,0,20"
+                                    Canvas.ZIndex="99999"
+                                    ManipulationMode="TranslateY"/>
+                        <CaptureElement Name="_PreviewImage_"
+                                        Visibility="Collapsed"
+                                        Stretch="Uniform"
+                                        Width="20"
+                                        Height="20"
+                                        ManipulationMode="All"/>
+                    </Canvas>
 
                     <StackPanel x:Name="_controlsBar_"
                             HorizontalAlignment="Center"
@@ -323,7 +335,6 @@
                             Tapped="_btnSwitch__Tapped" Visibility="Collapsed">
                             <SymbolIcon Symbol="Switch"/>
                         </Button>
-                        <!--Tapped="_btnMicrophone__Tapped"-->
                         <Button x:Name="_btnMicrophone_"
                             PointerEntered="btnAny_entered"
                             PointerExited="btnAny_exited"

VideoPage.xaml.cpp

@@ -50,6 +50,8 @@ using namespace Windows::UI::Xaml::Media::Imaging;
 using namespace Windows::Media::Capture;
 using namespace Windows::Devices::Sensors;
 
+using namespace Windows::UI::Input;
+
 VideoPage::VideoPage()
 {
     InitializeComponent();
@@ -88,29 +90,43 @@ VideoPage::VideoPage()
     VideoManager::instance->captureManager()->startPreviewing +=
         ref new StartPreviewing([this]()
     {
-        PreviewImage->Visibility = Windows::UI::Xaml::Visibility::Visible;
-        PreviewImage->FlowDirection = VideoManager::instance->captureManager()->mirroringPreview ?
+        _PreviewImage_->Visibility = Windows::UI::Xaml::Visibility::Visible;
+        _PreviewImageResizer_->Visibility = Windows::UI::Xaml::Visibility::Visible;
+        _PreviewImage_->FlowDirection = VideoManager::instance->captureManager()->mirroringPreview ?
                                       Windows::UI::Xaml::FlowDirection::RightToLeft :
                                       Windows::UI::Xaml::FlowDirection::LeftToRight;
+
+        double aspectRatio = VideoManager::instance->captureManager()->aspectRatio();
+
+        _PreviewImage_->Height = ( _videoContent_->ActualHeight / 4 );
+        _PreviewImage_->Width = _PreviewImage_->Height * aspectRatio;
+        _PreviewImageRect_->Width = _PreviewImage_->Width;
+        _PreviewImageRect_->Height = _PreviewImage_->Height;
     });
 
     VideoManager::instance->captureManager()->stopPreviewing +=
         ref new StopPreviewing([this]()
     {
-        PreviewImage->Source = nullptr;
-        PreviewImage->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
+        _PreviewImage_->Source = nullptr;
+        _PreviewImage_->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
+        _PreviewImageResizer_->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
     });
 
     VideoManager::instance->captureManager()->getSink +=
         ref new GetSink([this]()
     {
-        return PreviewImage;
+        return _PreviewImage_;
     });
 
     VideoManager::instance->rendererManager()->clearRenderTarget +=
         ref new ClearRenderTarget([this]()
     {
-        IncomingVideoImage->Source = nullptr;
+        _IncomingVideoImage_->Source = nullptr;
+    });
+
+    RingD::instance->windowResized +=
+        ref new WindowResized([&]()
+    {
     });
 
     RingD::instance->incomingAccountMessage +=
@@ -130,16 +146,16 @@ VideoPage::VideoPage()
                     RingD::instance->pauseCall(Utils::toString(it->_callId));
 
             _callPaused_->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
-            IncomingVideoImage->Visibility = Windows::UI::Xaml::Visibility::Visible;
-//            PreviewImage->Visibility = Windows::UI::Xaml::Visibility::Visible;
+            _IncomingVideoImage_->Visibility = Windows::UI::Xaml::Visibility::Visible;
+//            _PreviewImage_->Visibility = Windows::UI::Xaml::Visibility::Visible;
             break;
         }
         case CallStatus::ENDED:
         {
             Video::VideoManager::instance->rendererManager()->raiseClearRenderTarget();
 
-            if (Windows::UI::ViewManagement::ApplicationView::GetForCurrentView()->IsFullScreen)
-                RingD::instance->raiseToggleFullScreen();
+            if (RingD::instance->isFullScreen)
+                RingD::instance->setWindowedMode();
 
             /* "close" the chat panel */
             _rowChatBx_->Height = 0;
@@ -149,8 +165,8 @@ VideoPage::VideoPage()
         case CallStatus::PEER_PAUSED:
         case CallStatus::PAUSED:
             _callPaused_->Visibility = Windows::UI::Xaml::Visibility::Visible;
-            IncomingVideoImage->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
-//            PreviewImage->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
+            _IncomingVideoImage_->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
+//            _PreviewImage_->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
             break;
         }
     });
@@ -161,6 +177,20 @@ VideoPage::VideoPage()
     VideoManager::instance->captureManager()->stopPreviewing += ref new RingClientUWP::StopPreviewing(this, &RingClientUWP::Views::VideoPage::OnstopPreviewing);
     RingD::instance->audioMuted += ref new RingClientUWP::AudioMuted(this, &RingClientUWP::Views::VideoPage::OnaudioMuted);
     RingD::instance->videoMuted += ref new RingClientUWP::VideoMuted(this, &RingClientUWP::Views::VideoPage::OnvideoMuted);
+
+    InitManipulationTransforms();
+
+    _PreviewImage_->ManipulationDelta += ref new ManipulationDeltaEventHandler(this, &VideoPage::PreviewImage_ManipulationDelta);
+    _PreviewImage_->ManipulationCompleted += ref new ManipulationCompletedEventHandler(this, &VideoPage::PreviewImage_ManipulationCompleted);
+
+    _PreviewImageResizer_->ManipulationDelta += ref new ManipulationDeltaEventHandler(this, &VideoPage::PreviewImageResizer_ManipulationDelta);
+    _PreviewImageResizer_->ManipulationCompleted += ref new ManipulationCompletedEventHandler(this, &VideoPage::PreviewImageResizer_ManipulationCompleted);
+
+    _PreviewImage_->ManipulationMode =
+        ManipulationModes::TranslateX |
+        ManipulationModes::TranslateY;
+
+    _PreviewImageResizer_->ManipulationMode = ManipulationModes::TranslateY;
 }
 
 void
@@ -185,6 +215,56 @@ void RingClientUWP::Views::VideoPage::updatePageContent()
     scrollDown();
 }
 
+void
+VideoPage::updatePreviewFrameDimensions()
+{
+    double aspectRatio = VideoManager::instance->captureManager()->aspectRatio();
+
+    TransformGroup^ transforms = ref new TransformGroup();
+
+    double scaleValue = 1 + userPreviewHeightModifier / _PreviewImage_->Height;
+
+    scaleValue = max(min(1.75, scaleValue), 0.5);
+
+    userPreviewHeightModifier = _PreviewImage_->Height * (scaleValue - 1);
+
+    ScaleTransform^ scale = ref new ScaleTransform();
+    scale->ScaleX = scaleValue;
+    scale->ScaleY = scaleValue;
+
+    TranslateTransform^ translate = ref new TranslateTransform();
+    switch (quadrant)
+    {
+    case 0:
+        translate->Y = -userPreviewHeightModifier;
+        translate->X = translate->Y * aspectRatio;
+        break;
+    case 1:
+        translate->Y = -userPreviewHeightModifier;
+        translate->X = 0;
+        break;
+    case 2:
+        translate->Y = 0;
+        translate->X = 0;
+        break;
+    case 3:
+        translate->Y = 0;
+        translate->X = -userPreviewHeightModifier * aspectRatio;
+        break;
+    default:
+        break;
+    }
+
+    transforms->Children->Append(scale);
+    transforms->Children->Append(translate);
+
+    _PreviewImage_->RenderTransform = transforms;
+
+    _PreviewImageResizer_->RenderTransform = translate;
+
+    arrangeResizer();
+}
+
 void RingClientUWP::Views::VideoPage::scrollDown()
 {
     _scrollView_->UpdateLayout();
@@ -196,12 +276,14 @@ void RingClientUWP::Views::VideoPage::screenVideo(bool state)
     if (state) {
         Video::VideoManager::instance->rendererManager()->raiseClearRenderTarget();
         _callPaused_->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
-        IncomingVideoImage->Visibility = Windows::UI::Xaml::Visibility::Visible;
-        PreviewImage->Visibility = Windows::UI::Xaml::Visibility::Visible;
+        _IncomingVideoImage_->Visibility = Windows::UI::Xaml::Visibility::Visible;
+        _PreviewImage_->Visibility = Windows::UI::Xaml::Visibility::Visible;
+        _PreviewImageResizer_->Visibility = Windows::UI::Xaml::Visibility::Visible;
     } else {
         _callPaused_->Visibility = Windows::UI::Xaml::Visibility::Visible;
-        IncomingVideoImage->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
-        PreviewImage->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
+        _IncomingVideoImage_->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
+        _PreviewImage_->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
+        _PreviewImageResizer_->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
     }
 
 
@@ -254,6 +336,8 @@ void RingClientUWP::Views::VideoPage::_btnHangUp__Tapped(Platform::Object^ sende
     auto item = SmartPanelItemsViewModel::instance->_selectedItem;
 
     if (item) {
+        _PreviewImage_->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
+        _PreviewImageResizer_->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
         RingD::instance->hangUpCall2(item->_callId);
         pressHangUpCall();
     }
@@ -379,7 +463,7 @@ VideoPage::WriteFrameAsSoftwareBitmapAsync(String^ id, uint8_t* buf, int width,
            .then([this, sbSource]()
     {
         try {
-            IncomingVideoImage->Source = sbSource;
+            _IncomingVideoImage_->Source = sbSource;
         }
         catch (Exception^ e) {
             WriteException(e);
@@ -411,7 +495,7 @@ void RingClientUWP::Views::VideoPage::OnincomingVideoMuted(Platform::String ^cal
                                    ? Windows::UI::Xaml::Visibility::Visible
                                    : Windows::UI::Xaml::Visibility::Collapsed;*/
 
-    IncomingVideoImage->Visibility = (state)
+    _IncomingVideoImage_->Visibility = (state)
                                      ? Windows::UI::Xaml::Visibility::Collapsed
                                      : Windows::UI::Xaml::Visibility::Visible;
 }
@@ -419,13 +503,15 @@ void RingClientUWP::Views::VideoPage::OnincomingVideoMuted(Platform::String ^cal
 
 void RingClientUWP::Views::VideoPage::OnstartPreviewing()
 {
-    PreviewImage->Visibility = Windows::UI::Xaml::Visibility::Visible;
+    _PreviewImage_->Visibility = Windows::UI::Xaml::Visibility::Visible;
+    _PreviewImageResizer_->Visibility = Windows::UI::Xaml::Visibility::Visible;
 }
 
 
 void RingClientUWP::Views::VideoPage::OnstopPreviewing()
 {
-    PreviewImage->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
+    _PreviewImage_->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
+    _PreviewImageResizer_->Visibility = Windows::UI::Xaml::Visibility::Collapsed;
 }
 
 
@@ -458,5 +544,195 @@ void RingClientUWP::Views::VideoPage::OnvideoMuted(const std::string &callId, bo
 
 void RingClientUWP::Views::VideoPage::IncomingVideoImage_DoubleTapped(Platform::Object^ sender, Windows::UI::Xaml::Input::DoubleTappedRoutedEventArgs^ e)
 {
-    RingD::instance->raiseToggleFullScreen();
-}
\ No newline at end of file
+    RingD::instance->toggleFullScreen();
+    anchorPreview();
+}
+
+
+void RingClientUWP::Views::VideoPage::InitManipulationTransforms()
+{
+    PreviewImage_transforms = ref new TransformGroup();
+    PreviewImage_previousTransform = ref new MatrixTransform();
+    PreviewImage_previousTransform->Matrix = Matrix::Identity;
+    PreviewImage_deltaTransform = ref new CompositeTransform();
+
+    PreviewImage_transforms->Children->Append(PreviewImage_previousTransform);
+    PreviewImage_transforms->Children->Append(PreviewImage_deltaTransform);
+
+    _PreviewImageRect_->RenderTransform = PreviewImage_transforms;
+}
+
+void RingClientUWP::Views::VideoPage::PreviewImage_ManipulationDelta(Platform::Object^ sender, ManipulationDeltaRoutedEventArgs^ e)
+{
+    _PreviewImageRect_->RenderTransform = PreviewImage_transforms;
+
+    PreviewImage_previousTransform->Matrix = PreviewImage_transforms->Value;
+
+    PreviewImage_deltaTransform->TranslateX = e->Delta.Translation.X;
+    PreviewImage_deltaTransform->TranslateY = e->Delta.Translation.Y;
+
+    computeQuadrant();
+}
+
+void
+RingClientUWP::Views::VideoPage::computeQuadrant()
+{
+    // Compute center coordinate of _videoContent_
+    Point centerOfVideoFrame = Point(   static_cast<float>(_videoContent_->ActualWidth) / 2,
+                                        static_cast<float>(_videoContent_->ActualHeight) / 2        );
+
+    // Compute the center coordinate of _PreviewImage_ relative to _videoContent_
+    Point centerOfPreview = Point( static_cast<float>(_PreviewImage_->ActualWidth) / 2,
+                                   static_cast<float>(_PreviewImage_->ActualHeight) / 2 );
+    UIElement^ container = dynamic_cast<UIElement^>(VisualTreeHelper::GetParent(_videoContent_));
+    GeneralTransform^ transform = _PreviewImage_->TransformToVisual(container);
+    Point relativeCenterOfPreview = transform->TransformPoint(centerOfPreview);
+
+    // Compute the difference between the center of _videoContent_
+    // and the relative scaled center of _PreviewImageRect_
+    Point diff = Point( centerOfVideoFrame.X - relativeCenterOfPreview.X,
+                        centerOfVideoFrame.Y - relativeCenterOfPreview.Y    );
+
+    lastQuadrant = quadrant;
+    if (diff.X > 0)
+        quadrant = diff.Y > 0 ? 2 : 1;
+    else
+        quadrant = diff.Y > 0 ? 3 : 0;
+
+    if (lastQuadrant != quadrant) {
+        arrangeResizer();
+    }
+}
+
+void
+RingClientUWP::Views::VideoPage::arrangeResizer()
+{
+    double scaleValue = (userPreviewHeightModifier + _PreviewImage_->Height) / _PreviewImage_->Height;
+    float scaledWidth = static_cast<float>(scaleValue * _PreviewImage_->ActualWidth);
+    float scaledHeight = static_cast<float>(scaleValue * _PreviewImage_->ActualHeight);
+
+    float rSize = 20; // the size of the square UIElement used to resize the preview
+    float xOffset, yOffset;
+    PointCollection^ resizeTrianglePoints = ref new PointCollection();
+    switch (quadrant)
+    {
+    case 0:
+        xOffset = 0;
+        yOffset = 0;
+        resizeTrianglePoints->Append(Point(xOffset,         yOffset));
+        resizeTrianglePoints->Append(Point(xOffset + rSize, yOffset));
+        resizeTrianglePoints->Append(Point(xOffset,         yOffset + rSize));
+        break;
+    case 1:
+        xOffset = scaledWidth - rSize;
+        yOffset = 0;
+        resizeTrianglePoints->Append(Point(xOffset,         yOffset));
+        resizeTrianglePoints->Append(Point(xOffset + rSize, yOffset));
+        resizeTrianglePoints->Append(Point(xOffset + rSize, yOffset + rSize));
+        break;
+    case 2:
+        xOffset = scaledWidth - rSize;
+        yOffset = scaledHeight - rSize;
+        resizeTrianglePoints->Append(Point(xOffset + rSize, yOffset));
+        resizeTrianglePoints->Append(Point(xOffset + rSize, yOffset + rSize));
+        resizeTrianglePoints->Append(Point(xOffset,         yOffset + rSize));
+        break;
+    case 3: