feat: Video Trimmer and more

2025-12-09 05:32:31 -05:00 · 2025-06-11 14:48:30 +03:00
parent d34fc328bf
commit b28c2d8271
124 changed files with 15696 additions and 586 deletions
--- a/frontend-tools/video-editor/client/src/styles/IOSNotification.css
+++ b/frontend-tools/video-editor/client/src/styles/IOSNotification.css
@@ -0,0 +1,167 @@
+.ios-notification {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background-color: #fffdeb;
+  border-bottom: 1px solid #e2e2e2;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  padding: 10px;
+  animation: slide-down 0.5s ease-in-out;
+}
+
+@keyframes slide-down {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.ios-notification-content {
+  max-width: 600px;
+  margin: 0 auto;
+  display: flex;
+  align-items: flex-start;
+  position: relative;
+  padding: 0 10px;
+}
+
+.ios-notification-icon {
+  flex-shrink: 0;
+  color: #0066cc;
+  margin-right: 15px;
+  margin-top: 3px;
+}
+
+.ios-notification-message {
+  flex-grow: 1;
+}
+
+.ios-notification-message h3 {
+  margin: 0 0 5px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #000;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.ios-notification-message p {
+  margin: 0 0 8px 0;
+  font-size: 14px;
+  color: #333;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.ios-notification-message ol {
+  margin: 0;
+  padding-left: 20px;
+  font-size: 14px;
+  color: #333;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.ios-notification-message li {
+  margin-bottom: 3px;
+}
+
+.ios-notification-close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  background: none;
+  border: none;
+  color: #666;
+  cursor: pointer;
+  padding: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.2s;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.ios-notification-close:hover {
+  color: #000;
+}
+
+/* Desktop mode button styling */
+.ios-mode-options {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.ios-desktop-mode-btn {
+  background-color: #0066cc;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  margin-bottom: 6px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  -webkit-tap-highlight-color: transparent;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.ios-desktop-mode-btn:hover {
+  background-color: #0055aa;
+}
+
+.ios-desktop-mode-btn:active {
+  background-color: #004499;
+  transform: scale(0.98);
+}
+
+.ios-or {
+  font-size: 12px;
+  color: #666;
+  margin: 0 0 6px 0;
+  font-style: italic;
+}
+
+/* iOS-specific styles */
+@supports (-webkit-touch-callout: none) {
+  .ios-notification {
+    padding-top: env(safe-area-inset-top);
+  }
+  
+  .ios-notification-close {
+    padding: 10px;
+  }
+}
+
+/* Make sure this notification has better visibility on smaller screens */
+@media (max-width: 480px) {
+  .ios-notification-content {
+    padding: 5px;
+  }
+  
+  .ios-notification-message h3 {
+    font-size: 15px;
+  }
+  
+  .ios-notification-message p,
+  .ios-notification-message ol {
+    font-size: 13px;
+  }
+}
+
+/* Add iOS-specific styles when in desktop mode */
+html.ios-device {
+  /* Force the content to be rendered at desktop width */
+  min-width: 1024px;
+  overflow-x: auto;
+}
+
+html.ios-device .ios-control-btn {
+  /* Make buttons easier to tap in desktop mode */
+  min-height: 44px;
+}