frame on preview: fix for rotated preview

Change-Id: I48a678ac3928f9420209fe3fa9fdf2ccb0506a0f
PhotoboothProject · Sep 29, 2022 · 22e4335 · 22e4335
1 parent 65d2c3f
commit 22e4335
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git a/index.php b/index.php
@@ -81,8 +81,8 @@
 </head>
 
 <body class="deselect">
-<img id="picture--frame" src="<?php echo $config['picture']['htmlframe']; ?>" alt="pictureFrame" />
-<img id="collage--frame" src="<?php echo $config['collage']['htmlframe']; ?>" alt="collageFrame" />
+<img id="picture--frame" class="<?php echo $config['preview']['flip']; ?>" src="<?php echo $config['picture']['htmlframe']; ?>" alt="pictureFrame" />
+<img id="collage--frame" class="<?php echo $config['preview']['flip']; ?>" src="<?php echo $config['collage']['htmlframe']; ?>" alt="collageFrame" />
 <video id="video--view" class="<?php echo $config['preview']['flip']; ?> <?php echo $config['preview']['style']; ?>"
        autoplay playsinline></video>
 <div id="blocker"></div>

diff --git a/src/sass/partials/_video_preview.scss b/src/sass/partials/_video_preview.scss
@@ -70,8 +70,16 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  width: 100%;
-  height: 100%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate($previewRotation);
   position: absolute;
-  top: 0;
+  height: 100%;
+  width: 100%;
+  &.flip-horizontal {
+    transform: translate(-50%, -50%) rotate($previewRotation) scalex(-1);
+  }
+  &.flip-vertical {
+    transform: translate(-50%, -50%) rotate($previewRotation) scaleY(-1);
+  }
 }