feat: Implement timelapse calculator application with core logic, UI components, and Gitea deployment workflow.

.gitea/workflows/deploy.yml

@@ -31,4 +31,16 @@ jobs:
             -p 3005:80 \
             timelapse-calc:latest
 
-          docker ps --format "{{.Names}} {{.Image}} {{.Status}}"
+          docker ps --format "{{.Names}} {{.Image}} {{.Status}}"
+
+      - name: Send Deployment Notification
+        uses: actions/deploy-notify@v1
+        if: always()
+        with:
+          status: ${{ job.status }}
+          title: "Deploy: ${{ github.repository }}"
+          message: |
+            Ref: ${{ github.ref_name }}
+            Commit: ${{ github.sha }}
+            Status: ${{ job.status }}
+            Actor: ${{ github.actor }}

src/App.jsx

@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
-import { Card, ConfigProvider } from 'antd';
+import { Card, ConfigProvider, Segmented } from 'antd';
 import Header from './components/Header';
 import CalculatorMode from './components/CalculatorMode';
 import TimeInput from './components/TimeInput';
@@ -13,43 +13,56 @@ function App() {
 
   // State for inputs
   const [clipLength, setClipLength] = useState({ hours: 0, minutes: 0, seconds: 20 });
-  const [eventDuration, setEventDuration] = useState({ hours: 1, minutes: 0, seconds: 0 });
+  const [eventDuration, setEventDuration] = useState({ hours: 0, minutes: 40, seconds: 0 });
+  const [intervalInput, setIntervalInput] = useState(2); // Seconds
   const [fps, setFps] = useState(30);
-  const [imageSize, setImageSize] = useState(12);
-
-  // State for results
-  const [shootingInterval, setShootingInterval] = useState(0);
-  const [numberOfPhotos, setNumberOfPhotos] = useState(0);
-  const [totalMemory, setTotalMemory] = useState(0);
 
   // Helper function to convert time object to seconds
   const timeToSeconds = (time) => {
     return time.hours * 3600 + time.minutes * 60 + time.seconds;
   };
 
-  // Calculate results whenever inputs change
+  // Helper to convert seconds to time object (for derived values if needed, but we output seconds)
-  useEffect(() => {
+  // ...
-    const clipSeconds = timeToSeconds(clipLength);
-    const eventSeconds = timeToSeconds(eventDuration);
 
-    if (clipSeconds > 0 && eventSeconds > 0 && fps > 0) {
+  // Calculate results
-      // Calculate shooting interval (in seconds)
+  const calculateResults = () => {
-      const interval = eventSeconds / (clipSeconds * fps);
+    const clipSec = timeToSeconds(clipLength);
-      setShootingInterval(interval);
+    const eventSec = timeToSeconds(eventDuration);
 
-      // Calculate number of photos
+    let photos = 0;
-      const photos = Math.ceil(eventSeconds / interval);
+    let result = 0;
-      setNumberOfPhotos(photos);
 
-      // Calculate total memory (in MB)
+    if (mode === 'shooting-interval') {
-      const memory = photos * imageSize;
+      if (clipSec > 0 && fps > 0) {
-      setTotalMemory(memory);
+        result = eventSec / (clipSec * fps);
-    } else {
+        if (result > 0) photos = Math.ceil(eventSec / result);
-      setShootingInterval(0);
+      }
-      setNumberOfPhotos(0);
+    } else if (mode === 'clip-length') {
-      setTotalMemory(0);
+      if (intervalInput > 0 && fps > 0) {
+        result = eventSec / (intervalInput * fps);
+        photos = Math.ceil(eventSec / intervalInput);
+      }
+    } else if (mode === 'event-duration') {
+      if (clipSec > 0 && intervalInput > 0 && fps > 0) {
+        result = clipSec * fps * intervalInput;
+        photos = Math.ceil(result / intervalInput);
+      }
     }
-  }, [clipLength, eventDuration, fps, imageSize]);
+
+    return { resultSeconds: result, numberOfPhotos: photos };
+  };
+
+  const { resultSeconds, numberOfPhotos } = calculateResults();
+
+  const getResultLabel = () => {
+    switch (mode) {
+      case 'shooting-interval': return "Shooting Interval";
+      case 'clip-length': return "Clip Length";
+      case 'event-duration': return "Event Duration";
+      default: return "Result";
+    }
+  };
 
   return (
     <ConfigProvider
@@ -68,6 +81,11 @@ function App() {
           InputNumber: {
             controlHeight: 44,
           },
+          Segmented: {
+            itemSelectedBg: '#F4D03F',
+            itemSelectedColor: '#2C3E50',
+            trackBg: '#F8F9FA'
+          }
         },
       }}
     >
@@ -77,44 +95,62 @@ function App() {
           <Card className="calculator-card">
             <CalculatorMode value={mode} onChange={setMode} />
 
-            <TimeInput
+            {mode !== 'clip-length' && (
-              label="Clip length"
+              <TimeInput
-              hours={clipLength.hours}
+                label="Clip length"
-              minutes={clipLength.minutes}
+                hours={clipLength.hours}
-              seconds={clipLength.seconds}
+                minutes={clipLength.minutes}
-              onChange={setClipLength}
+                seconds={clipLength.seconds}
-            />
+                onChange={setClipLength}
+              />
+            )}
 
-            <TimeInput
+            {mode !== 'event-duration' && (
-              label="Event duration"
+              <TimeInput
-              hours={eventDuration.hours}
+                label="Event duration"
-              minutes={eventDuration.minutes}
+                hours={eventDuration.hours}
-              seconds={eventDuration.seconds}
+                minutes={eventDuration.minutes}
-              onChange={setEventDuration}
+                seconds={eventDuration.seconds}
-            />
+                onChange={setEventDuration}
+              />
+            )}
 
-            <NumberInput
+            {mode !== 'shooting-interval' && (
-              label="Frames per second"
+              <NumberInput
-              value={fps}
+                label="Shooting Interval (sec)"
-              onChange={setFps}
+                value={intervalInput}
-              unit="fps"
+                onChange={setIntervalInput}
-              min={1}
+                unit="s"
-              step={1}
+                min={0.1}
-            />
+                step={0.1}
+              />
+            )}
 
-            <NumberInput
+            <div className="form-row">
-              label="Image size"
+              <label className="form-label">Frames per second</label>
-              value={imageSize}
+              <Segmented
-              onChange={setImageSize}
+                options={[
-              unit="MB"
+                  { label: '24', value: 24 },
-              min={0.1}
+                  { label: '30', value: 30 },
-              step={0.1}
+                  { label: '60', value: 60 },
-            />
+                ]}
+                value={fps}
+                onChange={setFps}
+                block
+                size="large"
+                style={{
+                  backgroundColor: '#F8F9FA',
+                  padding: 4,
+                  borderRadius: 8,
+                  border: '1px solid #DEE2E6'
+                }}
+              />
+            </div>
 
             <Results
-              shootingInterval={shootingInterval}
+              label={getResultLabel()}
+              resultSeconds={resultSeconds}
               numberOfPhotos={numberOfPhotos}
-              totalMemory={totalMemory}
             />
           </Card>
         </div>

src/components/Results.jsx

@@ -1,9 +1,11 @@
 import { Statistic, Row, Col } from 'antd';
 
-export default function Results({ shootingInterval, numberOfPhotos, totalMemory }) {
+export default function Results({ label, resultSeconds, numberOfPhotos }) {
     const formatTime = (seconds) => {
+        if (!seconds) return '0s';
         if (seconds < 60) {
-            return `${seconds.toFixed(0)}s`;
+            // For interval, we might want decimals. For others, maybe not strictly required but harmless.
+            return `${parseFloat(seconds.toFixed(1))}s`;
         } else if (seconds < 3600) {
             const mins = Math.floor(seconds / 60);
             const secs = Math.floor(seconds % 60);
@@ -16,38 +18,23 @@ export default function Results({ shootingInterval, numberOfPhotos, totalMemory
         }
     };
 
-    const formatMemory = (mb) => {
-        if (mb < 1024) {
-            return `${mb.toFixed(2)}MB`;
-        } else {
-            return `${(mb / 1024).toFixed(2)}GB`;
-        }
-    };
-
     return (
         <div className="results-section">
             <Row gutter={[16, 16]}>
-                <Col xs={24} sm={8}>
+                <Col xs={24} sm={12}>
                     <Statistic
-                        title="Shooting interval"
+                        title={label}
-                        value={formatTime(shootingInterval)}
+                        value={formatTime(resultSeconds)}
                         valueStyle={{ color: '#2C3E50', fontSize: '1.5rem', fontWeight: 600 }}
                     />
                 </Col>
-                <Col xs={24} sm={8}>
+                <Col xs={24} sm={12}>
                     <Statistic
                         title="Number of photos"
                         value={numberOfPhotos}
                         valueStyle={{ color: '#2C3E50', fontSize: '1.5rem', fontWeight: 600 }}
                     />
                 </Col>
-                <Col xs={24} sm={8}>
-                    <Statistic
-                        title="Total memory usage"
-                        value={formatMemory(totalMemory)}
-                        valueStyle={{ color: '#2C3E50', fontSize: '1.5rem', fontWeight: 600 }}
-                    />
-                </Col>
             </Row>
         </div>
     );