Segment demo video by scene with embedded GIF segments (#990)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: thomasnordquist <7721625+thomasnordquist@users.noreply.github.com>

.github/workflows/tests.yml

@@ -80,12 +80,12 @@ jobs:
         run: yarn ui-test
       - name: Post-processing
         run: ./scripts/prepareVideo.sh
-      - name: Generate unique filename
-        id: filename
+      - name: Generate unique base path
+        id: basepath
         run: |
           TIMESTAMP=$(date +%Y%m%d-%H%M%S)
-          FILENAME="pr-${{ github.event.pull_request.number }}-${TIMESTAMP}.gif"
-          echo "filename=${FILENAME}" >> $GITHUB_OUTPUT
+          BASEPATH="pr-${{ github.event.pull_request.number }}-${TIMESTAMP}"
+          echo "basepath=${BASEPATH}" >> $GITHUB_OUTPUT
       - name: Install AWS CLI v2
         run: |
           apt-get update && apt-get install -y unzip
@@ -99,44 +99,76 @@ jobs:
           aws-access-key-id: ${{ vars.AWS_KEY_ID }}
           aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
           aws-region: 'eu-central-1'
-      - name: Upload to S3
-        id: upload
+      - name: Upload full video to S3
         env:
           AWS_BUCKET: ${{ vars.AWS_BUCKET }}
-          FILENAME: ${{ steps.filename.outputs.filename }}
+          BASEPATH: ${{ steps.basepath.outputs.basepath }}
         run: |
+          # Upload GIF
           aws s3api put-object \
             --bucket ${AWS_BUCKET} \
-            --key artifacts/${FILENAME} \
+            --key artifacts/${BASEPATH}/ui-test.gif \
             --body ./ui-test.gif \
             --content-type image/gif
-      - name: Generate file URL
+          
+          # Upload MP4
+          aws s3api put-object \
+            --bucket ${AWS_BUCKET} \
+            --key artifacts/${BASEPATH}/ui-test.mp4 \
+            --body ./ui-test.mp4 \
+            --content-type video/mp4
+      - name: Upload video segments to S3
+        env:
+          AWS_BUCKET: ${{ vars.AWS_BUCKET }}
+          BASEPATH: ${{ steps.basepath.outputs.basepath }}
+        run: |
+          # Upload all GIF segment files if they exist
+          shopt -s nullglob  # Make glob return empty list if no matches
+          for segment in segment-*.gif; do
+            echo "Uploading $segment..."
+            aws s3api put-object \
+              --bucket ${AWS_BUCKET} \
+              --key artifacts/${BASEPATH}/${segment} \
+              --body ./${segment} \
+              --content-type image/gif
+          done
+          shopt -u nullglob  # Restore default behavior
+      - name: Generate file URLs
         id: fileurl
         env:
           AWS_BUCKET: ${{ vars.AWS_BUCKET }}
-          FILENAME: ${{ steps.filename.outputs.filename }}
+          BASEPATH: ${{ steps.basepath.outputs.basepath }}
         run: |
-          FILE_URL="https://${AWS_BUCKET}.s3.eu-central-1.amazonaws.com/artifacts/${FILENAME}"
-          echo "file-url=${FILE_URL}" >> $GITHUB_OUTPUT
-          echo "Uploaded to: ${FILE_URL}"
-      - name: Show URL
-        run: echo '${{ steps.fileurl.outputs.file-url }}'
-        id: artifact-upload-step
-      - run: echo '<picture><img src="${{ steps.fileurl.outputs.file-url }}"></picture>' \
-          >> $GITHUB_STEP_SUMMARY
+          BASE_URL="https://${AWS_BUCKET}.s3.eu-central-1.amazonaws.com/artifacts/${BASEPATH}"
+          echo "base-url=${BASE_URL}" >> $GITHUB_OUTPUT
+          echo "Uploaded to: ${BASE_URL}"
+      - name: Generate markdown summary
+        id: markdown
+        env:
+          BASE_URL: ${{ steps.fileurl.outputs.base-url }}
+        run: |
+          MARKDOWN=$(node ./scripts/generateMarkdownSummary.js "${BASE_URL}")
+          echo "markdown<<EOF" >> $GITHUB_OUTPUT
+          echo "$MARKDOWN" >> $GITHUB_OUTPUT
+          echo "EOF" >> $GITHUB_OUTPUT
+      - name: Add to workflow summary
+        env:
+          MARKDOWN: ${{ steps.markdown.outputs.markdown }}
+        run: |
+          echo "$MARKDOWN" >> $GITHUB_STEP_SUMMARY
       - name: Post video to PR
         uses: actions/github-script@v7
         env:
-          VIDEO_URL: ${{ steps.fileurl.outputs.file-url }}
+          MARKDOWN: ${{ steps.markdown.outputs.markdown }}
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
-            const videoUrl = process.env.VIDEO_URL;
+            const markdown = process.env.MARKDOWN;
             github.rest.issues.createComment({
               owner: context.repo.owner,
               repo: context.repo.repo,
               issue_number: context.issue.number,
-              body: `## 🎬 Demo Video Generated\n\n![Demo Video](${videoUrl})\n\n_This video will expire in 90 days._`
+              body: markdown
             });
 
   test-browser: