Prepare v1.4.1 Release

This commit fixes the following warnings for the web build:

```
Warning: In index.html:38: Local variable for "serviceWorkerVersion" is deprecated. Use "{{flutter_service_worker_version}}" template token instead.
Warning: In index.html:60: "FlutterLoader.loadEntrypoint" is deprecated. Use "FlutterLoader.load" instead.
```

To re-add the slash screen we alsow run the
`flutter pub run flutter_native_splash:create` command again, which also
updated the splash screens for iOS and Android.

Last but not least this commit also fixes the following warnings for the
Windows build:

```
windows/runner/flutter_window.cpp does not ensure the show window callback is called, updating.
windows/flutter/CMakeLists.txt does not use FLUTTER_TARGET_PLATFORM, updating.
```

.github/dependabot.yml

@@ -4,6 +4,8 @@ updates:
     directory: "/"
     schedule:
       interval: "monthly"
+    assignees:
+      - "ricoberger"
     groups:
       github-actions:
         patterns:
@@ -13,6 +15,8 @@ updates:
     directory: "/app"
     schedule:
       interval: "monthly"
+    assignees:
+      - "ricoberger"
     groups:
       pub:
         patterns:
@@ -22,6 +26,8 @@ updates:
     directory: "/supabase/functions/_cmd"
     schedule:
       interval: "monthly"
+    assignees:
+      - "ricoberger"
     groups:
       docker:
         patterns:
@@ -31,16 +37,9 @@ updates:
     directory: "/landing"
     schedule:
       interval: "monthly"
+    assignees:
+      - "ricoberger"
     groups:
-      npm-landing:
-        patterns:
-          - "*"
-
-  - package-ecosystem: "npm"
-    directory: "/supabase/email-templates"
-    schedule:
-      interval: "monthly"
-    groups:
-      npm-email-templates:
+      npm:
         patterns:
           - "*"

.github/workflows/continuous-delivery.yaml

@@ -50,7 +50,7 @@ jobs:
 
       - name: Build and Push Docker Image
         id: docker_build
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@v6
         with:
           push: true
           context: ./supabase/functions
@@ -87,11 +87,12 @@ jobs:
 
           supabase db push
 
-          supabase functions deploy add-source-v1 --project-ref $PROJECT_ID --import-map supabase/functions/import_map.json
+          supabase functions deploy add-or-update-source-v1 --project-ref $PROJECT_ID --import-map supabase/functions/import_map.json
+          # supabase functions deploy add-source-v1 --project-ref $PROJECT_ID --import-map supabase/functions/import_map.json
           supabase functions deploy delete-user-v1 --project-ref $PROJECT_ID --import-map supabase/functions/import_map.json
           supabase functions deploy generate-magic-link-v1 --project-ref $PROJECT_ID --import-map supabase/functions/import_map.json
           supabase functions deploy image-proxy-v1 --no-verify-jwt --project-ref $PROJECT_ID --import-map supabase/functions/import_map.json
-          supabase functions deploy profile-v1 --project-ref $PROJECT_ID --import-map supabase/functions/import_map.json
+          # supabase functions deploy profile-v1 --project-ref $PROJECT_ID --import-map supabase/functions/import_map.json
           supabase functions deploy profile-v2 --project-ref $PROJECT_ID --import-map supabase/functions/import_map.json
           supabase functions deploy revenuecat-webhooks-v1 --no-verify-jwt --project-ref $PROJECT_ID --import-map supabase/functions/import_map.json
           supabase functions deploy stripe-create-billing-portal-link-v1 --project-ref $PROJECT_ID --import-map supabase/functions/import_map.json
@@ -109,6 +110,7 @@ jobs:
 
           supabase db push
 
+          supabase functions deploy add-or-update-source-v1 --project-ref $PROJECT_ID --import-map supabase/functions/import_map.json
           supabase functions deploy add-source-v1 --project-ref $PROJECT_ID --import-map supabase/functions/import_map.json
           supabase functions deploy delete-user-v1 --project-ref $PROJECT_ID --import-map supabase/functions/import_map.json
           supabase functions deploy generate-magic-link-v1 --project-ref $PROJECT_ID --import-map supabase/functions/import_map.json
@@ -120,12 +122,14 @@ jobs:
           supabase functions deploy stripe-create-checkout-session-v1 --project-ref $PROJECT_ID --import-map supabase/functions/import_map.json
           supabase functions deploy stripe-webhooks-v1 --no-verify-jwt --project-ref $PROJECT_ID --import-map supabase/functions/import_map.json
 
-  # The "Web" job builds the Flutter web app and publishes it to Cloudflare Pages. The job only runs when a commit is
-  # pushed to the main branch or a new tag is created.
+  # The "Web" job builds the Flutter web app and publishes it to Cloudflare Pages. The job only runs on pull requests or
+  # when a commit is pushed to the main branch or a new tag is created.
+  #
+  # When the job runs on a pull request it only builds the app but doesn't upload the build to Cloudflare.
   web:
     name: Web
     runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/main' || (github.event_name == 'release' && github.event.action == 'published')
+    if: github.event_name == 'pull_request' || github.ref == 'refs/heads/main' || (github.event_name == 'release' && github.event.action == 'published')
     permissions:
       contents: read
     defaults:
@@ -166,7 +170,7 @@ jobs:
       - name: Setup Flutter
         uses: subosito/flutter-action@v2
         with:
-          flutter-version: '3.13.7'
+          flutter-version: '3.22.2'
           channel: 'stable'
           cache: true
           cache-key: 'flutter-:os:-:channel:-:version:-:arch:-:hash:'
@@ -183,6 +187,7 @@ jobs:
 
       - name: Publish to Cloudflare Pages
         uses: cloudflare/pages-action@v1
+        if: github.ref == 'refs/heads/main' || (github.event_name == 'release' && github.event.action == 'published')
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
@@ -194,7 +199,7 @@ jobs:
   # runs for pull requests and when a new release is published.
   macos:
     name: macOS
-    runs-on: macos-latest
+    runs-on: macos-14
     if: github.event_name == 'pull_request' || (github.event_name == 'release' && github.event.action == 'published')
     permissions:
       contents: write
@@ -209,7 +214,7 @@ jobs:
       - name: Setup Flutter
         uses: subosito/flutter-action@v2
         with:
-          flutter-version: '3.13.7'
+          flutter-version: '3.22.2'
           channel: 'stable'
           cache: true
           cache-key: 'flutter-:os:-:channel:-:version:-:arch:-:hash:'
@@ -230,7 +235,7 @@ jobs:
 
       - name: Upload Artifacts (PR)
         if: ${{ github.event_name == 'pull_request' }}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: feeddeck-macos-universal.zip
           path: app/build/macos/Build/Products/Release/feeddeck-macos-universal.zip
@@ -243,10 +248,10 @@ jobs:
           upload_url: ${{ github.event.release.upload_url }}
           asset_path: app/build/macos/Build/Products/Release/feeddeck-macos-universal.zip
 
-  # The "Linux" job builds the Flutter Linux app and uploads it to the GitHub release or the pull request. The job only
-  # runs for pull requests and when a new release is published.
-  linux:
-    name: Linux
+  # The "Linux (x86_64)" job builds the Flutter Linux app and uploads it to the GitHub release or the pull request. The
+  # job only runs for pull requests and when a new release is published.
+  linux-x86_64:
+    name: Linux (x86_64)
     runs-on: ubuntu-latest
     if: github.event_name == 'pull_request' || (github.event_name == 'release' && github.event.action == 'published')
     permissions:
@@ -271,7 +276,7 @@ jobs:
       - name: Setup Flutter
         uses: subosito/flutter-action@v2
         with:
-          flutter-version: '3.13.7'
+          flutter-version: '3.22.2'
           channel: 'stable'
           cache: true
           cache-key: 'flutter-:os:-:channel:-:version:-:arch:-:hash:'
@@ -297,7 +302,7 @@ jobs:
 
       - name: Upload Artifacts (PR)
         if: ${{ github.event_name == 'pull_request' }}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: feeddeck-linux-x86_64.tar.gz
           path: app/build/feeddeck-linux-x86_64.tar.gz
@@ -310,11 +315,82 @@ jobs:
           upload_url: ${{ github.event.release.upload_url }}
           asset_path: app/build/feeddeck-linux-x86_64.tar.gz
 
+  # The "Linux (arm64)" job builds the Flutter Linux app and uploads it to the GitHub release or the pull request. The
+  # job only runs for pull requests and when a new release is published.
+  #
+  # NOTE: Normally this job should run for every pull request and when a new release is published, but since we have to
+  # pay for the "ubicloud-standard-2-arm" runner, we only run the job when a new release is published.
+  linux-arm64:
+    name: Linux (arm64)
+    runs-on: ubicloud-standard-2-arm
+    if: github.event_name == 'release' && github.event.action == 'published'
+    # if: github.event_name == 'pull_request' || (github.event_name == 'release' && github.event.action == 'published')
+    permissions:
+      contents: write
+    defaults:
+      run:
+        working-directory: "app"
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install Packages
+        run: |
+          # Required for Flutter
+          sudo apt-get update -y
+          sudo apt-get install -y ninja-build libgtk-3-dev
+          # Required for Package "media_kit" which is used via "just_audio_media_kit" for Linux and Windows:
+          # See: https://pub.dev/packages/media_kit and https://pub.dev/packages/just_audio_media_kit
+          sudo apt-get install -y libmpv-dev mpv
+
+      - name: Setup Flutter
+        uses: subosito/flutter-action@v2
+        with:
+          flutter-version: '3.22.2'
+          channel: 'master'
+          cache: true
+          cache-key: 'flutter-:os:-:channel:-:version:-:arch:-:hash:'
+          cache-path: '${{ runner.tool_cache }}/flutter/:channel:-:version:-:arch:'
+
+      - name: Install Dependencies
+        run: |
+          flutter pub get
+
+      - name: Build
+        run: |
+          flutter config --enable-linux-desktop
+          flutter build linux --release --dart-define SUPABASE_URL=${{ secrets.SUPABASE_PROD_URL }} --dart-define SUPABASE_ANON_KEY=${{ secrets.SUPABASE_PROD_ANON_KEY }} --dart-define SUPABASE_SITE_URL=${{ secrets.SUPABASE_PROD_SITE_URL }} --dart-define GOOGLE_CLIENT_ID=${{ secrets.SUPABASE_PROD_GOOGLE_CLIENT_ID }}
+
+      - name: Package
+        run: |
+          cp linux/flatpak/app.feeddeck.feeddeck.desktop build/linux/arm64/release/bundle/
+          cp linux/flatpak/app.feeddeck.feeddeck.metainfo.xml build/linux/arm64/release/bundle/
+          cp linux/flatpak/app.feeddeck.feeddeck.svg build/linux/arm64/release/bundle/
+          cd build
+          cp -r linux/arm64/release/bundle/ feeddeck-linux-arm64
+          tar -czf feeddeck-linux-arm64.tar.gz feeddeck-linux-arm64
+
+      - name: Upload Artifacts (PR)
+        if: ${{ github.event_name == 'pull_request' }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: feeddeck-linux-arm64.tar.gz
+          path: app/build/feeddeck-linux-arm64.tar.gz
+          if-no-files-found: error
+
+      - name: Upload Artifacts (Release)
+        uses: shogo82148/actions-upload-release-asset@v1
+        if: ${{ github.event_name == 'release' && github.event.action == 'published' }}
+        with:
+          upload_url: ${{ github.event.release.upload_url }}
+          asset_path: app/build/feeddeck-linux-arm64.tar.gz
+
   # The "Windows" job builds the Flutter Windows app and uploads it to the GitHub release or the pull request. The job
   # only runs for pull requests and when a new release is published.
   windows:
     name: Windows
-    runs-on: windows-latest
+    runs-on: windows-2019
     if: github.event_name == 'pull_request' || (github.event_name == 'release' && github.event.action == 'published')
     permissions:
       contents: write
@@ -329,7 +405,7 @@ jobs:
       - name: Setup Flutter
         uses: subosito/flutter-action@v2
         with:
-          flutter-version: '3.13.7'
+          flutter-version: '3.22.2'
           channel: 'stable'
           cache: true
           cache-key: 'flutter-:os:-:channel:-:version:-:arch:-:hash:'
@@ -343,19 +419,22 @@ jobs:
         run: |
           flutter config --enable-windows-desktop
           flutter build windows --release --dart-define SUPABASE_URL=${{ secrets.SUPABASE_PROD_URL }} --dart-define SUPABASE_ANON_KEY=${{ secrets.SUPABASE_PROD_ANON_KEY }} --dart-define SUPABASE_SITE_URL=${{ secrets.SUPABASE_PROD_SITE_URL }} --dart-define GOOGLE_CLIENT_ID=${{ secrets.SUPABASE_PROD_GOOGLE_CLIENT_ID }}
+      - name: Create Archive
+        run: |
+          Compress-Archive -Path build/windows/x64/runner/Release/* -Destination feeddeck-windows-x86_64.zip
 
       - name: Package
         run: |
           flutter pub run msix:create --output-path build --output-name feeddeck
           cd build
-          7z a -tzip feeddeck-windows-x86_64.zip feeddeck.msix
+          7z a -tzip feeddeck-windows-x86_64-msix.zip feeddeck.msix
 
       - name: Upload Artifacts (PR)
         if: ${{ github.event_name == 'pull_request' }}
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: feeddeck-windows-x86_64.zip
-          path: app/build/feeddeck-windows-x86_64.zip
+          path: app/feeddeck-windows-x86_64.zip
           if-no-files-found: error
 
       - name: Upload Artifacts (Release)
@@ -363,4 +442,86 @@ jobs:
         if: ${{ github.event_name == 'release' && github.event.action == 'published' }}
         with:
           upload_url: ${{ github.event.release.upload_url }}
-          asset_path: app/build/feeddeck-windows-x86_64.zip
+          asset_path: app/feeddeck-windows-x86_64.zip
+
+      - name: Upload Artifacts (PR)
+        if: ${{ github.event_name == 'pull_request' }}
+        uses: actions/upload-artifact@v4
+        with:
+          name: feeddeck-windows-x86_64-msix.zip
+          path: app/build/feeddeck-windows-x86_64-msix.zip
+          if-no-files-found: error
+
+      - name: Upload Artifacts (Release)
+        uses: shogo82148/actions-upload-release-asset@v1
+        if: ${{ github.event_name == 'release' && github.event.action == 'published' }}
+        with:
+          upload_url: ${{ github.event.release.upload_url }}
+          asset_path: app/build/feeddeck-windows-x86_64-msix.zip
+
+  # The "iOS" job builds the Flutter iOS app on every pull request. This is only used to test that the build of the iOS
+  # app works. The artifact of the build isn't uploaded / used.
+  ios:
+    name: iOS
+    runs-on: macos-14
+    if: github.event_name == 'pull_request' || (github.event_name == 'release' && github.event.action == 'published')
+    defaults:
+      run:
+        working-directory: "app"
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Flutter
+        uses: subosito/flutter-action@v2
+        with:
+          flutter-version: '3.22.2'
+          channel: 'stable'
+          cache: true
+          cache-key: 'flutter-:os:-:channel:-:version:-:arch:-:hash:'
+          cache-path: '${{ runner.tool_cache }}/flutter/:channel:-:version:-:arch:'
+
+      - name: Install Dependencies
+        run: |
+          flutter pub get
+
+      - name: Build
+        run: |
+          flutter config --enable-ios
+          flutter build ipa --no-codesign --release --dart-define SUPABASE_URL=${{ secrets.SUPABASE_PROD_URL }} --dart-define SUPABASE_ANON_KEY=${{ secrets.SUPABASE_PROD_ANON_KEY }} --dart-define SUPABASE_SITE_URL=${{ secrets.SUPABASE_PROD_SITE_URL }} --dart-define GOOGLE_CLIENT_ID=${{ secrets.SUPABASE_PROD_GOOGLE_CLIENT_ID }}
+
+  # The "Android" job builds the Flutter Android app on every pull request. This is only used to test that the build of
+  # the Android app works. The artifact of the build isn't uploaded / used.
+  android:
+    name: Android
+    runs-on: ubuntu-latest
+    if: github.event_name == 'pull_request' || (github.event_name == 'release' && github.event.action == 'published')
+    defaults:
+      run:
+        working-directory: "app"
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Java
+        run: echo "JAVA_HOME=$JAVA_HOME_17_X64" >> $GITHUB_ENV
+
+      - name: Setup Flutter
+        uses: subosito/flutter-action@v2
+        with:
+          flutter-version: '3.22.2'
+          channel: 'stable'
+          cache: true
+          cache-key: 'flutter-:os:-:channel:-:version:-:arch:-:hash:'
+          cache-path: '${{ runner.tool_cache }}/flutter/:channel:-:version:-:arch:'
+
+      - name: Install Dependencies
+        run: |
+          flutter pub get
+
+      - name: Build
+        run: |
+          flutter config --enable-android
+          flutter build appbundle --release --dart-define SUPABASE_URL=${{ secrets.SUPABASE_PROD_URL }} --dart-define SUPABASE_ANON_KEY=${{ secrets.SUPABASE_PROD_ANON_KEY }} --dart-define SUPABASE_SITE_URL=${{ secrets.SUPABASE_PROD_SITE_URL }} --dart-define GOOGLE_CLIENT_ID=${{ secrets.SUPABASE_PROD_GOOGLE_CLIENT_ID }}

.github/workflows/continuous-integration.yaml

@@ -0,0 +1,53 @@
+name: Continuous Integration
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  flutter:
+    name: Flutter
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: "app"
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Flutter
+        uses: subosito/flutter-action@v2
+        with:
+          flutter-version: '3.22.2'
+          channel: 'stable'
+          cache: true
+          cache-key: 'flutter-:os:-:channel:-:version:-:arch:-:hash:'
+          cache-path: '${{ runner.tool_cache }}/flutter/:channel:-:version:-:arch:'
+
+      - name: Install Dependencies
+        run: |
+          flutter pub get
+
+      - name: Test
+        run: |
+          flutter test
+
+  deno:
+    name: Deno
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Deno
+        uses: denoland/setup-deno@v1
+        with:
+          deno-version: v1.x
+
+      - name: Test
+        run: |
+          deno test --allow-env --import-map=supabase/functions/import_map.json supabase/functions

.github/workflows/release.yaml

@@ -16,7 +16,7 @@ jobs:
 
     steps:
       - name: Update Changelog
-        uses: release-drafter/release-drafter@v5
+        uses: release-drafter/release-drafter@v6
         with:
           config-name: release.yaml
           disable-autolabeler: true
@@ -40,14 +40,14 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: "16"
+          node-version: "20"
           cache: npm
           cache-dependency-path: landing/package-lock.json
 
       - name: Setup Pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v5
 
       - name: Install Dependencies
         run: |
@@ -58,7 +58,7 @@ jobs:
           npm run build
 
       - name: Upload Artifact
-        uses: actions/upload-pages-artifact@v2
+        uses: actions/upload-pages-artifact@v3
         with:
           path: ./landing/out
 
@@ -78,4 +78,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

.gitignore

@@ -1,8 +1,11 @@
-# Visual Studio Code Launch Configurations
-.vscode/launch.json
+# Visual Studio Code
+.vscode
 
 # Environment Variables
 /supabase/.env.local
 /supabase/.env.dev
 /supabase/.env.stage
 /supabase/.env.prod
+
+# Deno
+/coverage_deno

.vscode/settings.json

@@ -1,17 +0,0 @@
-{
-  "deno.enable": true,
-  "deno.unstable": true,
-  "deno.lint": true,
-  "deno.enablePaths": [
-    "./supabase/functions"
-  ],
-  "deno.importMap": "./supabase/functions/import_map.json",
-  "editor.formatOnSave": true,
-  "editor.defaultFormatter": "denoland.vscode-deno",
-  "[json]": {
-    "editor.defaultFormatter": "vscode.json-language-features"
-  },
-  "[html]": {
-    "editor.defaultFormatter": "vscode.html-language-features"
-  }
-}

CONTRIBUTING.md

@@ -57,100 +57,46 @@ check your installed version:
 ```sh
 $ flutter --version
 
-Flutter 3.13.7 • channel stable • https://github.com/flutter/flutter.git
-Framework • revision 2f708eb839 (4 days ago) • 2023-10-09 09:58:08 -0500
-Engine • revision a794cf2681
-Tools • Dart 3.1.3 • DevTools 2.25.0
-
+Flutter 3.22.2 • channel stable • https://github.com/flutter/flutter.git
+Framework • revision 761747bfc5 (3 days ago) • 2024-06-05 22:15:13 +0200
+Engine • revision edd8546116
+Tools • Dart 3.4.3 • DevTools 2.34.3
 
 $ deno --version
-deno 1.36.4 (release, aarch64-apple-darwin)
-v8 11.6.189.12
-typescript 5.1.6
+
+deno 1.40.2 (release, aarch64-apple-darwin)
+v8 12.1.285.6
+typescript 5.3.3
 ```
 
 ### Working with Flutter
 
-We are recommending to use the
-[Visual Studio Code](https://docs.flutter.dev/development/tools/vs-code)
-extensions for development.
+To run the app you can use the [`run.sh`](./app/run.sh) script, which will
+automatically load the `.env` file from the Supabase project and passes the
+required variables to the `flutter run` command:
 
-The easiest way to run the Flutter app within Visual Studio Code is to create a
-`.vscode/launch.json` file. Within the different configurations you have to
-provide the following arguments: `--dart-define SUPABASE_URL=<SUPABASE_URL>`,
-`--dart-define SUPABASE_ANON_KEY=<SUPABASE_ANON_KEY>`,
-`--dart-define SUPABASE_SITE_URL=<SUPABASE_SITE_URL>` and
-`--dart-define GOOGLE_CLIENT_ID=<GOOGLE_CLIENT_ID>`.
-
-<details>
-<summary>Example: `.vscode/launch.json`</summary>
-
-```json
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "Local - Chrome",
-      "type": "dart",
-      "request": "launch",
-      "program": "app/lib/main.dart",
-      "args": [
-        "-d",
-        "chrome",
-        "--web-port",
-        "3000",
-        "--web-browser-flag=--disable-web-security",
-        "--dart-define",
-        "SUPABASE_URL=<SUPABASE_URL>",
-        "--dart-define",
-        "SUPABASE_ANON_KEY=<SUPABASE_ANON_KEY>",
-        "--dart-define",
-        "SUPABASE_SITE_URL=<SUPABASE_SITE_URL>",
-        "--dart-define",
-        "GOOGLE_CLIENT_ID=<GOOGLE_CLIENT_ID>"
-      ]
-    },
-    {
-      "name": "Local - iOS Simulator",
-      "type": "dart",
-      "request": "launch",
-      "program": "app/lib/main.dart",
-      "args": [
-        "-d",
-        "iPhone 14 Pro Max",
-        "--dart-define",
-        "SUPABASE_URL=<SUPABASE_URL>",
-        "--dart-define",
-        "SUPABASE_ANON_KEY=<SUPABASE_ANON_KEY>",
-        "--dart-define",
-        "SUPABASE_SITE_URL=<SUPABASE_SITE_URL>",
-        "--dart-define",
-        "GOOGLE_CLIENT_ID=<GOOGLE_CLIENT_ID>"
-      ]
-    },
-    {
-      "name": "Local - macOS",
-      "type": "dart",
-      "request": "launch",
-      "program": "app/lib/main.dart",
-      "args": [
-        "-d",
-        "macOS",
-        "--dart-define",
-        "SUPABASE_URL=<SUPABASE_URL>",
-        "--dart-define",
-        "SUPABASE_ANON_KEY=<SUPABASE_ANON_KEY>",
-        "--dart-define",
-        "SUPABASE_SITE_URL=<SUPABASE_SITE_URL>",
-        "--dart-define",
-        "GOOGLE_CLIENT_ID=<GOOGLE_CLIENT_ID>"
-      ]
-    }
-  ]
-}
+```sh
+./run.sh --device="chrome" --environment="local"
 ```
 
-</details>
+To run the tests the following command can be used:
+
+```sh
+flutter test
+```
+
+To check the test coverage the `--coverage` flag can be added to the command and
+an HTML report can be generated:
+
+```sh
+flutter test --coverage
+
+# To generate the HTML report lcov is required, which can be installed via Homebrew:
+brew install lcov
+
+genhtml coverage/lcov.info -o coverage/html
+open coverage/html/index.html
+```
 
 #### Sort all Imports
 
@@ -284,6 +230,38 @@ cd supabase/functions/_cmd
 docker-compose up --build
 ```
 
+To build the Docker image, the following commands can be run:
+
+```sh
+docker build -f supabase/functions/_cmd/Dockerfile -t ghcr.io/feeddeck/feeddeck:dev supabase/functions
+
+# To build the Docker image for another platform use the following:
+docker buildx build --platform linux/amd64 -f supabase/functions/_cmd/Dockerfile -t ghcr.io/feeddeck/feeddeck:dev supabase/functions
+
+# The Docker image can then be used to run the scheduler, worker or tools, e.g.
+docker run ghcr.io/feeddeck/feeddeck:dev tools get-feed '{"type": "reddit", "options": {"reddit": "/r/kubernetes"}}'
+```
+
+To run the tests for our code, the following command can be used:
+
+```sh
+deno test --allow-env --import-map=supabase/functions/import_map.json supabase/functions
+```
+
+To check the test coverage the `--coverage` flag can be added to the command and
+an HTML report can be generated:
+
+```sh
+deno test --allow-env --import-map=supabase/functions/import_map.json supabase/functions --coverage=coverage_deno
+
+# To generate the HTML report lcov is required, which can be installed via Homebrew:
+brew install lcov
+
+deno coverage coverage_deno --lcov --output=coverage_deno/coverage_deno.lcov
+genhtml -o coverage_deno/html coverage_deno/coverage_deno.lcov
+open coverage_deno/html/index.html
+```
+
 ## Hosting
 
 FeedDeck uses Supabase as backend. For Supabase we can use
@@ -305,6 +283,7 @@ supabase secrets set --env-file supabase/.env
 supabase secrets list
 
 # Deploy all functions
+supabase functions deploy add-or-update-source-v1 --project-ref <PROJECT-ID> --import-map supabase/functions/import_map.json
 supabase functions deploy add-source-v1 --project-ref <PROJECT-ID> --import-map supabase/functions/import_map.json
 supabase functions deploy delete-user-v1 --project-ref <PROJECT-ID> --import-map supabase/functions/import_map.json
 supabase functions deploy generate-magic-link-v1 --project-ref <PROJECT-ID> --import-map supabase/functions/import_map.json
@@ -406,21 +385,8 @@ Android, macOS, Windows and Linux if you do not want to use the official ones.
 5. Build the app for Web by running `flutter build web`. The build can be found
    at `app/build/web` and must be uploaded to your hosting provider.
 
-6. Build the app for Linux by running `flutter build linux --release`. To build
-   the `arm64` version the following commands can be run on a Raspberry Pi. Once
-   the `feeddeck-linux-arm64.tar.gz` archive was created it can be uploaded to
-   the GitHub release.
-
-   ```sh
-   cp linux/flatpak/app.feeddeck.feeddeck.desktop build/linux/arm64/release/bundle/
-   cp linux/flatpak/app.feeddeck.feeddeck.metainfo.xml build/linux/arm64/release/bundle/
-   cp linux/flatpak/app.feeddeck.feeddeck.svg build/linux/arm64/release/bundle/
-   cd build
-   cp -r linux/arm64/release/bundle/ feeddeck-linux-arm64
-   tar -czf feeddeck-linux-arm64.tar.gz feeddeck-linux-arm64
-   ```
-
-   Update the `app.feeddeck.feeddeck.yml` file at
+6. Build the app for Linux by running `flutter build linux --release`. Update
+   the `app.feeddeck.feeddeck.yml` file at
    [github.com/flathub/app.feeddeck.feeddeck](https://github.com/flathub/app.feeddeck.feeddeck)
    with the new release.
 

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 Rico Berger
+Copyright (c) 2024 Rico Berger
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -31,8 +31,8 @@ platforms. FeedDeck is written in [Flutter](https://flutter.dev/) and uses
 - **RSS and Social Media Feeds:** Follow your favorite RSS and social media
   feeds.
 - **News:** Get the latest news from your favorite RSS feeds and Google News.
-- **Social Media:** Follow your friends and favorite topics on Medium, Nitter,
-  Reddit, Tumblr and X.
+- **Social Media:** Follow your friends and favorite topics on Medium, Reddit
+  and Tumblr.
 - **GitHub:** Get your GitHub notifications and follow your repository
   activities.
 - **Podcasts:** Follow and listen to your favorite podcasts, via the built-in

app/.gitignore

@@ -31,6 +31,7 @@ migrate_working_dir/
 .pub-cache/
 .pub/
 /build/
+/coverage
 
 # Symbolication related
 app.*.symbols

app/android/app/build.gradle

@@ -1,3 +1,9 @@
+plugins {
+    id "com.android.application"
+    id "kotlin-android"
+    id "dev.flutter.flutter-gradle-plugin"
+}
+
 def localProperties = new Properties()
 def localPropertiesFile = rootProject.file('local.properties')
 if (localPropertiesFile.exists()) {
@@ -12,11 +18,6 @@ if (keystorePropertiesFile.exists()) {
     keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
 }
 
-def flutterRoot = localProperties.getProperty('flutter.sdk')
-if (flutterRoot == null) {
-    throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")
-}
-
 def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
 if (flutterVersionCode == null) {
     flutterVersionCode = '1'
@@ -27,21 +28,18 @@ if (flutterVersionName == null) {
     flutterVersionName = '1.0'
 }
 
-apply plugin: 'com.android.application'
-apply plugin: 'kotlin-android'
-apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
-
 android {
+    namespace "app.feeddeck.feeddeck"
     compileSdkVersion flutter.compileSdkVersion
     ndkVersion flutter.ndkVersion
 
     compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
+        sourceCompatibility JavaVersion.VERSION_17
+        targetCompatibility JavaVersion.VERSION_17
     }
 
     kotlinOptions {
-        jvmTarget = '1.8'
+        jvmTarget = '17'
     }
 
     sourceSets {
@@ -49,14 +47,13 @@ android {
     }
 
     defaultConfig {
-        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
         applicationId "app.feeddeck.feeddeck"
         // You can update the following values to match your application needs.
         // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
         // minSdkVersion flutter.minSdkVersion
         // targetSdkVersion flutter.targetSdkVersion
         minSdkVersion 21
-        targetSdkVersion 33
+        targetSdkVersion 34
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
     }
@@ -72,7 +69,12 @@ android {
 
     buildTypes {
         release {
-            signingConfig signingConfigs.release
+            if (keystorePropertiesFile.exists()) {
+                signingConfig signingConfigs.release
+            } else {
+                // For testing purposes we sign with dummy credentials if no key properties are given.
+                signingConfig signingConfigs.debug
+            }
         }
     }
 }
@@ -82,6 +84,5 @@ flutter {
 }
 
 dependencies {
-    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
     implementation 'com.google.android.gms:play-services-auth:20.6.0'
 }

app/android/app/src/main/res/values-night/styles.xml

@@ -5,6 +5,10 @@
         <!-- Show a splash screen on the activity. Automatically removed when
              the Flutter engine draws its first frame -->
         <item name="android:windowBackground">@drawable/launch_background</item>
+        <item name="android:forceDarkAllowed">false</item>
+        <item name="android:windowFullscreen">true</item>
+        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
+        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
     </style>
     <!-- Theme applied to the Android Window as soon as the process has started.
          This theme determines the color of the Android Window while your

app/android/build.gradle

@@ -1,16 +1,3 @@
-buildscript {
-    ext.kotlin_version = '1.7.10'
-    repositories {
-        google()
-        mavenCentral()
-    }
-
-    dependencies {
-        classpath 'com.android.tools.build:gradle:7.2.0'
-        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
-    }
-}
-
 allprojects {
     repositories {
         google()

app/android/gradle/wrapper/gradle-wrapper.properties

@@ -2,4 +2,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-7.5-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.4-all.zip

app/android/settings.gradle

@@ -1,11 +1,26 @@
-include ':app'
+pluginManagement {
+    def flutterSdkPath = {
+        def properties = new Properties()
+        file("local.properties").withInputStream { properties.load(it) }
+        def flutterSdkPath = properties.getProperty("flutter.sdk")
+        assert flutterSdkPath != null, "flutter.sdk not set in local.properties"
+        return flutterSdkPath
+    }
+    settings.ext.flutterSdkPath = flutterSdkPath()
 
-def localPropertiesFile = new File(rootProject.projectDir, "local.properties")
-def properties = new Properties()
+    includeBuild("${settings.ext.flutterSdkPath}/packages/flutter_tools/gradle")
 
-assert localPropertiesFile.exists()
-localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) }
+    repositories {
+        google()
+        mavenCentral()
+        gradlePluginPortal()
+    }
+}
 
-def flutterSdkPath = properties.getProperty("flutter.sdk")
-assert flutterSdkPath != null, "flutter.sdk not set in local.properties"
-apply from: "$flutterSdkPath/packages/flutter_tools/gradle/app_plugin_loader.gradle"
+plugins {
+    id "dev.flutter.flutter-plugin-loader" version "1.0.0"
+    id "com.android.application" version "8.1.2" apply false
+    id "org.jetbrains.kotlin.android" version "1.9.10" apply false
+}
+
+include ":app"

app/devtools_options.yaml

@@ -0,0 +1 @@
+extensions:

app/ios/Flutter/AppFrameworkInfo.plist

@@ -21,6 +21,6 @@
   <key>CFBundleVersion</key>
   <string>1.0</string>
   <key>MinimumOSVersion</key>
-  <string>11.0</string>
+  <string>12.0</string>
 </dict>
 </plist>

app/ios/Podfile

@@ -1,5 +1,5 @@
 # Uncomment this line to define a global platform for your project
-platform :ios, '11.0'
+platform :ios, '12.0'
 
 # CocoaPods analytics sends network stats synchronously affecting flutter build latency.
 ENV['COCOAPODS_DISABLE_STATS'] = 'true'

app/ios/Podfile.lock

@@ -8,24 +8,27 @@ PODS:
   - Flutter (1.0.0)
   - flutter_native_splash (0.0.1):
     - Flutter
-  - FMDB (2.7.5):
-    - FMDB/standard (= 2.7.5)
-  - FMDB/standard (2.7.5)
   - just_audio (0.0.1):
     - Flutter
+  - media_kit_libs_ios_video (1.0.4):
+    - Flutter
   - media_kit_native_event_loop (1.0.0):
     - Flutter
+  - media_kit_video (0.0.1):
+    - Flutter
   - package_info_plus (0.4.5):
     - Flutter
   - path_provider_foundation (0.0.1):
     - Flutter
     - FlutterMacOS
-  - purchases_flutter (6.0.0):
+  - purchases_flutter (6.30.2):
+    - Flutter
+    - PurchasesHybridCommon (= 11.1.0)
+  - PurchasesHybridCommon (11.1.0):
+    - RevenueCat (= 4.43.2)
+  - RevenueCat (4.43.2)
+  - screen_brightness_ios (0.1.0):
     - Flutter
-    - PurchasesHybridCommon (= 7.0.0)
-  - PurchasesHybridCommon (7.0.0):
-    - RevenueCat (= 4.27.0)
-  - RevenueCat (4.27.0)
   - shared_preferences_foundation (0.0.1):
     - Flutter
     - FlutterMacOS
@@ -33,10 +36,12 @@ PODS:
     - Flutter
   - sqflite (0.0.3):
     - Flutter
-    - FMDB (>= 2.7.5)
+    - FlutterMacOS
   - url_launcher_ios (0.0.1):
     - Flutter
-  - webview_flutter_wkwebview (0.0.1):
+  - volume_controller (0.0.1):
+    - Flutter
+  - wakelock_plus (0.0.1):
     - Flutter
 
 DEPENDENCIES:
@@ -46,19 +51,22 @@ DEPENDENCIES:
   - Flutter (from `Flutter`)
   - flutter_native_splash (from `.symlinks/plugins/flutter_native_splash/ios`)
   - just_audio (from `.symlinks/plugins/just_audio/ios`)
+  - media_kit_libs_ios_video (from `.symlinks/plugins/media_kit_libs_ios_video/ios`)
   - media_kit_native_event_loop (from `.symlinks/plugins/media_kit_native_event_loop/ios`)
+  - media_kit_video (from `.symlinks/plugins/media_kit_video/ios`)
   - package_info_plus (from `.symlinks/plugins/package_info_plus/ios`)
   - path_provider_foundation (from `.symlinks/plugins/path_provider_foundation/darwin`)
   - purchases_flutter (from `.symlinks/plugins/purchases_flutter/ios`)
+  - screen_brightness_ios (from `.symlinks/plugins/screen_brightness_ios/ios`)
   - shared_preferences_foundation (from `.symlinks/plugins/shared_preferences_foundation/darwin`)
   - sign_in_with_apple (from `.symlinks/plugins/sign_in_with_apple/ios`)
-  - sqflite (from `.symlinks/plugins/sqflite/ios`)
+  - sqflite (from `.symlinks/plugins/sqflite/darwin`)
   - url_launcher_ios (from `.symlinks/plugins/url_launcher_ios/ios`)
-  - webview_flutter_wkwebview (from `.symlinks/plugins/webview_flutter_wkwebview/ios`)
+  - volume_controller (from `.symlinks/plugins/volume_controller/ios`)
+  - wakelock_plus (from `.symlinks/plugins/wakelock_plus/ios`)
 
 SPEC REPOS:
   trunk:
-    - FMDB
     - PurchasesHybridCommon
     - RevenueCat
 
@@ -75,45 +83,56 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/flutter_native_splash/ios"
   just_audio:
     :path: ".symlinks/plugins/just_audio/ios"
+  media_kit_libs_ios_video:
+    :path: ".symlinks/plugins/media_kit_libs_ios_video/ios"
   media_kit_native_event_loop:
     :path: ".symlinks/plugins/media_kit_native_event_loop/ios"
+  media_kit_video:
+    :path: ".symlinks/plugins/media_kit_video/ios"
   package_info_plus:
     :path: ".symlinks/plugins/package_info_plus/ios"
   path_provider_foundation:
     :path: ".symlinks/plugins/path_provider_foundation/darwin"
   purchases_flutter:
     :path: ".symlinks/plugins/purchases_flutter/ios"
+  screen_brightness_ios:
+    :path: ".symlinks/plugins/screen_brightness_ios/ios"
   shared_preferences_foundation:
     :path: ".symlinks/plugins/shared_preferences_foundation/darwin"
   sign_in_with_apple:
     :path: ".symlinks/plugins/sign_in_with_apple/ios"
   sqflite:
-    :path: ".symlinks/plugins/sqflite/ios"
+    :path: ".symlinks/plugins/sqflite/darwin"
   url_launcher_ios:
     :path: ".symlinks/plugins/url_launcher_ios/ios"
-  webview_flutter_wkwebview:
-    :path: ".symlinks/plugins/webview_flutter_wkwebview/ios"
+  volume_controller:
+    :path: ".symlinks/plugins/volume_controller/ios"
+  wakelock_plus:
+    :path: ".symlinks/plugins/wakelock_plus/ios"
 
 SPEC CHECKSUMS:
-  app_links: 5ef33d0d295a89d9d16bb81b0e3b0d5f70d6c875
+  app_links: e70ca16b4b0f88253b3b3660200d4a10b4ea9795
   audio_service: f509d65da41b9521a61f1c404dd58651f265a567
-  audio_session: 4f3e461722055d21515cf3261b64c973c062f345
-  Flutter: f04841e97a9d0b0a8025694d0796dd46242b2854
-  flutter_native_splash: 52501b97d1c0a5f898d687f1646226c1f93c56ef
-  FMDB: 2ce00b547f966261cd18927a3ddb07cb6f3db82a
+  audio_session: 088d2483ebd1dc43f51d253d4a1c517d9a2e7207
+  Flutter: e0871f40cf51350855a761d2e70bf5af5b9b5de7
+  flutter_native_splash: edf599c81f74d093a4daf8e17bd7a018854bc778
   just_audio: baa7252489dbcf47a4c7cc9ca663e9661c99aafa
-  media_kit_native_event_loop: f1ee9f941ec0af371b245969a3e010901c375480
-  package_info_plus: fd030dabf36271f146f1f3beacd48f564b0f17f7
-  path_provider_foundation: 29f094ae23ebbca9d3d0cec13889cd9060c0e943
-  purchases_flutter: 549ccfbbaf5e7cd195043c714b69a35e278c00f1
-  PurchasesHybridCommon: af3b2413f9cb999bc1fdca44770bdaf39dfb89fa
-  RevenueCat: 84fbe2eb9bbf63e1abf346ccd3ff9ee45d633e3b
-  shared_preferences_foundation: 5b919d13b803cadd15ed2dc053125c68730e5126
+  media_kit_libs_ios_video: a5fe24bc7875ccd6378a0978c13185e1344651c1
+  media_kit_native_event_loop: e6b2ab20cf0746eb1c33be961fcf79667304fa2a
+  media_kit_video: 5da63f157170e5bf303bf85453b7ef6971218a2e
+  package_info_plus: 58f0028419748fad15bf008b270aaa8e54380b1c
+  path_provider_foundation: 3784922295ac71e43754bd15e0653ccfd36a147c
+  purchases_flutter: 42d5544e7730ea89a88cc2f008b7c700fd147052
+  PurchasesHybridCommon: 4022d5944cb30ec44ba5159e42aa161fe0e30175
+  RevenueCat: 3d934653b7e8b09af88fd47e9e84cfaf5d0a89ba
+  screen_brightness_ios: 715ca807df953bf676d339f11464e438143ee625
+  shared_preferences_foundation: fcdcbc04712aee1108ac7fda236f363274528f78
   sign_in_with_apple: f3bf75217ea4c2c8b91823f225d70230119b8440
-  sqflite: 31f7eba61e3074736dff8807a9b41581e4f7f15a
-  url_launcher_ios: 08a3dfac5fb39e8759aeb0abbd5d9480f30fc8b4
-  webview_flutter_wkwebview: 2e2d318f21a5e036e2c3f26171342e95908bd60a
+  sqflite: 673a0e54cc04b7d6dba8d24fb8095b31c3a99eec
+  url_launcher_ios: bbd758c6e7f9fd7b5b1d4cde34d2b95fcce5e812
+  volume_controller: 531ddf792994285c9b17f9d8a7e4dcdd29b3eae9
+  wakelock_plus: 78ec7c5b202cab7761af8e2b2b3d0671be6c4ae1
 
-PODFILE CHECKSUM: ec83c31511fbc978a9918c6fda235238118483f5
+PODFILE CHECKSUM: 016564c560c4c9dbcb210e12c7aa6039072645f1
 
-COCOAPODS: 1.13.0
+COCOAPODS: 1.15.2

app/ios/Runner.xcodeproj/project.pbxproj

@@ -161,7 +161,7 @@
 		97C146E61CF9000F007C117D /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 1430;
+				LastUpgradeCheck = 1510;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					97C146ED1CF9000F007C117D = {
@@ -348,7 +348,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				SUPPORTED_PLATFORMS = iphoneos;
@@ -428,7 +428,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -477,7 +477,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 12.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				SUPPORTED_PLATFORMS = iphoneos;

app/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1430"
+   LastUpgradeVersion = "1510"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"

app/ios/Runner/Info.plist

@@ -1,73 +1,73 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
 <plist version="1.0">
-<dict>
-	<key>CADisableMinimumFrameDurationOnPhone</key>
-	<true/>
-	<key>CFBundleDevelopmentRegion</key>
-	<string>$(DEVELOPMENT_LANGUAGE)</string>
-	<key>CFBundleDisplayName</key>
-	<string>FeedDeck</string>
-	<key>CFBundleExecutable</key>
-	<string>$(EXECUTABLE_NAME)</string>
-	<key>CFBundleIdentifier</key>
-	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
-	<key>CFBundleInfoDictionaryVersion</key>
-	<string>6.0</string>
-	<key>CFBundleName</key>
-	<string>feeddeck</string>
-	<key>CFBundlePackageType</key>
-	<string>APPL</string>
-	<key>CFBundleShortVersionString</key>
-	<string>$(FLUTTER_BUILD_NAME)</string>
-	<key>CFBundleSignature</key>
-	<string>????</string>
-	<key>CFBundleURLTypes</key>
-	<array>
-		<dict>
-			<key>CFBundleTypeRole</key>
-			<string>Editor</string>
-			<key>CFBundleURLSchemes</key>
-			<array>
-				<string>app.feeddeck.feeddeck</string>
-			</array>
-		</dict>
-	</array>
-	<key>CFBundleVersion</key>
-	<string>$(FLUTTER_BUILD_NUMBER)</string>
-	<key>LSRequiresIPhoneOS</key>
-	<true/>
-	<key>NSAppTransportSecurity</key>
 	<dict>
-		<key>NSAllowsArbitraryLoads</key>
+		<key>CADisableMinimumFrameDurationOnPhone</key>
 		<true/>
+		<key>CFBundleDevelopmentRegion</key>
+		<string>$(DEVELOPMENT_LANGUAGE)</string>
+		<key>CFBundleDisplayName</key>
+		<string>FeedDeck</string>
+		<key>CFBundleExecutable</key>
+		<string>$(EXECUTABLE_NAME)</string>
+		<key>CFBundleIdentifier</key>
+		<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+		<key>CFBundleInfoDictionaryVersion</key>
+		<string>6.0</string>
+		<key>CFBundleName</key>
+		<string>feeddeck</string>
+		<key>CFBundlePackageType</key>
+		<string>APPL</string>
+		<key>CFBundleShortVersionString</key>
+		<string>$(FLUTTER_BUILD_NAME)</string>
+		<key>CFBundleSignature</key>
+		<string>????</string>
+		<key>CFBundleURLTypes</key>
+		<array>
+			<dict>
+				<key>CFBundleTypeRole</key>
+				<string>Editor</string>
+				<key>CFBundleURLSchemes</key>
+				<array>
+					<string>app.feeddeck.feeddeck</string>
+				</array>
+			</dict>
+		</array>
+		<key>CFBundleVersion</key>
+		<string>$(FLUTTER_BUILD_NUMBER)</string>
+		<key>LSRequiresIPhoneOS</key>
+		<true/>
+		<key>NSAppTransportSecurity</key>
+		<dict>
+			<key>NSAllowsArbitraryLoads</key>
+			<true/>
+		</dict>
+		<key>UIApplicationSupportsIndirectInputEvents</key>
+		<true/>
+		<key>UIBackgroundModes</key>
+		<array>
+			<string>audio</string>
+		</array>
+		<key>UILaunchStoryboardName</key>
+		<string>LaunchScreen</string>
+		<key>UIMainStoryboardFile</key>
+		<string>Main</string>
+		<key>UIStatusBarHidden</key>
+		<true/>
+		<key>UISupportedInterfaceOrientations</key>
+		<array>
+			<string>UIInterfaceOrientationPortrait</string>
+			<string>UIInterfaceOrientationLandscapeLeft</string>
+			<string>UIInterfaceOrientationLandscapeRight</string>
+		</array>
+		<key>UISupportedInterfaceOrientations~ipad</key>
+		<array>
+			<string>UIInterfaceOrientationPortrait</string>
+			<string>UIInterfaceOrientationPortraitUpsideDown</string>
+			<string>UIInterfaceOrientationLandscapeLeft</string>
+			<string>UIInterfaceOrientationLandscapeRight</string>
+		</array>
+		<key>UIViewControllerBasedStatusBarAppearance</key>
+		<false/>
 	</dict>
-	<key>UIApplicationSupportsIndirectInputEvents</key>
-	<true/>
-	<key>UIBackgroundModes</key>
-	<array>
-		<string>audio</string>
-	</array>
-	<key>UILaunchStoryboardName</key>
-	<string>LaunchScreen</string>
-	<key>UIMainStoryboardFile</key>
-	<string>Main</string>
-	<key>UIStatusBarHidden</key>
-	<false/>
-	<key>UISupportedInterfaceOrientations</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-	<key>UISupportedInterfaceOrientations~ipad</key>
-	<array>
-		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationPortraitUpsideDown</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
-	</array>
-	<key>UIViewControllerBasedStatusBarAppearance</key>
-	<false/>
-</dict>
 </plist>

app/lib/main.dart

@@ -7,16 +7,19 @@ import 'package:flutter/material.dart';
 import 'package:flutter_native_splash/flutter_native_splash.dart';
 import 'package:flutter_web_plugins/url_strategy.dart';
 import 'package:just_audio_background/just_audio_background.dart';
+import 'package:media_kit/media_kit.dart';
 import 'package:provider/provider.dart';
 import 'package:window_manager/window_manager.dart';
 
 import 'package:feeddeck/repositories/app_repository.dart';
+import 'package:feeddeck/repositories/layout_repository.dart';
 import 'package:feeddeck/repositories/profile_repository.dart';
 import 'package:feeddeck/repositories/settings_repository.dart';
 import 'package:feeddeck/utils/constants.dart';
 import 'package:feeddeck/widgets/confirmation/confirmation.dart';
 import 'package:feeddeck/widgets/home/home.dart';
 import 'package:feeddeck/widgets/reset_password/reset_password.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_audio_palyer/item_audio_player_init/item_audio_player_init.dart';
 
 /// Before we are calling [runApp] we have to ensure that the widget bindings
 /// are initialized, so that we can preserve the splash screen until we are done
@@ -45,13 +48,26 @@ void main() async {
     });
   }
 
+  /// Initialize the [media_kit] packages, so that we can play audio and video
+  /// files.
+  MediaKit.ensureInitialized();
+  if (!kIsWeb && (Platform.isLinux || Platform.isWindows)) {
+    ItemAudioPlayerInit().init();
+  }
+
   /// Initialize the [just_audio_background] package, so that we can play audio
   /// files in the background.
-  await JustAudioBackground.init(
-    androidNotificationChannelId: 'com.ryanheise.bg_demo.channel.audio',
-    androidNotificationChannelName: 'Audio playback',
-    androidNotificationOngoing: true,
-  );
+  ///
+  /// We can not initialize the [just_audio_background] package on Windows and
+  /// Linux, because then the returned duration in the `_player.durationStream`
+  /// isn't working correctly in the [ItemAudioPlayer] widget.
+  if (kIsWeb || Platform.isAndroid || Platform.isIOS || Platform.isMacOS) {
+    await JustAudioBackground.init(
+      androidNotificationChannelId: 'com.ryanheise.bg_demo.channel.audio',
+      androidNotificationChannelName: 'Audio playback',
+      androidNotificationOngoing: true,
+    );
+  }
 
   /// For the ewb we have to use the path url strategy, so that the redirect
   /// within Supabase is working in all cases. On all other platforms this is a
@@ -124,6 +140,7 @@ class FeedDeckApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MultiProvider(
       providers: [
+        ChangeNotifierProvider(create: (_) => LayoutRepository()),
         ChangeNotifierProvider(create: (_) => AppRepository()),
         ChangeNotifierProvider(create: (_) => ProfileRepository()),
       ],

app/lib/models/source.dart

@@ -4,20 +4,23 @@ import 'package:feeddeck/models/sources/github.dart';
 import 'package:feeddeck/models/sources/googlenews.dart';
 import 'package:feeddeck/models/sources/stackoverflow.dart';
 import 'package:feeddeck/utils/constants.dart';
+import 'package:feeddeck/utils/fd_icons.dart';
 
 /// [FDSourceType] is a enum value which defines the source type. A source can
 /// have one of the following types:
+/// - [fourchan]
 /// - [github]
 /// - [googlenews]
+/// - [lemmy]
 /// - [mastodon]
 /// - [medium]
 /// - [nitter]
+/// - [pinterest]
 /// - [podcast]
 /// - [reddit]
 /// - [rss]
 /// - [stackoverflow]
 /// - [tumblr]
-/// - [x]
 /// - [youtube]
 ///
 /// The [none] value is not valid and just here as a fallback in case sth. odd
@@ -25,17 +28,19 @@ import 'package:feeddeck/utils/constants.dart';
 /// the list, so that we can loop though the types in a ListView / GridView
 /// builder via `FDSourceType.values.length - 1`.
 enum FDSourceType {
+  fourchan,
   github,
   googlenews,
+  lemmy,
   mastodon,
   medium,
   nitter,
+  pinterest,
   podcast,
   reddit,
   rss,
   stackoverflow,
   tumblr,
-  // x,
   youtube,
   none,
 }
@@ -52,16 +57,22 @@ extension FDSourceTypeExtension on FDSourceType {
   /// [toLocalizedString] returns a localized string for a source type.
   String toLocalizedString() {
     switch (this) {
+      case FDSourceType.fourchan:
+        return '4chan';
       case FDSourceType.github:
         return 'GitHub';
       case FDSourceType.googlenews:
         return 'Google News';
+      case FDSourceType.lemmy:
+        return 'Lemmy';
       case FDSourceType.mastodon:
         return 'Mastodon';
       case FDSourceType.medium:
         return 'Medium';
       case FDSourceType.nitter:
         return 'Nitter';
+      case FDSourceType.pinterest:
+        return 'Pinterest';
       case FDSourceType.podcast:
         return 'Podcast';
       case FDSourceType.reddit:
@@ -72,8 +83,6 @@ extension FDSourceTypeExtension on FDSourceType {
         return 'StackOverflow';
       case FDSourceType.tumblr:
         return 'Tumblr';
-      // case FDSourceType.x:
-      //   return 'X';
       case FDSourceType.youtube:
         return 'YouTube';
       default:
@@ -81,20 +90,61 @@ extension FDSourceTypeExtension on FDSourceType {
     }
   }
 
-  /// [color] returns the brand color for a source type, which can be used as
-  /// background color for the icon of a source type.
-  Color get color {
+  /// [icon] returns the icon for a source.
+  IconData get icon {
     switch (this) {
+      case FDSourceType.fourchan:
+        return FDIcons.fourchan;
+      case FDSourceType.github:
+        return FDIcons.github;
+      case FDSourceType.googlenews:
+        return FDIcons.googlenews;
+      case FDSourceType.lemmy:
+        return FDIcons.lemmy;
+      case FDSourceType.mastodon:
+        return FDIcons.mastodon;
+      case FDSourceType.medium:
+        return FDIcons.medium;
+      case FDSourceType.nitter:
+        return FDIcons.nitter;
+      case FDSourceType.pinterest:
+        return FDIcons.pinterest;
+      case FDSourceType.podcast:
+        return Icons.podcasts;
+      case FDSourceType.reddit:
+        return FDIcons.reddit;
+      case FDSourceType.rss:
+        return FDIcons.rss;
+      case FDSourceType.stackoverflow:
+        return FDIcons.stackoverflow;
+      case FDSourceType.tumblr:
+        return FDIcons.tumblr;
+      case FDSourceType.youtube:
+        return FDIcons.youtube;
+      default:
+        return FDIcons.feeddeck;
+    }
+  }
+
+  /// [bgColor] returns the background color for the source icon.
+  Color get bgColor {
+    switch (this) {
+      case FDSourceType.fourchan:
+        return const Color(0xff880000);
       case FDSourceType.github:
         return const Color(0xff000000);
       case FDSourceType.googlenews:
         return const Color(0xff4285f4);
+      case FDSourceType.lemmy:
+        return const Color(0xff00bc8c);
       case FDSourceType.mastodon:
         return const Color(0xff6364ff);
       case FDSourceType.medium:
         return const Color(0xff000000);
       case FDSourceType.nitter:
         return const Color(0xffff6c60);
+      case FDSourceType.pinterest:
+        return const Color(0xffe60023);
       case FDSourceType.podcast:
         return const Color(0xff872ec4);
       case FDSourceType.reddit:
@@ -105,14 +155,49 @@ extension FDSourceTypeExtension on FDSourceType {
         return const Color(0xffef8236);
       case FDSourceType.tumblr:
         return const Color(0xff34526f);
-      // case FDSourceType.x:
-      //   return const Color(0xff000000);
       case FDSourceType.youtube:
         return const Color(0xffff0000);
       default:
         return Constants.primary;
     }
   }
+
+  /// [fgColor] returns the forground color for the source icon. This should be
+  /// used toether with the [bgColor].
+  Color get fgColor {
+    switch (this) {
+      case FDSourceType.fourchan:
+        return const Color(0xffffffff);
+      case FDSourceType.github:
+        return const Color(0xffffffff);
+      case FDSourceType.googlenews:
+        return const Color(0xffffffff);
+      case FDSourceType.lemmy:
+        return const Color(0xffffffff);
+      case FDSourceType.mastodon:
+        return const Color(0xffffffff);
+      case FDSourceType.medium:
+        return const Color(0xffffffff);
+      case FDSourceType.nitter:
+        return const Color(0xffffffff);
+      case FDSourceType.pinterest:
+        return const Color(0xffffffff);
+      case FDSourceType.podcast:
+        return const Color(0xffffffff);
+      case FDSourceType.reddit:
+        return const Color(0xffffffff);
+      case FDSourceType.rss:
+        return const Color(0xffffffff);
+      case FDSourceType.stackoverflow:
+        return const Color(0xffffffff);
+      case FDSourceType.tumblr:
+        return const Color(0xffffffff);
+      case FDSourceType.youtube:
+        return const Color(0xffffffff);
+      default:
+        return Constants.onPrimary;
+    }
+  }
 }
 
 /// [getSourceTypeFromString] returns the [FDSourceType] from his string
@@ -173,7 +258,7 @@ class FDSource {
       'id': id,
       'type': type.toShortString(),
       'title': title,
-      'options': options != null ? options!.toJson() : null,
+      'options': options?.toJson(),
       'link': link,
       'icon': icon,
     };
@@ -183,36 +268,44 @@ class FDSource {
 /// [FDSourceOptions] defines all options for the different source types which
 /// are available.
 class FDSourceOptions {
+  String? fourchan;
   FDGitHubOptions? github;
   FDGoogleNewsOptions? googlenews;
+  String? lemmy;
   String? mastodon;
   String? medium;
   String? nitter;
+  String? pinterest;
   String? podcast;
   String? reddit;
   String? rss;
   FDStackOverflowOptions? stackoverflow;
   String? tumblr;
-  String? x;
   String? youtube;
 
   FDSourceOptions({
+    this.fourchan,
     this.github,
     this.googlenews,
+    this.lemmy,
     this.mastodon,
     this.medium,
     this.nitter,
+    this.pinterest,
     this.podcast,
     this.reddit,
     this.rss,
     this.stackoverflow,
     this.tumblr,
-    this.x,
     this.youtube,
   });
 
   factory FDSourceOptions.fromJson(Map<String, dynamic> responseData) {
     return FDSourceOptions(
+      fourchan: responseData.containsKey('fourchan') &&
+              responseData['fourchan'] != null
+          ? responseData['fourchan']
+          : null,
       github:
           responseData.containsKey('github') && responseData['github'] != null
               ? FDGitHubOptions.fromJson(responseData['github'])
@@ -221,6 +314,9 @@ class FDSourceOptions {
               responseData['googlenews'] != null
           ? FDGoogleNewsOptions.fromJson(responseData['googlenews'])
           : null,
+      lemmy: responseData.containsKey('lemmy') && responseData['lemmy'] != null
+          ? responseData['lemmy']
+          : null,
       mastodon: responseData.containsKey('mastodon') &&
               responseData['mastodon'] != null
           ? responseData['mastodon']
@@ -233,6 +329,10 @@ class FDSourceOptions {
           responseData.containsKey('nitter') && responseData['nitter'] != null
               ? responseData['nitter']
               : null,
+      pinterest: responseData.containsKey('pinterest') &&
+              responseData['pinterest'] != null
+          ? responseData['pinterest']
+          : null,
       podcast:
           responseData.containsKey('podcast') && responseData['podcast'] != null
               ? responseData['podcast']
@@ -252,9 +352,6 @@ class FDSourceOptions {
           responseData.containsKey('tumblr') && responseData['tumblr'] != null
               ? responseData['tumblr']
               : null,
-      x: responseData.containsKey('x') && responseData['x'] != null
-          ? responseData['x']
-          : null,
       youtube:
           responseData.containsKey('youtube') && responseData['youtube'] != null
               ? responseData['youtube']
@@ -264,17 +361,19 @@ class FDSourceOptions {
 
   Map<String, dynamic> toJson() {
     return {
+      'fourchan': fourchan,
       'github': github?.toJson(),
       'googlenews': googlenews?.toJson(),
+      'lemmy': lemmy,
       'mastodon': mastodon,
       'medium': medium,
       'nitter': nitter,
+      'pinterest': pinterest,
       'podcast': podcast,
       'reddit': reddit,
       'rss': rss,
       'stackoverflow': stackoverflow?.toJson(),
       'tumblr': tumblr,
-      'x': x,
       'youtube': youtube,
     };
   }

app/lib/repositories/app_repository.dart

@@ -376,21 +376,33 @@ class AppRepository with ChangeNotifier {
   }
 
   /// [addSource] is called to add a source to the column with the provided
-  /// [columnId]. The function takes a [source] as parameter. The function calls
-  /// the `add-source-v1` edge function via the Supabase client to create the
-  /// source. When the source was created the newly returned source is added to
-  /// the list of sources of the column with the provided [columnId].
+  /// [columnId]. Next to [columnId] a user must also provide the [type] and
+  /// [options] for the source. The function calls the `add-or-update-source-v1`
+  /// edge function via the Supabase client to create the source. When the
+  /// source was created the newly returned source is added to the list of
+  /// sources of the column with the provided [columnId].
+  ///
+  /// The optional [feedData] parameter is used to provide the feed data for the
+  /// source. This is can be used to scrape the source data via the client (app)
+  /// instead of the server (scheduler / worker).
   Future<void> addSource(
     String columnId,
     FDSourceType type,
-    FDSourceOptions options,
-  ) async {
+    FDSourceOptions options, [
+    String? feedData,
+  ]) async {
     final result = await Supabase.instance.client.functions.invoke(
-      'add-source-v1',
+      'add-or-update-source-v1',
       body: {
-        'columnId': columnId,
-        'type': type.toShortString(),
-        'options': options.toJson(),
+        'source': {
+          'id': '',
+          'columnId': columnId,
+          'userId': '',
+          'type': type.toShortString(),
+          'title': '',
+          'options': options.toJson(),
+        },
+        'feedData': feedData,
       },
     );
 

app/lib/repositories/items_repository.dart

@@ -141,7 +141,7 @@ class ItemsRepository with ChangeNotifier {
       /// selected source which is stored in the [_filters.sourceIdFilter]
       /// field.
       if (_filters.sourceIdFilter != '') {
-        filter = filter.eq('sourceId', sourceIdFilter);
+        filter = filter.eq('sourceId', _filters.sourceIdFilter);
       }
 
       filter = filter.lte('createdAt', _filters.createdAtFilter);
@@ -305,7 +305,7 @@ class ItemsRepository with ChangeNotifier {
       for (var i = 0; i < chunks.length; i++) {
         await Supabase.instance.client
             .from('items')
-            .update({'isRead': read}).in_('id', chunks[i]);
+            .update({'isRead': read}).inFilter('id', chunks[i]);
         for (var j = 0; j < _items.length; j++) {
           if (chunks[i].contains(_items[j].id)) {
             _items[j].isRead = read;

app/lib/repositories/layout_repository.dart

@@ -0,0 +1,12 @@
+import 'package:flutter/foundation.dart';
+
+/// The [LayoutRepository] is used to store several layout information of the
+/// app, which can be modifed or should be modifed within different locations.
+class LayoutRepository with ChangeNotifier {
+  /// [_deckLayoutSmallInitialTabIndex] stores the selected tab index of the
+  /// [DeckLayoutSmall] widget. This is used that we display the same tab when
+  /// a user switches between the small and large layout (e.g. portrait and
+  /// landscape mode on mobile devices) and that we can reset the tab index when
+  /// a user selects a new deck.
+  int deckLayoutSmallInitialTabIndex = 0;
+}

app/lib/utils/desktop_signin_manager.dart

@@ -56,15 +56,15 @@ const _htmlAuthFinished = '''
 </html>
 ''';
 
-/// The [DesktopLoginManager] is used to authenticate a user with the provided
+/// The [DesktopSignInManager] is used to authenticate a user with the provided
 /// OAuth [provider] on desktop platforms.
-class DesktopLoginManager {
-  final supabase.Provider provider;
+class DesktopSignInManager {
+  final supabase.OAuthProvider provider;
   final Map<String, String>? queryParams;
 
   HttpServer? redirectServer;
 
-  DesktopLoginManager({
+  DesktopSignInManager({
     required this.provider,
     required this.queryParams,
   });

app/lib/utils/fd_icons.dart

@@ -1,5 +1,7 @@
+import 'package:flutter/widgets.dart';
+
 /// Flutter icons FDIcons
-/// Copyright (C) 2023 by original authors @ fluttericon.com, fontello.com
+/// Copyright (C) 2024 by original authors @ fluttericon.com, fontello.com
 /// This font was generated by FlutterIcon.com, which is derived from Fontello.
 ///
 /// To use this font, place it in your fonts/ directory and include the
@@ -11,11 +13,6 @@
 ///      fonts:
 ///       - asset: fonts/FDIcons.ttf
 ///
-///
-///
-
-import 'package:flutter/widgets.dart';
-
 class FDIcons {
   FDIcons._();
 
@@ -32,6 +29,8 @@ class FDIcons {
       IconData(0xe803, fontFamily: _kFontFam, fontPackage: _kFontPkg);
   static const IconData googlenews =
       IconData(0xe804, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData pinterest =
+      IconData(0xe805, fontFamily: _kFontFam, fontPackage: _kFontPkg);
   static const IconData medium =
       IconData(0xe806, fontFamily: _kFontFam, fontPackage: _kFontPkg);
   static const IconData nitter =
@@ -64,4 +63,8 @@ class FDIcons {
       IconData(0xe814, fontFamily: _kFontFam, fontPackage: _kFontPkg);
   static const IconData mastodon =
       IconData(0xe815, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData lemmy =
+      IconData(0xe816, fontFamily: _kFontFam, fontPackage: _kFontPkg);
+  static const IconData fourchan =
+      IconData(0xe817, fontFamily: _kFontFam, fontPackage: _kFontPkg);
 }

app/lib/utils/get_feed.dart

@@ -0,0 +1,55 @@
+import 'package:http/http.dart' as http;
+
+import 'package:feeddeck/models/source.dart';
+import 'package:feeddeck/utils/api_exception.dart';
+
+/// [getFeed] returns the feed for the provided [sourceType] and [options]. It
+/// can be used to fetch the feed for a source on the client side (app) instead
+/// of via the corresponding `add-or-update-source-v1` edge function or via our
+/// worker.
+///
+/// The functions for the different sources must implement the same parsing for
+/// the source options as it is done in the edge function.
+Future<String> getFeed(FDSourceType sourceType, FDSourceOptions options) async {
+  switch (sourceType) {
+    case FDSourceType.reddit:
+      return getFeedReddit(options.reddit);
+    default:
+      throw const ApiException('Unknown source type', 400);
+  }
+}
+
+/// [getFeedReddit] returns the feed for the provided [input]. It is used to
+/// fetch the RSS feed for a Reddit source, which can be passed to the
+/// `add-or-update-source-v1` edge function.
+///
+/// The function must implement the same parsing logic as it is done in the
+/// `supabase/functions/_shared/feed/reddit.ts` file.
+Future<String> getFeedReddit(String? input) async {
+  if (input == null || input.isEmpty) {
+    throw const ApiException('No input provided', 400);
+  }
+
+  String url = '';
+  try {
+    if (input.startsWith('/r/') || input.startsWith('/u/')) {
+      url = 'https://www.reddit.com$input.rss';
+    } else {
+      final inputUri = Uri.parse(input);
+      if (inputUri.host.endsWith('reddit.com')) {
+        if (input.endsWith('.rss')) {
+          url = input;
+        } else {
+          url = '$input.rss';
+        }
+      } else {
+        throw const ApiException('Invalid input', 400);
+      }
+    }
+  } catch (err) {
+    throw const ApiException('Invalid input', 400);
+  }
+
+  final response = await http.get(Uri.parse(url));
+  return response.body;
+}

app/lib/utils/image_url.dart

@@ -1,32 +0,0 @@
-import 'package:flutter/foundation.dart';
-
-import 'package:supabase_flutter/supabase_flutter.dart';
-
-import 'package:feeddeck/repositories/settings_repository.dart';
-
-/// [FDImageType] is a enum value which defines the image type. An image can be
-/// related to an item or a source.
-enum FDImageType {
-  item,
-  source,
-}
-
-/// [getImageUrl] returns the correct image url to use for the provided image
-/// url:
-/// - If the [imageType] is [FDImageType.source] the image is always requested
-///   from the Supabase storage.
-/// - If the [imageType] is [FDImageType.item] and the app runs on the web, the
-///   image is proxied through the Supabase functions.
-/// - If the [imageType] is [FDImageType.item] and the app runs on a mobile or
-///   desktop device, the image is requested directly from the provided url.
-String getImageUrl(FDImageType imageType, String imageUrl) {
-  if (imageType == FDImageType.source) {
-    return '${SettingsRepository().supabaseUrl}/storage/v1/object/public/sources/$imageUrl';
-  }
-
-  if (kIsWeb) {
-    return '${Supabase.instance.client.functionsUrl}/image-proxy-v1?media=${Uri.encodeQueryComponent(imageUrl)}';
-  }
-
-  return imageUrl;
-}

app/lib/utils/signin_with_apple.dart

@@ -0,0 +1,33 @@
+import 'dart:convert';
+
+import 'package:crypto/crypto.dart';
+import 'package:sign_in_with_apple/sign_in_with_apple.dart';
+import 'package:supabase_flutter/supabase_flutter.dart';
+
+/// [signInWithApple] performs Apple sign in on iOS and macOS.
+/// See https://supabase.com/docs/guides/auth/social-login/auth-apple?platform=flutter#using-native-sign-in-with-apple-in-flutter
+Future<AuthResponse> signInWithApple() async {
+  final rawNonce = Supabase.instance.client.auth.generateRawNonce();
+  final hashedNonce = sha256.convert(utf8.encode(rawNonce)).toString();
+
+  final credential = await SignInWithApple.getAppleIDCredential(
+    scopes: [
+      AppleIDAuthorizationScopes.email,
+      AppleIDAuthorizationScopes.fullName,
+    ],
+    nonce: hashedNonce,
+  );
+
+  final idToken = credential.identityToken;
+  if (idToken == null) {
+    throw const AuthException(
+      'Could not find ID Token from generated credential.',
+    );
+  }
+
+  return Supabase.instance.client.auth.signInWithIdToken(
+    provider: OAuthProvider.apple,
+    idToken: idToken,
+    nonce: rawNonce,
+  );
+}

app/lib/widgets/deck/deck_layout_large.dart

@@ -5,6 +5,7 @@ import 'package:scroll_to_index/scroll_to_index.dart';
 
 import 'package:feeddeck/models/source.dart';
 import 'package:feeddeck/repositories/app_repository.dart';
+import 'package:feeddeck/repositories/layout_repository.dart';
 import 'package:feeddeck/utils/constants.dart';
 import 'package:feeddeck/widgets/column/column_layout.dart';
 import 'package:feeddeck/widgets/column/create/create_column.dart';
@@ -224,10 +225,20 @@ class _DeckLayoutLargeState extends State<DeckLayoutLarge> {
                       backgroundColor: Constants.background,
                       selectedIndex: null,
 
-                      /// When a user selects a destination in the navigation rail
-                      /// we scroll to the corresponding column by using the
-                      /// `scroll_to_index` package.
+                      /// When a user selects a destination in the navigation
+                      /// rail we scroll to the corresponding column by using
+                      /// the `scroll_to_index` package.
                       onDestinationSelected: (int index) {
+                        /// Before we scroll to the corresponding column, we
+                        /// also update the [deckLayoutSmallInitialTabIndex] in
+                        /// the [LayoutRepository] so that the correct tab is
+                        /// also selected when a user switches to the small
+                        /// layout.
+                        Provider.of<LayoutRepository>(
+                          context,
+                          listen: false,
+                        ).deckLayoutSmallInitialTabIndex = index;
+
                         _scrollController.scrollToIndex(
                           index,
                           preferPosition: AutoScrollPosition.end,
@@ -244,8 +255,8 @@ class _DeckLayoutLargeState extends State<DeckLayoutLarge> {
 
                       /// We add two additional items to the navigation rail via
                       /// the trailing property. These items are used to allow a
-                      /// user to create a new column and to go to the settings of
-                      /// the app.
+                      /// user to create a new column and to go to the settings
+                      /// of the app.
                       trailing: Expanded(
                         child: Align(
                           alignment: Alignment.bottomCenter,

app/lib/widgets/deck/deck_layout_small.dart

@@ -4,6 +4,7 @@ import 'package:provider/provider.dart';
 
 import 'package:feeddeck/models/source.dart';
 import 'package:feeddeck/repositories/app_repository.dart';
+import 'package:feeddeck/repositories/layout_repository.dart';
 import 'package:feeddeck/utils/constants.dart';
 import 'package:feeddeck/widgets/column/column_layout.dart';
 import 'package:feeddeck/widgets/column/create/create_column.dart';
@@ -20,6 +21,30 @@ import 'package:feeddeck/widgets/source/source_icon.dart';
 class DeckLayoutSmall extends StatelessWidget {
   const DeckLayoutSmall({super.key});
 
+  /// [_getInitialIndex] returns the initial index for the
+  /// [DefaultTabController]. The intial index is saved in the
+  /// [LayoutRepository] so that we can use it when a user switches between the
+  /// small and large layout or between decks. To not run into errors we have to
+  /// check that a column which should be used was not already deleted by a
+  /// user before returning the index. If a column was deleted we reset the
+  /// index to 0.
+  int _getInitialIndex(BuildContext context, int columnsLength) {
+    final deckLayoutSmallInitialTabIndex = Provider.of<LayoutRepository>(
+      context,
+      listen: false,
+    ).deckLayoutSmallInitialTabIndex;
+
+    if (deckLayoutSmallInitialTabIndex >= columnsLength) {
+      Provider.of<LayoutRepository>(
+        context,
+        listen: false,
+      ).deckLayoutSmallInitialTabIndex = 0;
+      return 0;
+    }
+
+    return deckLayoutSmallInitialTabIndex;
+  }
+
   /// [_buildTabs] returns all items for the tab bar. The items are generated
   /// by looping thorugh the `columns` defined in the [AppRepository].
   ///
@@ -124,6 +149,8 @@ class DeckLayoutSmall extends StatelessWidget {
     AppRepository app = Provider.of<AppRepository>(context, listen: true);
 
     return DefaultTabController(
+      key: ValueKey(app.activeDeckId),
+      initialIndex: _getInitialIndex(context, app.columns.length),
       length: app.columns.length,
       child: Scaffold(
         bottomNavigationBar: SafeArea(
@@ -148,6 +175,18 @@ class DeckLayoutSmall extends StatelessWidget {
                     ),
                     child: TabBar(
                       isScrollable: true,
+                      tabAlignment: TabAlignment.start,
+                      dividerHeight: 0,
+                      onTap: (int index) {
+                        /// When the user clicks on a tab we update the index in
+                        /// the [LayoutRepository] so that we can use it as
+                        /// initial index when the widget is rebuild (e.g. when
+                        /// a user switches between the large and small layout).
+                        Provider.of<LayoutRepository>(
+                          context,
+                          listen: false,
+                        ).deckLayoutSmallInitialTabIndex = index;
+                      },
                       tabs: _buildTabs(context),
                     ),
                   ),

app/lib/widgets/general/elevated_button_progress_indicator.dart

@@ -24,7 +24,7 @@ import 'package:flutter/material.dart';
 ///             ),
 ///     )
 class ElevatedButtonProgressIndicator extends StatelessWidget {
-  const ElevatedButtonProgressIndicator({Key? key}) : super(key: key);
+  const ElevatedButtonProgressIndicator({super.key});
 
   @override
   Widget build(BuildContext context) {

app/lib/widgets/home/home.dart

@@ -39,7 +39,7 @@ class _HomeState extends State<Home> {
     });
 
     if (!kIsWeb && (Platform.isIOS || Platform.isAndroid)) {
-      _appLinks.allUriLinkStream.listen((uri) {
+      _appLinks.uriLinkStream.listen((uri) {
         if (uri
             .toString()
             .startsWith('app.feeddeck.feeddeck://signin-callback/')) {

app/lib/widgets/item/details/item_details.dart

@@ -7,9 +7,12 @@ import 'package:feeddeck/models/source.dart';
 import 'package:feeddeck/repositories/items_repository.dart';
 import 'package:feeddeck/utils/constants.dart';
 import 'package:feeddeck/utils/openurl.dart';
+import 'package:feeddeck/widgets/item/details/item_details_fourchan.dart';
+import 'package:feeddeck/widgets/item/details/item_details_lemmy.dart';
 import 'package:feeddeck/widgets/item/details/item_details_mastodon.dart';
 import 'package:feeddeck/widgets/item/details/item_details_medium.dart';
 import 'package:feeddeck/widgets/item/details/item_details_nitter.dart';
+import 'package:feeddeck/widgets/item/details/item_details_pinterest.dart';
 import 'package:feeddeck/widgets/item/details/item_details_podcast.dart';
 import 'package:feeddeck/widgets/item/details/item_details_reddit.dart';
 import 'package:feeddeck/widgets/item/details/item_details_rss.dart';
@@ -59,6 +62,12 @@ class ItemDetails extends StatelessWidget {
 
   Widget _buildDetails() {
     switch (source.type) {
+      case FDSourceType.fourchan:
+        return ItemDetailsFourChan(
+          item: item,
+          source: source,
+        );
+
       /// Sources with type [FDSourceType.github] do not provide a details view,
       /// because we directly open the link, when the user clicks on the
       /// corresponding preview item.
@@ -70,6 +79,11 @@ class ItemDetails extends StatelessWidget {
       /// corresponding preview item.
       case FDSourceType.googlenews:
         return Container();
+      case FDSourceType.lemmy:
+        return ItemDetailsLemmy(
+          item: item,
+          source: source,
+        );
       case FDSourceType.mastodon:
         return ItemDetailsMastodon(
           item: item,
@@ -85,6 +99,11 @@ class ItemDetails extends StatelessWidget {
           item: item,
           source: source,
         );
+      case FDSourceType.pinterest:
+        return ItemDetailsPinterest(
+          item: item,
+          source: source,
+        );
       case FDSourceType.podcast:
         return ItemDetailsPodcast(
           item: item,
@@ -110,11 +129,6 @@ class ItemDetails extends StatelessWidget {
           item: item,
           source: source,
         );
-      // case FDSourceType.x:
-      //   return ItemDetailsX(
-      //     item: item,
-      //     source: source,
-      //   );
       case FDSourceType.youtube:
         return ItemDetailsYoutube(
           item: item,
@@ -196,7 +210,7 @@ class ItemDetails extends StatelessWidget {
                     Constants.elevatedButtonSize,
                   ),
                 ),
-                label: const Text('Open link'),
+                label: const Text('Open Link'),
                 onPressed: () => _openUrl(item.link),
                 icon: const Icon(Icons.launch),
               ),

app/lib/widgets/item/details/item_details_fourchan.dart

@@ -2,13 +2,12 @@ import 'package:flutter/material.dart';
 
 import 'package:feeddeck/models/item.dart';
 import 'package:feeddeck/models/source.dart';
-import 'package:feeddeck/utils/constants.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_description.dart';
-import 'package:feeddeck/widgets/item/details/utils/item_media_gallery.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_subtitle.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_title.dart';
 
-class ItemDetailsX extends StatelessWidget {
-  const ItemDetailsX({
+class ItemDetailsFourChan extends StatelessWidget {
+  const ItemDetailsFourChan({
     super.key,
     required this.item,
     required this.source,
@@ -23,6 +22,9 @@ class ItemDetailsX extends StatelessWidget {
       crossAxisAlignment: CrossAxisAlignment.stretch,
       mainAxisAlignment: MainAxisAlignment.start,
       children: [
+        ItemTitle(
+          itemTitle: item.title,
+        ),
         ItemSubtitle(
           item: item,
           source: source,
@@ -32,16 +34,6 @@ class ItemDetailsX extends StatelessWidget {
           sourceFormat: DescriptionFormat.html,
           tagetFormat: DescriptionFormat.markdown,
         ),
-        const SizedBox(
-          height: Constants.spacingExtraSmall,
-        ),
-        ItemMediaGallery(
-          itemMedias: item.options != null && item.options!.containsKey('media')
-              ? (item.options!['media'] as List)
-                  .map((item) => item as String)
-                  .toList()
-              : null,
-        ),
       ],
     );
   }

app/lib/widgets/item/details/item_details_lemmy.dart

@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+
+import 'package:feeddeck/models/item.dart';
+import 'package:feeddeck/models/source.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_description.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_media.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_piped/item_piped_video.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_subtitle.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_title.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_videos.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_youtube/item_youtube_video.dart';
+
+class ItemDetailsLemmy extends StatelessWidget {
+  const ItemDetailsLemmy({
+    super.key,
+    required this.item,
+    required this.source,
+  });
+
+  final FDItem item;
+  final FDSource source;
+
+  /// [_buildMedia] builds the media widget for the item. The media widget can
+  /// display an image, a video or y YouTube video.
+  ///
+  /// See the `getMedia` function in the `lemmy.ts` file, for a list of
+  /// extension which are a image / video.
+  Widget _buildMedia() {
+    if (item.media != null && item.media! != '') {
+      final mediaUrl = Uri.parse(item.media!);
+
+      if (mediaUrl.path.endsWith('.jpg') ||
+          mediaUrl.path.endsWith('.jpeg') ||
+          mediaUrl.path.endsWith('.png') ||
+          mediaUrl.path.endsWith('.gif')) {
+        return ItemMedia(
+          itemMedia: item.media,
+        );
+      }
+
+      if (mediaUrl.path.endsWith('.mp4')) {
+        return ItemVideoPlayer(
+          video: item.media!,
+        );
+      }
+
+      if (item.media!.startsWith('https://youtu.be/') ||
+          item.media!.startsWith('https://www.youtube.com/watch?') ||
+          item.media!.startsWith('https://m.youtube.com/watch?')) {
+        return ItemYoutubeVideo(
+          null,
+          item.media!,
+        );
+      }
+
+      if (item.media!.startsWith('https://piped.video/watch?v=') ||
+          item.media!.startsWith('https://piped.video/')) {
+        return ItemPipedVideo(
+          null,
+          item.media!,
+        );
+      }
+    }
+
+    return Container();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      mainAxisAlignment: MainAxisAlignment.start,
+      children: [
+        ItemTitle(
+          itemTitle: item.title,
+        ),
+        ItemSubtitle(
+          item: item,
+          source: source,
+        ),
+        _buildMedia(),
+        ItemDescription(
+          itemDescription: item.description,
+          sourceFormat: DescriptionFormat.html,
+          tagetFormat: DescriptionFormat.markdown,
+        ),
+      ],
+    );
+  }
+}

app/lib/widgets/item/details/item_details_mastodon.dart

@@ -5,7 +5,10 @@ import 'package:feeddeck/models/source.dart';
 import 'package:feeddeck/utils/constants.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_description.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_media_gallery.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_piped/item_piped_video.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_subtitle.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_videos.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_youtube/item_youtube_video.dart';
 
 class ItemDetailsMastodon extends StatelessWidget {
   const ItemDetailsMastodon({
@@ -17,6 +20,116 @@ class ItemDetailsMastodon extends StatelessWidget {
   final FDItem item;
   final FDSource source;
 
+  /// [_getYoutubeUrl] returns a YouTube url when the provided [description]
+  /// contains a YouTube link. If the [description] does not contain a YouTube
+  /// link, the function returns `null`.
+  String? _getYoutubeUrl(String description) {
+    final exp = RegExp(r'(?:(?:https?|ftp):\/\/)?[\w/\-?=%.]+\.[\w/\-?=%.]+');
+    final matches = exp.allMatches(description);
+
+    for (var match in matches) {
+      final url = description.substring(match.start, match.end);
+      if (url.startsWith('https://youtu.be/') ||
+          url.startsWith('https://www.youtube.com/watch?') ||
+          url.startsWith('https://m.youtube.com/watch?')) {
+        return url;
+      }
+    }
+
+    return null;
+  }
+
+  /// [_getPipedUrl] returns a Piped url when the provided [description]
+  /// contains a Piped link. If the [description] does not contain a Piped link,
+  /// the function returns `null`.
+  String? _getPipedUrl(String description) {
+    final exp = RegExp(r'(?:(?:https?|ftp):\/\/)?[\w/\-?=%.]+\.[\w/\-?=%.]+');
+    final matches = exp.allMatches(description);
+
+    for (var match in matches) {
+      final url = description.substring(match.start, match.end);
+      if (url.startsWith('https://piped.video/watch?v=') ||
+          url.startsWith('https://piped.video/')) {
+        return url;
+      }
+    }
+
+    return null;
+  }
+
+  /// [_buildDescription] builds the description widget for the item. If the
+  /// description contains a YouTube link, we render the [ItemYoutubeVideo]
+  /// and the [ItemDescription] widgets. If the description does not contain a
+  /// YouTube link, we render the [ItemDescription], [ItemMediaGallery] and
+  /// [ItemVideos] widget.
+  List<Widget> _buildDescription() {
+    final youtubeUrl =
+        item.description != null ? _getYoutubeUrl(item.description!) : null;
+
+    if (youtubeUrl != null) {
+      return [
+        ItemYoutubeVideo(
+          item.media,
+          youtubeUrl,
+        ),
+        ItemDescription(
+          itemDescription: item.description,
+          sourceFormat: DescriptionFormat.html,
+          tagetFormat: DescriptionFormat.markdown,
+          disableImages: true,
+        ),
+      ];
+    }
+
+    final pipedUrl =
+        item.description != null ? _getPipedUrl(item.description!) : null;
+
+    if (pipedUrl != null) {
+      return [
+        ItemPipedVideo(
+          item.media,
+          pipedUrl,
+        ),
+        ItemDescription(
+          itemDescription: item.description,
+          sourceFormat: DescriptionFormat.html,
+          tagetFormat: DescriptionFormat.markdown,
+          disableImages: true,
+        ),
+      ];
+    }
+
+    return [
+      ItemDescription(
+        itemDescription: item.description,
+        sourceFormat: DescriptionFormat.html,
+        tagetFormat: DescriptionFormat.markdown,
+        disableImages: true,
+      ),
+      const SizedBox(
+        height: Constants.spacingExtraSmall,
+      ),
+      ItemMediaGallery(
+        itemMedias: item.options != null &&
+                item.options!.containsKey('media') &&
+                item.options!['media'] != null
+            ? (item.options!['media'] as List)
+                .map((item) => item as String)
+                .toList()
+            : null,
+      ),
+      ItemVideos(
+        videos: item.options != null &&
+                item.options!.containsKey('videos') &&
+                item.options!['videos'] != null
+            ? (item.options!['videos'] as List)
+                .map((item) => item as String)
+                .toList()
+            : null,
+      ),
+    ];
+  }
+
   @override
   Widget build(BuildContext context) {
     return Column(
@@ -27,21 +140,7 @@ class ItemDetailsMastodon extends StatelessWidget {
           item: item,
           source: source,
         ),
-        ItemDescription(
-          itemDescription: item.description,
-          sourceFormat: DescriptionFormat.html,
-          tagetFormat: DescriptionFormat.markdown,
-        ),
-        const SizedBox(
-          height: Constants.spacingExtraSmall,
-        ),
-        ItemMediaGallery(
-          itemMedias: item.options != null && item.options!.containsKey('media')
-              ? (item.options!['media'] as List)
-                  .map((item) => item as String)
-                  .toList()
-              : null,
-        ),
+        ..._buildDescription(),
       ],
     );
   }

app/lib/widgets/item/details/item_details_nitter.dart

@@ -5,8 +5,8 @@ import 'package:feeddeck/models/source.dart';
 import 'package:feeddeck/utils/constants.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_description.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_media_gallery.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_piped/item_piped_video.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_subtitle.dart';
-import 'package:feeddeck/widgets/item/details/utils/item_title.dart';
 
 class ItemDetailsNitter extends StatelessWidget {
   const ItemDetailsNitter({
@@ -18,18 +18,37 @@ class ItemDetailsNitter extends StatelessWidget {
   final FDItem item;
   final FDSource source;
 
-  @override
-  Widget build(BuildContext context) {
-    return Column(
-      crossAxisAlignment: CrossAxisAlignment.stretch,
-      mainAxisAlignment: MainAxisAlignment.start,
-      children: [
-        ItemTitle(
-          itemTitle: item.title,
-        ),
-        ItemSubtitle(
-          item: item,
-          source: source,
+  /// [_getPipedUrl] returns a Piped url when the provided [description]
+  /// contains a Piped link. If the [description] does not contain a Piped link,
+  /// the function returns `null`.
+  String? _getPipedUrl(String description) {
+    final exp = RegExp(r'(?:(?:https?|ftp):\/\/)?[\w/\-?=%.]+\.[\w/\-?=%.]+');
+    final matches = exp.allMatches(description);
+
+    for (var match in matches) {
+      final url = description.substring(match.start, match.end);
+      if (url.startsWith('https://piped.video/watch?v=') ||
+          url.startsWith('https://piped.video/')) {
+        return url;
+      }
+    }
+
+    return null;
+  }
+
+  /// [_buildDescription] builds the description widget for the item. If the
+  /// description contains a Piped link, we render the [ItemPipedVideo] and the
+  /// [ItemDescription] widgets. If the description does not contain a Piped
+  /// link, we render the [ItemDescription] and [ItemMediaGallery] widget.
+  List<Widget> _buildDescription() {
+    final pipedUrl =
+        item.description != null ? _getPipedUrl(item.description!) : null;
+
+    if (pipedUrl != null) {
+      return [
+        ItemPipedVideo(
+          item.media,
+          pipedUrl,
         ),
         ItemDescription(
           itemDescription: item.description,
@@ -37,16 +56,40 @@ class ItemDetailsNitter extends StatelessWidget {
           tagetFormat: DescriptionFormat.markdown,
           disableImages: true,
         ),
-        const SizedBox(
-          height: Constants.spacingExtraSmall,
-        ),
-        ItemMediaGallery(
-          itemMedias: item.options != null && item.options!.containsKey('media')
-              ? (item.options!['media'] as List)
-                  .map((item) => item as String)
-                  .toList()
-              : null,
+      ];
+    }
+
+    return [
+      ItemDescription(
+        itemDescription: item.description,
+        sourceFormat: DescriptionFormat.html,
+        tagetFormat: DescriptionFormat.markdown,
+        disableImages: true,
+      ),
+      const SizedBox(
+        height: Constants.spacingExtraSmall,
+      ),
+      ItemMediaGallery(
+        itemMedias: item.options != null && item.options!.containsKey('media')
+            ? (item.options!['media'] as List)
+                .map((item) => item as String)
+                .toList()
+            : null,
+      ),
+    ];
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      mainAxisAlignment: MainAxisAlignment.start,
+      children: [
+        ItemSubtitle(
+          item: item,
+          source: source,
         ),
+        ..._buildDescription(),
       ],
     );
   }

app/lib/widgets/item/details/item_details_pinterest.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+
+import 'package:feeddeck/models/item.dart';
+import 'package:feeddeck/models/source.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_description.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_subtitle.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_title.dart';
+
+class ItemDetailsPinterest extends StatelessWidget {
+  const ItemDetailsPinterest({
+    super.key,
+    required this.item,
+    required this.source,
+  });
+
+  final FDItem item;
+  final FDSource source;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      mainAxisAlignment: MainAxisAlignment.start,
+      children: [
+        ItemTitle(
+          itemTitle: item.title,
+        ),
+        ItemSubtitle(
+          item: item,
+          source: source,
+        ),
+        ItemDescription(
+          itemDescription: item.description,
+          sourceFormat: DescriptionFormat.html,
+          tagetFormat: DescriptionFormat.markdown,
+        ),
+      ],
+    );
+  }
+}

app/lib/widgets/item/details/item_details_podcast.dart

@@ -1,15 +1,13 @@
 import 'package:flutter/material.dart';
 
-import 'package:cached_network_image/cached_network_image.dart';
-
 import 'package:feeddeck/models/item.dart';
 import 'package:feeddeck/models/source.dart';
 import 'package:feeddeck/utils/constants.dart';
-import 'package:feeddeck/utils/image_url.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_audio_palyer/item_audio_player.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_description.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_subtitle.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_title.dart';
+import 'package:feeddeck/widgets/utils/cached_network_image.dart';
 
 class ItemDetailsPodcast extends StatelessWidget {
   const ItemDetailsPodcast({
@@ -21,14 +19,6 @@ class ItemDetailsPodcast extends StatelessWidget {
   final FDItem item;
   final FDSource source;
 
-  String? _buildImageUrl() {
-    if (source.icon != null && source.icon != '') {
-      return getImageUrl(FDImageType.source, source.icon!);
-    }
-
-    return null;
-  }
-
   /// [_buildImage] returns an image which is displayed above the
   /// [ItemAudioPlayer]. For this image we are using the [source.icon] if it is
   /// available. If the [source.icon] is not available, we are not displaying
@@ -55,8 +45,6 @@ class ItemDetailsPodcast extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final imageUrl = _buildImageUrl();
-
     return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       mainAxisAlignment: MainAxisAlignment.start,
@@ -74,7 +62,7 @@ class ItemDetailsPodcast extends StatelessWidget {
         /// directly listen to the podcast episode.
         Column(
           children: [
-            _buildImage(imageUrl),
+            _buildImage(source.icon),
             const SizedBox(
               height: Constants.spacingMiddle,
             ),
@@ -83,7 +71,7 @@ class ItemDetailsPodcast extends StatelessWidget {
               audioFile: item.media!,
               audioTitle: item.title,
               audioArtist: source.title,
-              audioArt: imageUrl,
+              audioArt: getImageUrl(source.icon!),
             ),
             const SizedBox(
               height: Constants.spacingMiddle,

app/lib/widgets/item/details/item_details_reddit.dart

@@ -3,8 +3,10 @@ import 'package:flutter/material.dart';
 import 'package:feeddeck/models/item.dart';
 import 'package:feeddeck/models/source.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_description.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_piped/item_piped_video.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_subtitle.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_title.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_youtube/item_youtube_video.dart';
 
 class ItemDetailsReddit extends StatelessWidget {
   const ItemDetailsReddit({
@@ -16,6 +18,98 @@ class ItemDetailsReddit extends StatelessWidget {
   final FDItem item;
   final FDSource source;
 
+  /// [_getYoutubeUrl] returns a YouTube url when the provided [description]
+  /// contains a YouTube link. If the [description] does not contain a YouTube
+  /// link, the function returns `null`.
+  String? _getYoutubeUrl(String description) {
+    final exp = RegExp(r'(?:(?:https?|ftp):\/\/)?[\w/\-?=%.]+\.[\w/\-?=%.]+');
+    final matches = exp.allMatches(description);
+
+    for (var match in matches) {
+      final url = description.substring(match.start, match.end);
+      if (url.startsWith('https://youtu.be/') ||
+          url.startsWith('https://www.youtube.com/watch?') ||
+          url.startsWith('https://m.youtube.com/watch?')) {
+        return url;
+      }
+    }
+
+    return null;
+  }
+
+  /// [_getPipedUrl] returns a Piped url when the provided [description]
+  /// contains a Piped link. If the [description] does not contain a Piped link,
+  /// the function returns `null`.
+  String? _getPipedUrl(String description) {
+    final exp = RegExp(r'(?:(?:https?|ftp):\/\/)?[\w/\-?=%.]+\.[\w/\-?=%.]+');
+    final matches = exp.allMatches(description);
+
+    for (var match in matches) {
+      final url = description.substring(match.start, match.end);
+      if (url.startsWith('https://piped.video/watch?v=') ||
+          url.startsWith('https://piped.video/')) {
+        return url;
+      }
+    }
+
+    return null;
+  }
+
+  /// [_buildDescription] builds the description widget for the item. If the
+  /// description contains a YouTube link, we render the [ItemYoutubeVideo]
+  /// and the [ItemDescription] widgets. If the description contains a Piped
+  /// link, we render the [ItemPipedVideo] and the [ItemDescription] widget. If
+  /// the description does not contain a YouTube or Piped link, we only render
+  /// the [ItemDescription] widget.
+  ///
+  /// If the description containes a YouTube link we also have to disable the
+  /// rendering of images within the [ItemDescription] widget.
+  List<Widget> _buildDescription() {
+    final youtubeUrl =
+        item.description != null ? _getYoutubeUrl(item.description!) : null;
+
+    if (youtubeUrl != null) {
+      return [
+        ItemYoutubeVideo(
+          item.media,
+          youtubeUrl,
+        ),
+        ItemDescription(
+          itemDescription: item.description,
+          sourceFormat: DescriptionFormat.html,
+          tagetFormat: DescriptionFormat.markdown,
+          disableImages: true,
+        ),
+      ];
+    }
+
+    final pipedUrl =
+        item.description != null ? _getPipedUrl(item.description!) : null;
+
+    if (pipedUrl != null) {
+      return [
+        ItemPipedVideo(
+          item.media,
+          pipedUrl,
+        ),
+        ItemDescription(
+          itemDescription: item.description,
+          sourceFormat: DescriptionFormat.html,
+          tagetFormat: DescriptionFormat.markdown,
+          disableImages: true,
+        ),
+      ];
+    }
+
+    return [
+      ItemDescription(
+        itemDescription: item.description,
+        sourceFormat: DescriptionFormat.html,
+        tagetFormat: DescriptionFormat.markdown,
+      ),
+    ];
+  }
+
   @override
   Widget build(BuildContext context) {
     return Column(
@@ -29,11 +123,7 @@ class ItemDetailsReddit extends StatelessWidget {
           item: item,
           source: source,
         ),
-        ItemDescription(
-          itemDescription: item.description,
-          sourceFormat: DescriptionFormat.html,
-          tagetFormat: DescriptionFormat.markdown,
-        ),
+        ..._buildDescription(),
       ],
     );
   }

app/lib/widgets/item/details/item_details_rss.dart

@@ -1,11 +1,14 @@
 import 'package:flutter/material.dart';
 
+import 'package:html/parser.dart' show parse;
+
 import 'package:feeddeck/models/item.dart';
 import 'package:feeddeck/models/source.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_description.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_media.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_subtitle.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_title.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_videos.dart';
 
 class ItemDetailsRSS extends StatelessWidget {
   const ItemDetailsRSS({
@@ -17,6 +20,31 @@ class ItemDetailsRSS extends StatelessWidget {
   final FDItem item;
   final FDSource source;
 
+  /// [_buildMedia] renders an image or video for the item. If the description
+  /// of the item contains an image we do not render the image, because it could
+  /// already be rendered via the description.
+  ///
+  /// Videos are currently always rendered, because they will not be rendered,
+  /// by the [MarkdownBody] widget.
+  Widget _buildMedia() {
+    if (item.options != null &&
+        item.options!.containsKey('video') &&
+        item.options!['video'] != null) {
+      return ItemVideos(videos: [item.options!['video']]);
+    }
+
+    /// Check if the description of the RSS feed contains an image. If this is
+    /// the case we do not render the image from the [item.media] because the
+    /// image is already rendered in the [ItemDescription] widget.
+    if (parse(item.description).querySelectorAll('img').isNotEmpty) {
+      return Container();
+    }
+
+    return ItemMedia(
+      itemMedia: item.media,
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     return Column(
@@ -30,13 +58,11 @@ class ItemDetailsRSS extends StatelessWidget {
           item: item,
           source: source,
         ),
-        ItemMedia(
-          itemMedia: item.media,
-        ),
+        _buildMedia(),
         ItemDescription(
           itemDescription: item.description,
-          sourceFormat: DescriptionFormat.plain,
-          tagetFormat: DescriptionFormat.plain,
+          sourceFormat: DescriptionFormat.html,
+          tagetFormat: DescriptionFormat.markdown,
         ),
       ],
     );

app/lib/widgets/item/details/item_details_youtube.dart

@@ -1,17 +1,11 @@
-import 'dart:io';
-
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
-import 'package:youtube_player_iframe/youtube_player_iframe.dart';
-
 import 'package:feeddeck/models/item.dart';
 import 'package:feeddeck/models/source.dart';
-import 'package:feeddeck/utils/constants.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_description.dart';
-import 'package:feeddeck/widgets/item/details/utils/item_media.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_subtitle.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_title.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_youtube/item_youtube_video.dart';
 
 class ItemDetailsYoutube extends StatelessWidget {
   const ItemDetailsYoutube({
@@ -23,22 +17,6 @@ class ItemDetailsYoutube extends StatelessWidget {
   final FDItem item;
   final FDSource source;
 
-  /// [_buildMedia] returns the media element for the item. On the web we are
-  /// using the [YoutubeVideo] widget to render the video, so that a user can
-  /// directly play the YouTube video. On all other platforms we display the
-  /// thumbnail of the video.
-  Widget _buildMedia() {
-    if (kIsWeb || Platform.isAndroid || Platform.isIOS) {
-      return YoutubeVideo(
-        videoUrl: item.link,
-      );
-    }
-
-    return ItemMedia(
-      itemMedia: item.media,
-    );
-  }
-
   @override
   Widget build(BuildContext context) {
     return Column(
@@ -52,7 +30,10 @@ class ItemDetailsYoutube extends StatelessWidget {
           item: item,
           source: source,
         ),
-        _buildMedia(),
+        ItemYoutubeVideo(
+          item.media,
+          item.link,
+        ),
         ItemDescription(
           itemDescription: item.description,
           sourceFormat: DescriptionFormat.plain,
@@ -62,51 +43,3 @@ class ItemDetailsYoutube extends StatelessWidget {
     );
   }
 }
-
-class YoutubeVideo extends StatefulWidget {
-  const YoutubeVideo({
-    super.key,
-    required this.videoUrl,
-  });
-
-  final String videoUrl;
-
-  @override
-  State<YoutubeVideo> createState() => _YoutubeVideoState();
-}
-
-class _YoutubeVideoState extends State<YoutubeVideo> {
-  late YoutubePlayerController _controller;
-
-  @override
-  void initState() {
-    super.initState();
-    _controller = YoutubePlayerController(
-      params: const YoutubePlayerParams(
-        showControls: true,
-        showFullscreenButton: false,
-      ),
-    );
-
-    _controller.cueVideoByUrl(mediaContentUrl: widget.videoUrl);
-    _controller.cueVideoById(
-      videoId: widget.videoUrl.replaceFirst(
-        'https://www.youtube.com/watch?v=',
-        '',
-      ),
-    );
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      padding: const EdgeInsets.only(
-        bottom: Constants.spacingMiddle,
-      ),
-      child: YoutubePlayer(
-        controller: _controller,
-        aspectRatio: 16 / 9,
-      ),
-    );
-  }
-}

app/lib/widgets/item/details/utils/item_audio_palyer/item_audio_player.dart

@@ -65,6 +65,13 @@ class _ItemAudioPlayerState extends State<ItemAudioPlayer> {
 
   @override
   void dispose() {
+    /// We have to dispose the [_player] when the widget is disposed, otherwise
+    /// the audio will continue to play in the background.
+    ///
+    /// On Linux and Windows the audio will continue to play even if the
+    /// [_player] is disposed, so that we also call the `pause` method of the
+    /// [_player] to stop the audio.
+    _player.pause();
     _player.dispose();
     super.dispose();
   }

app/lib/widgets/item/details/utils/item_audio_palyer/item_audio_player_init/item_audio_player_init.dart

@@ -0,0 +1,11 @@
+library item_audio_player_init;
+
+import 'item_audio_player_init_stub.dart'
+    if (dart.library.io) 'item_audio_player_init_native.dart'
+    if (dart.library.html) 'item_audio_player_init_web.dart';
+
+abstract class ItemAudioPlayerInit {
+  void init();
+
+  factory ItemAudioPlayerInit() => getItemAudioPlayerInit();
+}

app/lib/widgets/item/details/utils/item_audio_palyer/item_audio_player_init/item_audio_player_init_native.dart

@@ -0,0 +1,12 @@
+import 'package:just_audio_media_kit/just_audio_media_kit.dart';
+
+import 'item_audio_player_init.dart';
+
+class ItemAudioPlayerInitNative implements ItemAudioPlayerInit {
+  @override
+  void init() {
+    JustAudioMediaKit.ensureInitialized();
+  }
+}
+
+ItemAudioPlayerInit getItemAudioPlayerInit() => ItemAudioPlayerInitNative();

app/lib/widgets/item/details/utils/item_audio_palyer/item_audio_player_init/item_audio_player_init_stub.dart

@@ -0,0 +1,5 @@
+import 'item_audio_player_init.dart';
+
+ItemAudioPlayerInit getItemAudioPlayerInit() => throw UnsupportedError(
+      'Can not ItemAudioPlayerInit without the packages dart:html or dart:io',
+    );

app/lib/widgets/item/details/utils/item_audio_palyer/item_audio_player_init/item_audio_player_init_web.dart

@@ -0,0 +1,8 @@
+import 'item_audio_player_init.dart';
+
+class ItemAudioPlayerInitWeb implements ItemAudioPlayerInit {
+  @override
+  void init() {}
+}
+
+ItemAudioPlayerInit getItemAudioPlayerInit() => ItemAudioPlayerInitWeb();

app/lib/widgets/item/details/utils/item_description.dart

@@ -1,14 +1,12 @@
-import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter_markdown/flutter_markdown.dart';
 import 'package:html2md/html2md.dart' as html2md;
-import 'package:supabase_flutter/supabase_flutter.dart';
 
 import 'package:feeddeck/utils/constants.dart';
 import 'package:feeddeck/utils/font.dart';
 import 'package:feeddeck/utils/openurl.dart';
+import 'package:feeddeck/widgets/utils/cached_network_image.dart';
 
 /// The [DescriptionFormat] enum defines the source and target format of a
 /// description.
@@ -47,7 +45,7 @@ class ItemDescription extends StatelessWidget {
   Widget _buildMarkdown(BuildContext context, String content) {
     return MarkdownBody(
       selectable: true,
-      data: content,
+      data: content.trim(),
       styleSheet: MarkdownStyleSheet(
         code: TextStyle(
           fontFamily: getMonospaceFontFamily(),
@@ -56,6 +54,15 @@ class ItemDescription extends StatelessWidget {
         codeblockDecoration: const BoxDecoration(
           color: Constants.secondary,
         ),
+        blockquoteDecoration: const BoxDecoration(
+          color: Constants.secondary,
+          border: Border(
+            left: BorderSide(
+              color: Constants.primary,
+              width: 1,
+            ),
+          ),
+        ),
       ),
       onTapLink: (text, href, title) {
         if (href != null) {
@@ -67,12 +74,6 @@ class ItemDescription extends StatelessWidget {
           return Container();
         }
 
-        String imageUrl = uri.toString();
-        if (kIsWeb) {
-          imageUrl =
-              '${Supabase.instance.client.functionsUrl}/image-proxy-v1?media=${Uri.encodeQueryComponent(imageUrl)}';
-        }
-
         return Container(
           padding: const EdgeInsets.only(
             bottom: Constants.spacingMiddle,
@@ -87,6 +88,9 @@ class ItemDescription extends StatelessWidget {
                   isDismissible: true,
                   useSafeArea: true,
                   backgroundColor: Colors.black,
+                  constraints: const BoxConstraints(
+                    maxWidth: double.infinity,
+                  ),
                   builder: (BuildContext context) {
                     return Scaffold(
                       backgroundColor: Colors.black,
@@ -95,7 +99,7 @@ class ItemDescription extends StatelessWidget {
                           Center(
                             child: CachedNetworkImage(
                               fit: BoxFit.contain,
-                              imageUrl: imageUrl,
+                              imageUrl: uri.toString(),
                               placeholder: (context, url) => Container(),
                               errorWidget: (context, url, error) => Container(),
                             ),
@@ -121,7 +125,7 @@ class ItemDescription extends StatelessWidget {
               child: CachedNetworkImage(
                 width: double.infinity,
                 fit: BoxFit.contain,
-                imageUrl: imageUrl,
+                imageUrl: uri.toString(),
                 placeholder: (context, url) => Container(),
                 errorWidget: (context, url, error) => Container(),
               ),
@@ -135,7 +139,7 @@ class ItemDescription extends StatelessWidget {
   /// [_buildPlain] renders the provided [content] as plain text.
   Widget _buildPlain(String content) {
     return SelectableText(
-      content,
+      content.trim(),
       textAlign: TextAlign.left,
       style: const TextStyle(
         fontWeight: FontWeight.normal,
@@ -163,7 +167,9 @@ class ItemDescription extends StatelessWidget {
     if (sourceFormat == DescriptionFormat.html &&
         tagetFormat == DescriptionFormat.plain) {
       return _buildPlain(
-        itemDescription!.replaceAll(RegExp(r'<[^>]*>|&[^;]+;'), ''),
+        itemDescription!
+            .replaceAll(RegExp(r'<[^>]*>|&[^;]+;'), ' ')
+            .replaceAll(RegExp('\\s+'), ' '),
       );
     }
 

app/lib/widgets/item/details/utils/item_media.dart

@@ -1,9 +1,7 @@
 import 'package:flutter/material.dart';
 
-import 'package:cached_network_image/cached_network_image.dart';
-
 import 'package:feeddeck/utils/constants.dart';
-import 'package:feeddeck/utils/image_url.dart';
+import 'package:feeddeck/widgets/utils/cached_network_image.dart';
 
 /// The [ItemMedia] widget displays the media of an item. Based on the provided
 /// [itemMedia] value the media is displayed from the Supabase storage or
@@ -22,8 +20,6 @@ class ItemMedia extends StatelessWidget {
       return Container();
     }
 
-    final imageUrl = getImageUrl(FDImageType.item, itemMedia!);
-
     return Container(
       padding: const EdgeInsets.only(
         bottom: Constants.spacingMiddle,
@@ -38,6 +34,9 @@ class ItemMedia extends StatelessWidget {
               isDismissible: true,
               useSafeArea: true,
               backgroundColor: Colors.black,
+              constraints: const BoxConstraints(
+                maxWidth: double.infinity,
+              ),
               builder: (BuildContext context) {
                 return Scaffold(
                   backgroundColor: Colors.black,
@@ -46,7 +45,7 @@ class ItemMedia extends StatelessWidget {
                       Center(
                         child: CachedNetworkImage(
                           fit: BoxFit.contain,
-                          imageUrl: imageUrl,
+                          imageUrl: itemMedia!,
                           placeholder: (context, url) => Container(),
                           errorWidget: (context, url, error) => Container(),
                         ),
@@ -72,7 +71,7 @@ class ItemMedia extends StatelessWidget {
           child: CachedNetworkImage(
             width: double.infinity,
             fit: BoxFit.contain,
-            imageUrl: imageUrl,
+            imageUrl: itemMedia!,
             placeholder: (context, url) => Container(),
             errorWidget: (context, url, error) => Container(),
           ),

app/lib/widgets/item/details/utils/item_media_gallery.dart

@@ -1,15 +1,14 @@
 import 'package:flutter/material.dart';
 
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:carousel_slider/carousel_slider.dart';
 
 import 'package:feeddeck/utils/constants.dart';
-import 'package:feeddeck/utils/image_url.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_media.dart';
+import 'package:feeddeck/widgets/utils/cached_network_image.dart';
 
 /// The [ItemMediaGallery] widget can be used to display multiple media files in
-/// a gallery. Similar to the [ItemMedia] widget the provided [itemMedias]
 /// values can be displayed from the Supabase storage or directly from the
+/// a gallery. Similar to the [ItemMedia] widget the provided [itemMedias]
 /// provided url.
 class ItemMediaGallery extends StatelessWidget {
   const ItemMediaGallery({
@@ -22,8 +21,6 @@ class ItemMediaGallery extends StatelessWidget {
   /// [_buildSingleMedia] displays a single media file in the gallery. If the
   /// app runs on the web, we proxy the url through the Supabase functions.
   Widget _buildSingleMedia(BuildContext context, int itemMediaIndex) {
-    final imageUrl = getImageUrl(FDImageType.item, itemMedias![itemMediaIndex]);
-
     return MouseRegion(
       cursor: SystemMouseCursors.click,
       child: GestureDetector(
@@ -34,6 +31,9 @@ class ItemMediaGallery extends StatelessWidget {
             isDismissible: true,
             useSafeArea: true,
             backgroundColor: Colors.black,
+            constraints: const BoxConstraints(
+              maxWidth: double.infinity,
+            ),
             builder: (BuildContext context) {
               return ItemMediaGalleryModal(
                 initialItemMediaIndex: itemMediaIndex,
@@ -45,7 +45,7 @@ class ItemMediaGallery extends StatelessWidget {
         child: CachedNetworkImage(
           width: MediaQuery.of(context).size.width,
           fit: BoxFit.cover,
-          imageUrl: imageUrl,
+          imageUrl: itemMedias![itemMediaIndex],
           placeholder: (context, url) => Container(),
           errorWidget: (context, url, error) => Container(),
         ),
@@ -179,7 +179,7 @@ class ItemMediaGalleryModal extends StatelessWidget {
                   (itemMedia) => Center(
                     child: CachedNetworkImage(
                       fit: BoxFit.contain,
-                      imageUrl: getImageUrl(FDImageType.item, itemMedia),
+                      imageUrl: itemMedia,
                       placeholder: (context, url) => Container(),
                       errorWidget: (context, url, error) => Container(),
                     ),

app/lib/widgets/item/details/utils/item_piped/item_piped_video.dart

@@ -0,0 +1,20 @@
+library item_piped_video;
+
+import 'package:flutter/material.dart';
+
+import 'item_piped_video_stub.dart'
+    if (dart.library.io) 'item_piped_video_native.dart'
+    if (dart.library.html) 'item_piped_video_web.dart';
+
+/// The [ItemPipedVideo] class implements a widget that displays a video from
+/// Piped.
+///
+/// This is required because we are using different implementations for the web
+/// and for all other target platforms (Android, iOS, macOS, Windows, Linux). On
+/// the web we display the Piped video via an `iframe` element. On all other
+/// platforms we are using the [piped_client] package to fetch the url of the
+/// Piped video, which can then be displayed via our [ItemVideoPlayer] widget.
+abstract class ItemPipedVideo implements StatefulWidget {
+  factory ItemPipedVideo(String? imageUrl, String videoUrl) =>
+      getItemPipedVideo(imageUrl, videoUrl);
+}

app/lib/widgets/item/details/utils/item_piped/item_piped_video_native.dart

@@ -0,0 +1,125 @@
+import 'package:flutter/material.dart';
+
+import 'package:piped_client/piped_client.dart';
+
+import 'package:feeddeck/widgets/item/details/utils/item_media.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_videos.dart';
+import 'item_piped_video.dart';
+
+/// The [ItemVideoQuality] class represents a list of video qualities for the
+/// requested Piped video and the corresponding audio stream.
+class ItemVideoQualitiesAndAudio {
+  const ItemVideoQualitiesAndAudio({
+    required this.qualities,
+    required this.audio,
+  });
+
+  final List<ItemVideoQuality> qualities;
+  final String audio;
+}
+
+/// [_getVideoId] returns the id of the provide video url, which can be used to
+/// get the video streams via the Piped API.
+String _getVideoId(String videoUrl) {
+  if (videoUrl.startsWith('https://piped.video/watch?v=')) {
+    return videoUrl.replaceFirst(
+      'https://piped.video/watch?v=',
+      '',
+    );
+  }
+
+  if (videoUrl.startsWith('https://piped.video/')) {
+    return videoUrl.replaceFirst(
+      'https://piped.video/',
+      '',
+    );
+  }
+
+  return videoUrl;
+}
+
+class ItemPipedVideoNative extends StatefulWidget implements ItemPipedVideo {
+  const ItemPipedVideoNative({
+    super.key,
+    required this.imageUrl,
+    required this.videoUrl,
+  });
+
+  final String? imageUrl;
+  final String videoUrl;
+
+  @override
+  State<ItemPipedVideoNative> createState() => _ItemPipedVideoNativeState();
+}
+
+class _ItemPipedVideoNativeState extends State<ItemPipedVideoNative> {
+  final piped = PipedClient();
+  late Future<ItemVideoQualitiesAndAudio> _futureFetchVideoAndAudioUrls;
+
+  /// [_fetchVideoAndAudioUrls] fetches the video and audio urls for the
+  /// requested Piped video. Since the video streams do not contain the audio
+  /// stream, we have to fetch the audio stream separately.
+  Future<ItemVideoQualitiesAndAudio> _fetchVideoAndAudioUrls() async {
+    final streams = await piped.streams(_getVideoId(widget.videoUrl));
+
+    return ItemVideoQualitiesAndAudio(
+      qualities: streams.videoStreams
+          .where(
+            (element) =>
+                element.mimeType == 'video/mp4' &&
+                element.format == PipedVideoStreamFormat.mp4,
+          )
+          .map(
+            (element) => ItemVideoQuality(
+              quality: element.quality,
+              video: element.url,
+            ),
+          )
+          .toList(),
+      audio: streams.audioStreams
+          .where((element) => element.mimeType == 'audio/mp4')
+          .map((element) => element.url)
+          .first,
+    );
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    setState(() {
+      _futureFetchVideoAndAudioUrls = _fetchVideoAndAudioUrls();
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder(
+      future: _futureFetchVideoAndAudioUrls,
+      builder: (
+        BuildContext context,
+        AsyncSnapshot<ItemVideoQualitiesAndAudio> snapshot,
+      ) {
+        if (snapshot.connectionState == ConnectionState.none ||
+            snapshot.connectionState == ConnectionState.waiting ||
+            snapshot.hasError ||
+            snapshot.data == null ||
+            snapshot.data!.qualities.isEmpty ||
+            snapshot.data!.audio.isEmpty) {
+          return ItemMedia(itemMedia: widget.imageUrl);
+        }
+
+        return ItemVideoPlayer(
+          video: snapshot.data!.qualities.first.video,
+          audio: snapshot.data!.audio,
+          qualities: snapshot.data!.qualities,
+        );
+      },
+    );
+  }
+}
+
+ItemPipedVideo getItemPipedVideo(String? imageUrl, String videoUrl) =>
+    ItemPipedVideoNative(
+      imageUrl: imageUrl,
+      videoUrl: videoUrl,
+    );

app/lib/widgets/item/details/utils/item_piped/item_piped_video_stub.dart

@@ -0,0 +1,6 @@
+import 'item_piped_video.dart';
+
+ItemPipedVideo getItemPipedVideo(String? imageUrl, String videoUrl) =>
+    throw UnsupportedError(
+      'Can not ItemPipedVideo without the packages dart:html or dart:io',
+    );

app/lib/widgets/item/details/utils/item_piped/item_piped_video_web.dart

@@ -0,0 +1,90 @@
+import 'dart:html'; // ignore: avoid_web_libraries_in_flutter
+
+import 'dart:ui' as ui;
+
+import 'package:flutter/material.dart';
+
+import 'package:feeddeck/utils/constants.dart';
+import 'item_piped_video.dart';
+
+/// [_convertVideoUrl] converts the video url to a format that can be used to
+/// embed the video in an iframe.
+String _convertVideoUrl(String videoUrl) {
+  if (videoUrl.startsWith('https://piped.video/watch?v=')) {
+    return videoUrl.replaceFirst(
+      'https://piped.video/watch?v=',
+      'https://piped.video/embed/',
+    );
+  }
+
+  if (videoUrl.startsWith('https://piped.video/')) {
+    return videoUrl.replaceFirst(
+      'https://piped.video/',
+      'https://piped.video/embed/',
+    );
+  }
+
+  return videoUrl;
+}
+
+class ItemPipedVideoWeb extends StatefulWidget implements ItemPipedVideo {
+  const ItemPipedVideoWeb({
+    super.key,
+    required this.imageUrl,
+    required this.videoUrl,
+  });
+
+  final String? imageUrl;
+  final String videoUrl;
+
+  @override
+  State<ItemPipedVideoWeb> createState() => _ItemPipedVideoWebState();
+}
+
+class _ItemPipedVideoWebState extends State<ItemPipedVideoWeb> {
+  final IFrameElement _iframeElement = IFrameElement();
+
+  @override
+  void initState() {
+    super.initState();
+
+    _iframeElement.src = _convertVideoUrl(widget.videoUrl);
+    _iframeElement.style.border = 'none';
+    _iframeElement.allowFullscreen = true;
+
+    // ignore: undefined_prefixed_name
+    ui.platformViewRegistry.registerViewFactory(
+      widget.videoUrl,
+      (int viewId) => _iframeElement,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.only(
+        bottom: Constants.spacingMiddle,
+      ),
+      child: LayoutBuilder(
+        builder: (context, constraints) {
+          return Center(
+            child: SizedBox(
+              width: constraints.maxWidth,
+              height: constraints.maxWidth * 9.0 / 16.0,
+              child: HtmlElementView(
+                key: Key(widget.videoUrl),
+                viewType: widget.videoUrl,
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+}
+
+ItemPipedVideo getItemPipedVideo(String? imageUrl, String videoUrl) =>
+    ItemPipedVideoWeb(
+      imageUrl: imageUrl,
+      videoUrl: videoUrl,
+    );

app/lib/widgets/item/details/utils/item_subtitle.dart

@@ -20,26 +20,94 @@ class ItemSubtitle extends StatelessWidget {
   final FDItem item;
   final FDSource source;
 
+  /// [_buildChildren] is used to build the children of the [RichText] widget.
+  /// Depending on the provided information we will display the source title,
+  /// the author and the publishing time of the item. We also include an icon
+  /// for each information.
+  List<InlineSpan> _buildChildren() {
+    final List<InlineSpan> children = [];
+
+    if (source.title.trim().isNotEmpty) {
+      children.addAll([
+        WidgetSpan(
+          child: Icon(
+            source.type.icon,
+            size: 12,
+            color: Constants.secondaryTextColor,
+          ),
+        ),
+        TextSpan(
+          text: '  ${source.title.trim()}',
+        ),
+      ]);
+    } else {
+      children.addAll([
+        WidgetSpan(
+          child: Icon(
+            source.type.icon,
+            size: 12,
+            color: Constants.secondaryTextColor,
+          ),
+        ),
+        TextSpan(
+          text: '  ${source.type.toLocalizedString()}',
+        ),
+      ]);
+    }
+
+    if (item.author != null && item.author!.trim().isNotEmpty) {
+      children.addAll([
+        const TextSpan(
+          text: '     |     ',
+        ),
+        const WidgetSpan(
+          child: Icon(
+            Icons.person,
+            size: 12,
+            color: Constants.secondaryTextColor,
+          ),
+        ),
+        TextSpan(
+          text: '  ${item.author!.trim()}',
+        ),
+      ]);
+    }
+
+    children.addAll([
+      const TextSpan(
+        text: '     |     ',
+      ),
+      const WidgetSpan(
+        child: Icon(
+          Icons.schedule,
+          size: 12,
+          color: Constants.secondaryTextColor,
+        ),
+      ),
+      TextSpan(
+        text:
+            '  ${DateFormat.yMMMMd().add_Hm().format(DateTime.fromMillisecondsSinceEpoch(item.publishedAt * 1000))}',
+      ),
+    ]);
+
+    return children;
+  }
+
   @override
   Widget build(BuildContext context) {
-    final sourceType = source.type.toLocalizedString();
-    final sourceTitle = source.title != '' ? ' / ${source.title}' : '';
-    final author =
-        item.author != null && item.author != '' ? ' / ${item.author}' : '';
-    final publishedAt =
-        ' / ${DateFormat.yMMMMd().add_Hm().format(DateTime.fromMillisecondsSinceEpoch(item.publishedAt * 1000))}';
-
     return Padding(
       padding: const EdgeInsets.only(
         bottom: Constants.spacingMiddle,
       ),
-      child: SelectableText(
-        '$sourceType$sourceTitle$author$publishedAt',
+      child: RichText(
         textAlign: TextAlign.left,
-        style: const TextStyle(
-          color: Constants.secondaryTextColor,
-          fontWeight: FontWeight.bold,
-          fontSize: 10,
+        text: TextSpan(
+          style: const TextStyle(
+            color: Constants.secondaryTextColor,
+            fontWeight: FontWeight.bold,
+            fontSize: 10,
+          ),
+          children: _buildChildren(),
         ),
       ),
     );

app/lib/widgets/item/details/utils/item_title.dart

@@ -12,6 +12,10 @@ class ItemTitle extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    if (itemTitle.isEmpty) {
+      return Container();
+    }
+
     return SelectableText(
       itemTitle,
       textAlign: TextAlign.left,

app/lib/widgets/item/details/utils/item_videos.dart

@@ -0,0 +1,292 @@
+import 'dart:io';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/material.dart';
+
+import 'package:media_kit/media_kit.dart';
+import 'package:media_kit_video/media_kit_video.dart';
+
+import 'package:feeddeck/utils/constants.dart';
+
+/// The [ItemVideos] widget is used to display a list of videos, which can be
+/// played by the user. If the [videos] list is empty or null, the widget will
+/// not be displayed.
+class ItemVideos extends StatelessWidget {
+  const ItemVideos({
+    super.key,
+    required this.videos,
+  });
+
+  final List<String>? videos;
+
+  @override
+  Widget build(BuildContext context) {
+    if (videos == null || videos!.isEmpty) {
+      return Container();
+    }
+
+    return ListView.builder(
+      shrinkWrap: true,
+      itemCount: videos!.length,
+      itemBuilder: (context, index) {
+        return ItemVideoPlayer(video: videos![index]);
+      },
+    );
+  }
+}
+
+/// The [ItemVideoQuality] class is used to store the different qualities of a
+/// video. It is used in combination with the [ItemVideoPlayer] widget.
+class ItemVideoQuality {
+  const ItemVideoQuality({
+    required this.quality,
+    required this.video,
+  });
+
+  final String quality;
+  final String video;
+}
+
+/// The [ItemVideoPlayer] widget is used to display a video, which can be played
+/// by the user. It should be used in combination with the [ItemVideos] widget
+/// and is responsible for the actual implementation of the video player.
+///
+/// If the provided [video] doesn't contain the audio stream it can be passed
+/// via the [audio] parameter.
+///
+/// The optional [qualities] parameter can be used to display a list of
+/// different qualities for the video, so that a user can select a lower quality
+/// if the video is not loading fast enough.
+class ItemVideoPlayer extends StatefulWidget {
+  const ItemVideoPlayer({
+    super.key,
+    required this.video,
+    this.audio,
+    this.qualities,
+  });
+
+  final String video;
+  final String? audio;
+  final List<ItemVideoQuality>? qualities;
+
+  @override
+  State<ItemVideoPlayer> createState() => _ItemVideoPlayerState();
+}
+
+class _ItemVideoPlayerState extends State<ItemVideoPlayer> {
+  late final player = Player();
+  late final controller = VideoController(player);
+
+  /// [_buildQualityButton] returns a button which can be used to display a list
+  /// of different qualities for the video, so that a user can select a lower
+  /// quality if the video is not loading fast enough.
+  Widget _buildQualityButton() {
+    return IconButton(
+      onPressed: () {
+        showModalBottomSheet(
+          context: context,
+          isScrollControlled: true,
+          isDismissible: true,
+          useSafeArea: true,
+          elevation: 0,
+          backgroundColor: Colors.transparent,
+          constraints: const BoxConstraints(
+            maxWidth: Constants.centeredFormMaxWidth,
+          ),
+          builder: (BuildContext context) {
+            return SafeArea(
+              child: Container(
+                margin: const EdgeInsets.all(
+                  Constants.spacingMiddle,
+                ),
+                padding: const EdgeInsets.only(
+                  left: Constants.spacingMiddle,
+                  right: Constants.spacingMiddle,
+                ),
+                decoration: const BoxDecoration(
+                  color: Constants.background,
+                  borderRadius: BorderRadius.all(
+                    Radius.circular(Constants.spacingMiddle),
+                  ),
+                ),
+                child: Wrap(
+                  alignment: WrapAlignment.center,
+                  crossAxisAlignment: WrapCrossAlignment.center,
+                  children: widget.qualities!
+                      .asMap()
+                      .entries
+                      .map((quality) {
+                        if (quality.key == widget.qualities!.length - 1) {
+                          return [
+                            ListTile(
+                              mouseCursor: SystemMouseCursors.click,
+                              onTap: () async {
+                                Navigator.of(context).pop();
+                                await _playerOpen(quality.value.video);
+                              },
+                              title: Text(quality.value.quality),
+                            ),
+                          ];
+                        }
+
+                        return [
+                          ListTile(
+                            mouseCursor: SystemMouseCursors.click,
+                            onTap: () async {
+                              Navigator.of(context).pop();
+                              await _playerOpen(quality.value.video);
+                            },
+                            title: Text(quality.value.quality),
+                          ),
+                          const Divider(
+                            color: Constants.dividerColor,
+                            height: 1,
+                            thickness: 1,
+                          ),
+                        ];
+                      })
+                      .expand((e) => e)
+                      .toList(),
+                ),
+              ),
+            );
+          },
+        );
+      },
+      icon: const Icon(Icons.tune),
+    );
+  }
+
+  /// [_buildBottomButtonBar] returns the list of buttons which are displayed in
+  /// the bottom button bar of the video player. If the [qualities] parameter is
+  /// not null, a button to select the quality of the video is added to the
+  /// bottom button bar. If the [isMobile] parameter is true, the bottom button
+  /// bar contains the default buttons from the [MaterialVideoControlsThemeData]
+  /// theme, if it is false it contains the default buttons from the
+  /// [MaterialDesktopVideoControlsThemeData] theme.
+  List<Widget> _buildBottomButtonBar(bool isMobile) {
+    if (isMobile) {
+      if (widget.qualities != null) {
+        return [
+          const MaterialPositionIndicator(),
+          const Spacer(),
+          _buildQualityButton(),
+          const MaterialFullscreenButton(),
+        ];
+      }
+
+      return const [
+        MaterialPositionIndicator(),
+        Spacer(),
+        MaterialFullscreenButton(),
+      ];
+    }
+
+    if (widget.qualities != null) {
+      return [
+        const MaterialDesktopSkipPreviousButton(),
+        const MaterialDesktopPlayOrPauseButton(),
+        const MaterialDesktopSkipNextButton(),
+        const MaterialDesktopVolumeButton(),
+        const MaterialDesktopPositionIndicator(),
+        const Spacer(),
+        _buildQualityButton(),
+        const MaterialDesktopFullscreenButton(),
+      ];
+    }
+
+    return const [
+      MaterialDesktopSkipPreviousButton(),
+      MaterialDesktopPlayOrPauseButton(),
+      MaterialDesktopSkipNextButton(),
+      MaterialDesktopVolumeButton(),
+      MaterialDesktopPositionIndicator(),
+      Spacer(),
+      MaterialDesktopFullscreenButton(),
+    ];
+  }
+
+  /// [_playerOpen] opens the video player with the provided [video] and sets
+  /// the audio track if it is provided via the [audio] parameter.
+  Future<void> _playerOpen(String video) async {
+    await player.open(
+      Media(video),
+      play: false,
+    );
+
+    /// Load an external audio track when it is provided via the [audio]
+    /// parameter.
+    /// See: https://github.com/media-kit/media-kit?tab=readme-ov-file#load-external-audio-track
+    if (widget.audio != null) {
+      await player.setAudioTrack(
+        AudioTrack.uri(
+          widget.audio!,
+        ),
+      );
+    }
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _playerOpen(widget.video);
+    });
+  }
+
+  @override
+  void dispose() {
+    player.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.only(
+        bottom: Constants.spacingMiddle,
+      ),
+      child: LayoutBuilder(
+        builder: (context, constraints) {
+          return Center(
+            child: SizedBox(
+              width: constraints.maxWidth,
+              height: constraints.maxWidth * 9.0 / 16.0,
+              child: MaterialDesktopVideoControlsTheme(
+                normal: MaterialDesktopVideoControlsThemeData(
+                  bottomButtonBar: _buildBottomButtonBar(false),
+                  seekBarPositionColor: Constants.primary,
+                  seekBarThumbColor: Constants.primary,
+                ),
+                fullscreen: const MaterialDesktopVideoControlsThemeData(
+                  seekBarPositionColor: Constants.primary,
+                  seekBarThumbColor: Constants.primary,
+                ),
+                child: MaterialVideoControlsTheme(
+                  normal: MaterialVideoControlsThemeData(
+                    bottomButtonBar: _buildBottomButtonBar(true),
+                    seekBarPositionColor: Constants.primary,
+                    seekBarThumbColor: Constants.primary,
+                  ),
+                  fullscreen: const MaterialVideoControlsThemeData(
+                    seekBarPositionColor: Constants.primary,
+                    seekBarThumbColor: Constants.primary,
+                  ),
+                  child: Video(
+                    controller: controller,
+                    controls: kIsWeb ||
+                            Platform.isLinux ||
+                            Platform.isMacOS ||
+                            Platform.isWindows
+                        ? MaterialDesktopVideoControls
+                        : MaterialVideoControls,
+                  ),
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+}

app/lib/widgets/item/details/utils/item_youtube/item_youtube_video.dart

@@ -0,0 +1,27 @@
+library item_youtube_video;
+
+import 'package:flutter/material.dart';
+
+import 'item_youtube_video_stub.dart'
+    if (dart.library.io) 'item_youtube_video_native.dart'
+    if (dart.library.html) 'item_youtube_video_web.dart';
+
+/// The [ItemYoutubeVideo] class implements a widget that displays a video from
+/// YouTube.
+///
+/// This is required because we are using different implementations for the web
+/// and for all other target platforms (Android, iOS, macOS, Windows, Linux). On
+/// the web we display the YouTube video via an `iframe` element. On all other
+/// platforms we are using the [youtube_explode_dart] package to fetch the url
+/// of the YouTube video, which can then be displayed via our [ItemVideoPlayer]
+/// widget.
+///
+/// We decided for this implementation, because on the web we would have to
+/// proxy the calls from the [youtube_explode_dart] because of CORS errors.
+/// Further with the former implementation via the [youtube_player_iframe]
+/// package we were not able to display the video on macOS, Windows and Linux
+/// and we were not able to display the video in fullscreen.
+abstract class ItemYoutubeVideo implements StatefulWidget {
+  factory ItemYoutubeVideo(String? imageUrl, String videoUrl) =>
+      getItemYoutubeVideo(imageUrl, videoUrl);
+}

app/lib/widgets/item/details/utils/item_youtube/item_youtube_video_native.dart

@@ -0,0 +1,86 @@
+import 'package:flutter/material.dart';
+
+import 'package:youtube_explode_dart/youtube_explode_dart.dart';
+
+import 'package:feeddeck/widgets/item/details/utils/item_media.dart';
+import 'package:feeddeck/widgets/item/details/utils/item_videos.dart';
+import 'item_youtube_video.dart';
+
+class ItemYoutubeVideoNative extends StatefulWidget
+    implements ItemYoutubeVideo {
+  const ItemYoutubeVideoNative({
+    super.key,
+    required this.imageUrl,
+    required this.videoUrl,
+  });
+
+  final String? imageUrl;
+  final String videoUrl;
+
+  @override
+  State<ItemYoutubeVideoNative> createState() => _ItemYoutubeVideoNativeState();
+}
+
+class _ItemYoutubeVideoNativeState extends State<ItemYoutubeVideoNative> {
+  final yt = YoutubeExplode();
+  late Future<List<ItemVideoQuality>> _futureFetchVideoUrls;
+
+  Future<List<ItemVideoQuality>> _fetchVideoUrls() async {
+    final streamManifest = await yt.videos.streamsClient.getManifest(
+      widget.videoUrl,
+    );
+    return streamManifest.muxed
+        .sortByVideoQuality()
+        .map(
+          (element) => ItemVideoQuality(
+            quality: element.qualityLabel,
+            video: element.url.toString(),
+          ),
+        )
+        .toList();
+  }
+
+  @override
+  void didChangeDependencies() {
+    super.didChangeDependencies();
+    setState(() {
+      _futureFetchVideoUrls = _fetchVideoUrls();
+    });
+  }
+
+  @override
+  void dispose() {
+    yt.close();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FutureBuilder(
+      future: _futureFetchVideoUrls,
+      builder: (
+        BuildContext context,
+        AsyncSnapshot<List<ItemVideoQuality>> snapshot,
+      ) {
+        if (snapshot.connectionState == ConnectionState.none ||
+            snapshot.connectionState == ConnectionState.waiting ||
+            snapshot.hasError ||
+            snapshot.data == null ||
+            snapshot.data!.isEmpty) {
+          return ItemMedia(itemMedia: widget.imageUrl);
+        }
+
+        return ItemVideoPlayer(
+          video: snapshot.data!.first.video,
+          qualities: snapshot.data,
+        );
+      },
+    );
+  }
+}
+
+ItemYoutubeVideo getItemYoutubeVideo(String? imageUrl, String videoUrl) =>
+    ItemYoutubeVideoNative(
+      imageUrl: imageUrl,
+      videoUrl: videoUrl,
+    );

app/lib/widgets/item/details/utils/item_youtube/item_youtube_video_stub.dart

@@ -0,0 +1,6 @@
+import 'item_youtube_video.dart';
+
+ItemYoutubeVideo getItemYoutubeVideo(String? imageUrl, String videoUrl) =>
+    throw UnsupportedError(
+      'Can not ItemYoutubeVideo without the packages dart:html or dart:io',
+    );

app/lib/widgets/item/details/utils/item_youtube/item_youtube_video_web.dart

@@ -0,0 +1,97 @@
+import 'dart:html'; // ignore: avoid_web_libraries_in_flutter
+
+import 'dart:ui' as ui;
+
+import 'package:flutter/material.dart';
+
+import 'package:feeddeck/utils/constants.dart';
+import 'item_youtube_video.dart';
+
+/// [_convertVideoUrl] converts the video url to a format that can be used to
+/// embed the video in an iframe.
+String _convertVideoUrl(String videoUrl) {
+  if (videoUrl.startsWith('https://youtu.be/')) {
+    return videoUrl.replaceFirst(
+      'https://youtu.be/',
+      'https://www.youtube-nocookie.com/embed/',
+    );
+  }
+
+  if (videoUrl.startsWith('https://www.youtube.com/watch?v=')) {
+    return 'https://www.youtube-nocookie.com/embed/${videoUrl.replaceFirst(
+      'https://www.youtube.com/watch?v=',
+      '',
+    )}';
+  }
+
+  if (videoUrl.startsWith('https://m.youtube.com/watch?v=')) {
+    return 'https://www.youtube-nocookie.com/embed/${videoUrl.replaceFirst(
+      'https://m.youtube.com/watch?v=',
+      '',
+    )}';
+  }
+
+  return videoUrl;
+}
+
+class ItemYoutubeVideoWeb extends StatefulWidget implements ItemYoutubeVideo {
+  const ItemYoutubeVideoWeb({
+    super.key,
+    required this.imageUrl,
+    required this.videoUrl,
+  });
+
+  final String? imageUrl;
+  final String videoUrl;
+
+  @override
+  State<ItemYoutubeVideoWeb> createState() => _ItemYoutubeVideoWebState();
+}
+
+class _ItemYoutubeVideoWebState extends State<ItemYoutubeVideoWeb> {
+  final IFrameElement _iframeElement = IFrameElement();
+
+  @override
+  void initState() {
+    super.initState();
+
+    _iframeElement.src = _convertVideoUrl(widget.videoUrl);
+    _iframeElement.style.border = 'none';
+    _iframeElement.allowFullscreen = true;
+
+    // ignore: undefined_prefixed_name
+    ui.platformViewRegistry.registerViewFactory(
+      widget.videoUrl,
+      (int viewId) => _iframeElement,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.only(
+        bottom: Constants.spacingMiddle,
+      ),
+      child: LayoutBuilder(
+        builder: (context, constraints) {
+          return Center(
+            child: SizedBox(
+              width: constraints.maxWidth,
+              height: constraints.maxWidth * 9.0 / 16.0,
+              child: HtmlElementView(
+                key: Key(widget.videoUrl),
+                viewType: widget.videoUrl,
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+}
+
+ItemYoutubeVideo getItemYoutubeVideo(String? imageUrl, String videoUrl) =>
+    ItemYoutubeVideoWeb(
+      imageUrl: imageUrl,
+      videoUrl: videoUrl,
+    );

app/lib/widgets/item/preview/item_preview.dart

@@ -5,11 +5,14 @@ import 'package:provider/provider.dart';
 import 'package:feeddeck/models/item.dart';
 import 'package:feeddeck/models/source.dart';
 import 'package:feeddeck/repositories/items_repository.dart';
+import 'package:feeddeck/widgets/item/preview/item_preview_fourchan.dart';
 import 'package:feeddeck/widgets/item/preview/item_preview_github.dart';
 import 'package:feeddeck/widgets/item/preview/item_preview_googlenews.dart';
+import 'package:feeddeck/widgets/item/preview/item_preview_lemmy.dart';
 import 'package:feeddeck/widgets/item/preview/item_preview_mastodon.dart';
 import 'package:feeddeck/widgets/item/preview/item_preview_medium.dart';
 import 'package:feeddeck/widgets/item/preview/item_preview_nitter.dart';
+import 'package:feeddeck/widgets/item/preview/item_preview_pinterest.dart';
 import 'package:feeddeck/widgets/item/preview/item_preview_podcast.dart';
 import 'package:feeddeck/widgets/item/preview/item_preview_reddit.dart';
 import 'package:feeddeck/widgets/item/preview/item_preview_rss.dart';
@@ -42,6 +45,11 @@ class ItemPreview extends StatelessWidget {
     /// Based on the [source.type] we display a different preview. The preview
     /// for each source type is implemented in a separate widget.
     switch (source.type) {
+      case FDSourceType.fourchan:
+        return ItemPreviewFourChan(
+          item: item,
+          source: source,
+        );
       case FDSourceType.github:
         return ItemPreviewGithub(
           item: item,
@@ -52,6 +60,11 @@ class ItemPreview extends StatelessWidget {
           item: item,
           source: source,
         );
+      case FDSourceType.lemmy:
+        return ItemPreviewLemmy(
+          item: item,
+          source: source,
+        );
       case FDSourceType.mastodon:
         return ItemPreviewMastodon(
           item: item,
@@ -67,6 +80,11 @@ class ItemPreview extends StatelessWidget {
           item: item,
           source: source,
         );
+      case FDSourceType.pinterest:
+        return ItemPreviewPinterest(
+          item: item,
+          source: source,
+        );
       case FDSourceType.podcast:
         return ItemPreviewPodcast(
           item: item,
@@ -92,11 +110,6 @@ class ItemPreview extends StatelessWidget {
           item: item,
           source: source,
         );
-      // case FDSourceType.x:
-      //   return ItemPreviewX(
-      //     item: item,
-      //     source: source,
-      //   );
       case FDSourceType.youtube:
         return ItemPreviewYoutube(
           item: item,

app/lib/widgets/item/preview/item_preview_fourchan.dart

@@ -5,11 +5,12 @@ import 'package:feeddeck/models/source.dart';
 import 'package:feeddeck/widgets/item/preview/utils/details.dart';
 import 'package:feeddeck/widgets/item/preview/utils/item_actions.dart';
 import 'package:feeddeck/widgets/item/preview/utils/item_description.dart';
-import 'package:feeddeck/widgets/item/preview/utils/item_media_gallery.dart';
+import 'package:feeddeck/widgets/item/preview/utils/item_media.dart';
 import 'package:feeddeck/widgets/item/preview/utils/item_source.dart';
+import 'package:feeddeck/widgets/item/preview/utils/item_title.dart';
 
-class ItemPreviewX extends StatelessWidget {
-  const ItemPreviewX({
+class ItemPreviewFourChan extends StatelessWidget {
+  const ItemPreviewFourChan({
     super.key,
     required this.item,
     required this.source,
@@ -25,24 +26,23 @@ class ItemPreviewX extends StatelessWidget {
       onTap: () => showDetails(context, item, source),
       children: [
         ItemSource(
-          sourceTitle: item.author ?? '',
-          sourceSubtitle: '${source.type.toLocalizedString()}: ${source.title}',
+          sourceTitle: source.title,
+          sourceSubtitle: source.type.toLocalizedString(),
           sourceType: source.type,
           sourceIcon: source.icon,
           itemPublishedAt: item.publishedAt,
           itemIsRead: item.isRead,
         ),
+        ItemTitle(
+          itemTitle: item.title,
+        ),
+        ItemMedia(
+          itemMedia: item.media,
+        ),
         ItemDescription(
           itemDescription: item.description,
           sourceFormat: DescriptionFormat.html,
-          tagetFormat: DescriptionFormat.markdown,
-        ),
-        ItemMediaGallery(
-          itemMedias: item.options != null && item.options!.containsKey('media')
-              ? (item.options!['media'] as List)
-                  .map((item) => item as String)
-                  .toList()
-              : null,
+          tagetFormat: DescriptionFormat.plain,
         ),
       ],
     );

app/lib/widgets/item/preview/item_preview_googlenews.dart

@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 
 import 'package:feeddeck/models/item.dart';
 import 'package:feeddeck/models/source.dart';
-import 'package:feeddeck/utils/image_url.dart';
 import 'package:feeddeck/widgets/item/preview/utils/details.dart';
 import 'package:feeddeck/widgets/item/preview/utils/item_actions.dart';
 import 'package:feeddeck/widgets/item/preview/utils/item_description.dart';
@@ -30,7 +29,6 @@ class ItemPreviewGooglenews extends StatelessWidget {
           sourceSubtitle: '${source.type.toLocalizedString()}: ${source.title}',
           sourceType: source.type,
           sourceIcon: item.media,
-          sourceIconType: FDImageType.item,
           itemPublishedAt: item.publishedAt,
           itemIsRead: item.isRead,
         ),

app/lib/widgets/item/preview/item_preview_lemmy.dart

@@ -0,0 +1,71 @@
+import 'package:flutter/material.dart';
+
+import 'package:feeddeck/models/item.dart';
+import 'package:feeddeck/models/source.dart';
+import 'package:feeddeck/widgets/item/preview/utils/details.dart';
+import 'package:feeddeck/widgets/item/preview/utils/item_actions.dart';
+import 'package:feeddeck/widgets/item/preview/utils/item_description.dart';
+import 'package:feeddeck/widgets/item/preview/utils/item_media.dart';
+import 'package:feeddeck/widgets/item/preview/utils/item_source.dart';
+import 'package:feeddeck/widgets/item/preview/utils/item_title.dart';
+
+class ItemPreviewLemmy extends StatelessWidget {
+  const ItemPreviewLemmy({
+    super.key,
+    required this.item,
+    required this.source,
+  });
+
+  final FDItem item;
+  final FDSource source;
+
+  /// [_buildMedia] returns the media of the item if the item has media file.
+  /// Since we save images and videos within the media property we have to
+  /// filter out all videos.
+  ///
+  /// See the `getMedia` function in the `lemmy.ts` file, for a list of
+  /// extension which are a image / video.
+  Widget _buildMedia() {
+    if (item.media != null && item.media! != '') {
+      final mediaUrl = Uri.parse(item.media!);
+
+      if (mediaUrl.path.endsWith('.jpg') ||
+          mediaUrl.path.endsWith('.jpeg') ||
+          mediaUrl.path.endsWith('.png') ||
+          mediaUrl.path.endsWith('.gif')) {
+        return ItemMedia(
+          itemMedia: item.media,
+        );
+      }
+    }
+
+    return Container();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return ItemActions(
+      item: item,
+      onTap: () => showDetails(context, item, source),
+      children: [
+        ItemSource(
+          sourceTitle: source.title,
+          sourceSubtitle: source.type.toLocalizedString(),
+          sourceType: source.type,
+          sourceIcon: source.icon,
+          itemPublishedAt: item.publishedAt,
+          itemIsRead: item.isRead,
+        ),
+        ItemTitle(
+          itemTitle: item.title,
+        ),
+        _buildMedia(),
+        ItemDescription(
+          itemDescription: item.description,
+          sourceFormat: DescriptionFormat.html,
+          tagetFormat: DescriptionFormat.plain,
+        ),
+      ],
+    );
+  }
+}

app/lib/widgets/item/preview/item_preview_mastodon.dart

@@ -38,7 +38,9 @@ class ItemPreviewMastodon extends StatelessWidget {
           tagetFormat: DescriptionFormat.markdown,
         ),
         ItemMediaGallery(
-          itemMedias: item.options != null && item.options!.containsKey('media')
+          itemMedias: item.options != null &&
+                  item.options!.containsKey('media') &&
+                  item.options!['media'] != null
               ? (item.options!['media'] as List)
                   .map((item) => item as String)
                   .toList()

app/lib/widgets/item/preview/item_preview_pinterest.dart

@@ -0,0 +1,50 @@
+import 'package:flutter/material.dart';
+
+import 'package:feeddeck/models/item.dart';
+import 'package:feeddeck/models/source.dart';
+import 'package:feeddeck/widgets/item/preview/utils/details.dart';
+import 'package:feeddeck/widgets/item/preview/utils/item_actions.dart';
+import 'package:feeddeck/widgets/item/preview/utils/item_description.dart';
+import 'package:feeddeck/widgets/item/preview/utils/item_media.dart';
+import 'package:feeddeck/widgets/item/preview/utils/item_source.dart';
+import 'package:feeddeck/widgets/item/preview/utils/item_title.dart';
+
+class ItemPreviewPinterest extends StatelessWidget {
+  const ItemPreviewPinterest({
+    super.key,
+    required this.item,
+    required this.source,
+  });
+
+  final FDItem item;
+  final FDSource source;
+
+  @override
+  Widget build(BuildContext context) {
+    return ItemActions(
+      item: item,
+      onTap: () => showDetails(context, item, source),
+      children: [
+        ItemSource(
+          sourceTitle: source.title,
+          sourceSubtitle: source.type.toLocalizedString(),
+          sourceType: source.type,
+          sourceIcon: source.icon,
+          itemPublishedAt: item.publishedAt,
+          itemIsRead: item.isRead,
+        ),
+        ItemTitle(
+          itemTitle: item.title,
+        ),
+        ItemMedia(
+          itemMedia: item.media,
+        ),
+        ItemDescription(
+          itemDescription: item.description,
+          sourceFormat: DescriptionFormat.html,
+          tagetFormat: DescriptionFormat.plain,
+        ),
+      ],
+    );
+  }
+}

app/lib/widgets/item/preview/item_preview_rss.dart

@@ -41,7 +41,7 @@ class ItemPreviewRSS extends StatelessWidget {
         ),
         ItemDescription(
           itemDescription: item.description,
-          sourceFormat: DescriptionFormat.plain,
+          sourceFormat: DescriptionFormat.html,
           tagetFormat: DescriptionFormat.plain,
         ),
       ],

app/lib/widgets/item/preview/utils/item_actions.dart

@@ -9,6 +9,7 @@ import 'package:provider/provider.dart';
 import 'package:feeddeck/models/item.dart';
 import 'package:feeddeck/repositories/items_repository.dart';
 import 'package:feeddeck/utils/constants.dart';
+import 'package:feeddeck/utils/openurl.dart';
 
 /// The [ItemActions] widget provides an actions menu for an item, which can be
 /// used to quickly mark an item as read or unread and to add or remove a
@@ -62,6 +63,14 @@ class _ItemActionsState extends State<ItemActions> {
     } catch (_) {}
   }
 
+  /// [_openUrl] opens the item url in the default browser of the current
+  /// device.
+  Future<void> _openUrl() async {
+    try {
+      await openUrl(widget.item.link);
+    } catch (_) {}
+  }
+
   /// [_getTapPositionLarge] set the [_tapPosition] which will be used for the
   /// actions menu.
   void _getTapPositionLarge(TapDownDetails details) {
@@ -70,10 +79,10 @@ class _ItemActionsState extends State<ItemActions> {
     });
   }
 
-  /// [_showActionsMenuLarge] shows a popup menu with all available aactions for
+  /// [_showActionsMenuLarge] shows a popup menu with all available actions for
   /// an item. This means the user can mark an item as read or unread or a user
   /// can add or remove a bookmark for an item.
-  void _showActionsMenuLarge(BuildContext context) async {
+  void _showActionsMenuLarge() async {
     HapticFeedback.heavyImpact();
 
     final RenderObject? overlay =
@@ -126,6 +135,15 @@ class _ItemActionsState extends State<ItemActions> {
                 : const Text('Add Bookmark'),
           ),
         ),
+        const PopupMenuItem(
+          value: 'openlink',
+          child: ListTile(
+            leading: Icon(
+              Icons.launch,
+            ),
+            title: Text('Open Link'),
+          ),
+        ),
       ],
     );
 
@@ -140,9 +158,19 @@ class _ItemActionsState extends State<ItemActions> {
           await _bookmark(context);
         }
         break;
+      case 'openlink':
+        if (mounted) {
+          await _openUrl();
+        }
+        break;
     }
   }
 
+  /// [_showActionsMenuSmall] shows a modal bottom sheet with all available
+  /// actions for an item. This means the user can mark an item as read or
+  /// unread or a user can add or remove a bookmark for an item. The actions are
+  /// the same as we show on large screens via [_showActionsMenuLarge], but the
+  /// modal bottom sheet is optiomized for small screens.
   void _showActionsMenuSmall(BuildContext mainContext) async {
     HapticFeedback.heavyImpact();
 
@@ -157,56 +185,72 @@ class _ItemActionsState extends State<ItemActions> {
         maxWidth: Constants.centeredFormMaxWidth,
       ),
       builder: (BuildContext context) {
-        return Container(
-          margin: const EdgeInsets.all(
-            Constants.spacingMiddle,
-          ),
-          padding: const EdgeInsets.only(
-            left: Constants.spacingMiddle,
-            right: Constants.spacingMiddle,
-          ),
-          decoration: const BoxDecoration(
-            color: Constants.background,
-            borderRadius: BorderRadius.all(
-              Radius.circular(Constants.spacingMiddle),
+        return SafeArea(
+          child: Container(
+            margin: const EdgeInsets.all(
+              Constants.spacingMiddle,
             ),
-          ),
-          child: Wrap(
-            alignment: WrapAlignment.center,
-            crossAxisAlignment: WrapCrossAlignment.center,
-            children: [
-              ListTile(
-                mouseCursor: SystemMouseCursors.click,
-                onTap: () async {
-                  Navigator.of(context).pop();
-                  _read(mainContext);
-                },
-                leading: widget.item.isRead
-                    ? const Icon(Icons.visibility_off)
-                    : const Icon(Icons.visibility),
-                title: widget.item.isRead
-                    ? const Text('Mark as Unread')
-                    : const Text('Mark as Read'),
+            padding: const EdgeInsets.only(
+              left: Constants.spacingMiddle,
+              right: Constants.spacingMiddle,
+            ),
+            decoration: const BoxDecoration(
+              color: Constants.background,
+              borderRadius: BorderRadius.all(
+                Radius.circular(Constants.spacingMiddle),
               ),
-              const Divider(
-                color: Constants.dividerColor,
-                height: 1,
-                thickness: 1,
-              ),
-              ListTile(
-                mouseCursor: SystemMouseCursors.click,
-                onTap: () async {
-                  Navigator.of(context).pop();
-                  _bookmark(mainContext);
-                },
-                leading: widget.item.isBookmarked
-                    ? const Icon(Icons.bookmark)
-                    : const Icon(Icons.bookmark_outline),
-                title: widget.item.isBookmarked
-                    ? const Text('Remove Bookmark')
-                    : const Text('Add Bookmark'),
-              ),
-            ],
+            ),
+            child: Wrap(
+              alignment: WrapAlignment.center,
+              crossAxisAlignment: WrapCrossAlignment.center,
+              children: [
+                ListTile(
+                  mouseCursor: SystemMouseCursors.click,
+                  onTap: () async {
+                    Navigator.of(context).pop();
+                    _read(mainContext);
+                  },
+                  leading: widget.item.isRead
+                      ? const Icon(Icons.visibility_off)
+                      : const Icon(Icons.visibility),
+                  title: widget.item.isRead
+                      ? const Text('Mark as Unread')
+                      : const Text('Mark as Read'),
+                ),
+                const Divider(
+                  color: Constants.dividerColor,
+                  height: 1,
+                  thickness: 1,
+                ),
+                ListTile(
+                  mouseCursor: SystemMouseCursors.click,
+                  onTap: () async {
+                    Navigator.of(context).pop();
+                    _bookmark(mainContext);
+                  },
+                  leading: widget.item.isBookmarked
+                      ? const Icon(Icons.bookmark)
+                      : const Icon(Icons.bookmark_outline),
+                  title: widget.item.isBookmarked
+                      ? const Text('Remove Bookmark')
+                      : const Text('Add Bookmark'),
+                ),
+                const Divider(
+                  color: Constants.dividerColor,
+                  height: 1,
+                  thickness: 1,
+                ),
+                ListTile(
+                  mouseCursor: SystemMouseCursors.click,
+                  onTap: () async {
+                    Navigator.of(context).pop();
+                    _openUrl();
+                  },
+                  leading: const Icon(Icons.launch),
+                  title: const Text('Open Link'),
+                ),
+              ],
+            ),
           ),
         );
       },
@@ -326,12 +370,17 @@ class _ItemActionsState extends State<ItemActions> {
     /// On large screens we show an actions menu via `_showActionsMenuLarge`,
     /// which is rendered directly at the point where the user pressed on the
     /// item.
+    /// The menu can be opened by a long press or by a secondary tap (right
+    /// click) on the item.
     return MouseRegion(
       cursor: SystemMouseCursors.click,
       child: GestureDetector(
         onTap: widget.onTap,
         onTapDown: (details) => _getTapPositionLarge(details),
-        onLongPress: () => _showActionsMenuLarge(context),
+        onLongPress: () => _showActionsMenuLarge(),
+        onSecondaryTapDown:
+            kIsWeb ? null : (details) => _getTapPositionLarge(details),
+        onSecondaryTap: kIsWeb ? null : () => _showActionsMenuLarge(),
         child: Container(
           width: double.infinity,
           decoration: const BoxDecoration(

app/lib/widgets/item/preview/utils/item_description.dart

@@ -1,12 +1,12 @@
 import 'package:flutter/material.dart';
 
-import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter_markdown/flutter_markdown.dart';
 import 'package:html2md/html2md.dart' as html2md;
 
 import 'package:feeddeck/utils/constants.dart';
 import 'package:feeddeck/utils/font.dart';
 import 'package:feeddeck/utils/openurl.dart';
+import 'package:feeddeck/widgets/utils/cached_network_image.dart';
 
 /// The [DescriptionFormat] enum defines the source and target format of a
 /// description.
@@ -46,7 +46,7 @@ class ItemDescription extends StatelessWidget {
       ),
       child: MarkdownBody(
         selectable: false,
-        data: content,
+        data: content.trim(),
         styleSheet: MarkdownStyleSheet(
           code: TextStyle(
             fontFamily: getMonospaceFontFamily(),
@@ -55,6 +55,15 @@ class ItemDescription extends StatelessWidget {
           codeblockDecoration: const BoxDecoration(
             color: Constants.secondary,
           ),
+          blockquoteDecoration: const BoxDecoration(
+            color: Constants.secondary,
+            border: Border(
+              left: BorderSide(
+                color: Constants.primary,
+                width: 1,
+              ),
+            ),
+          ),
         ),
         onTapLink: (text, href, title) {
           if (href != null) {
@@ -81,13 +90,21 @@ class ItemDescription extends StatelessWidget {
   }
 
   /// [_buildPlain] renders the provided [content] as plain text.
+  ///
+  /// To not have some trailing newlines, the [content] is trimmed and splitted
+  /// on newline characters, so that we can filter out empty lines, before the
+  /// the content is rendered.
   Widget _buildPlain(String content) {
+    if (content == '') {
+      return Container();
+    }
+
     return Container(
       padding: const EdgeInsets.only(
         bottom: Constants.spacingExtraSmall,
       ),
       child: Text(
-        content,
+        content.trim().split('\n').where((line) => line != '').join('\n'),
         maxLines: 5,
         style: const TextStyle(
           overflow: TextOverflow.ellipsis,
@@ -117,7 +134,9 @@ class ItemDescription extends StatelessWidget {
     if (sourceFormat == DescriptionFormat.html &&
         tagetFormat == DescriptionFormat.plain) {
       return _buildPlain(
-        itemDescription!.replaceAll(RegExp(r'<[^>]*>|&[^;]+;'), ''),
+        itemDescription!
+            .replaceAll(RegExp(r'<[^>]*>|&[^;]+;'), ' ')
+            .replaceAll(RegExp('\\s+'), ' '),
       );
     }
 

app/lib/widgets/item/preview/utils/item_media.dart

@@ -1,9 +1,7 @@
 import 'package:flutter/material.dart';
 
-import 'package:cached_network_image/cached_network_image.dart';
-
 import 'package:feeddeck/utils/constants.dart';
-import 'package:feeddeck/utils/image_url.dart';
+import 'package:feeddeck/widgets/utils/cached_network_image.dart';
 
 /// The [ItemMedia] widget displays the media of an item. Based on the provided
 /// [itemMedia] value the media is displayed from the Supabase storage or
@@ -30,7 +28,7 @@ class ItemMedia extends StatelessWidget {
         width: double.infinity,
         height: 200,
         fit: BoxFit.cover,
-        imageUrl: getImageUrl(FDImageType.item, itemMedia!),
+        imageUrl: itemMedia!,
         placeholder: (context, url) => Container(),
         errorWidget: (context, url, error) => Container(),
       ),

app/lib/widgets/item/preview/utils/item_media_gallery.dart

@@ -1,10 +1,8 @@
 import 'package:flutter/material.dart';
 
-import 'package:cached_network_image/cached_network_image.dart';
-
 import 'package:feeddeck/utils/constants.dart';
-import 'package:feeddeck/utils/image_url.dart';
 import 'package:feeddeck/widgets/item/details/utils/item_media.dart';
+import 'package:feeddeck/widgets/utils/cached_network_image.dart';
 
 /// The [ItemMediaGallery] widget can be used to display multiple media files in
 /// a gallery. Similar to the [ItemMedia] widget the provided [itemMedias]
@@ -24,12 +22,10 @@ class ItemMediaGallery extends StatelessWidget {
   /// [CachedNetworkImage] widget. If the app is running in the web, the url is
   /// proxied through the Supabase functions.
   Widget _buildSingleMedia(BuildContext context, String itemMedia) {
-    final imageUrl = getImageUrl(FDImageType.item, itemMedia);
-
     return CachedNetworkImage(
       width: MediaQuery.of(context).size.width,
       fit: BoxFit.cover,
-      imageUrl: imageUrl,
+      imageUrl: itemMedia,
       placeholder: (context, url) => Container(),
       errorWidget: (context, url, error) => Container(),
     );

app/lib/widgets/item/preview/utils/item_source.dart

@@ -4,7 +4,6 @@ import 'package:timeago/timeago.dart' as timeago;
 
 import 'package:feeddeck/models/source.dart';
 import 'package:feeddeck/utils/constants.dart';
-import 'package:feeddeck/utils/image_url.dart';
 import 'package:feeddeck/widgets/source/source_icon.dart';
 
 /// The [ItemSource] widget is used to display the source of an item above the
@@ -16,7 +15,6 @@ class ItemSource extends StatelessWidget {
     required this.sourceSubtitle,
     required this.sourceType,
     required this.sourceIcon,
-    this.sourceIconType = FDImageType.source,
     required this.itemPublishedAt,
     required this.itemIsRead,
   });
@@ -25,7 +23,6 @@ class ItemSource extends StatelessWidget {
   final String sourceSubtitle;
   final FDSourceType sourceType;
   final String? sourceIcon;
-  final FDImageType sourceIconType;
   final int itemPublishedAt;
   final bool itemIsRead;
 
@@ -72,7 +69,6 @@ class ItemSource extends StatelessWidget {
             child: SourceIcon(
               type: sourceType,
               icon: sourceIcon,
-              iconType: sourceIconType,
               size: 32,
             ),
           ),

app/lib/widgets/reset_password/reset_password.dart

@@ -27,14 +27,22 @@ class _ResetPasswordState extends State<ResetPassword> {
 
   /// [_validatePassword] validates the email address provided via the
   /// [TextField] of the [_passwordController]. The password field can not be
-  /// empty and must have a minimum length of 6 characters.
+  /// empty and must have a minimum length of 8 characters. The password must
+  /// also contain at least one upper case letter, one lower case letter and one
+  /// number.
   String? _validatePassword(String? value) {
     if (value == null || value.isEmpty) {
       return 'Password is required';
     }
 
-    if (value.length < 6) {
-      return 'Password must be a least 6 characters long';
+    if (value.length < 8) {
+      return 'Password must be a least 8 characters long';
+    }
+
+    String pattern = r'^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,}$';
+    RegExp regExp = RegExp(pattern);
+    if (!regExp.hasMatch(value)) {
+      return 'Password must contain at least one upper case letter, one lower case letter and one number';
     }
 
     return null;

app/lib/widgets/settings/accounts/settings_accounts_github.dart

@@ -232,78 +232,80 @@ class _SettingsAccountsGithubAddState extends State<SettingsAccountsGithubAdd> {
           ),
         ],
       ),
-      body: Column(
-        children: [
-          Expanded(
-            child: Padding(
-              padding: const EdgeInsets.all(Constants.spacingMiddle),
-              child: SingleChildScrollView(
-                child: Form(
-                  key: _formKey,
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      MarkdownBody(
-                        selectable: true,
-                        data: _helpText,
-                        onTapLink: (text, href, title) {
-                          try {
-                            if (href != null) {
-                              openUrl(href);
-                            }
-                          } catch (_) {}
-                        },
-                      ),
-                      const SizedBox(
-                        height: Constants.spacingMiddle,
-                      ),
-                      TextFormField(
-                        controller: _tokenController,
-                        keyboardType: TextInputType.text,
-                        autocorrect: false,
-                        enableSuggestions: true,
-                        maxLines: 1,
-                        decoration: const InputDecoration(
-                          border: OutlineInputBorder(),
-                          labelText: 'Token',
+      body: SafeArea(
+        child: Column(
+          children: [
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.all(Constants.spacingMiddle),
+                child: SingleChildScrollView(
+                  child: Form(
+                    key: _formKey,
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        MarkdownBody(
+                          selectable: true,
+                          data: _helpText,
+                          onTapLink: (text, href, title) {
+                            try {
+                              if (href != null) {
+                                openUrl(href);
+                              }
+                            } catch (_) {}
+                          },
                         ),
-                        validator: (value) => _validateToken(value),
-                        onFieldSubmitted: (value) => _addAccount(),
-                      ),
-                    ],
+                        const SizedBox(
+                          height: Constants.spacingMiddle,
+                        ),
+                        TextFormField(
+                          controller: _tokenController,
+                          keyboardType: TextInputType.text,
+                          autocorrect: false,
+                          enableSuggestions: true,
+                          maxLines: 1,
+                          decoration: const InputDecoration(
+                            border: OutlineInputBorder(),
+                            labelText: 'Token',
+                          ),
+                          validator: (value) => _validateToken(value),
+                          onFieldSubmitted: (value) => _addAccount(),
+                        ),
+                      ],
+                    ),
                   ),
                 ),
               ),
             ),
-          ),
-          const SizedBox(
-            height: Constants.spacingSmall,
-          ),
-          const Divider(
-            color: Constants.dividerColor,
-            height: 1,
-            thickness: 1,
-          ),
-          _buildError(),
-          Padding(
-            padding: const EdgeInsets.all(Constants.spacingMiddle),
-            child: ElevatedButton.icon(
-              style: ElevatedButton.styleFrom(
-                maximumSize: const Size.fromHeight(
-                  Constants.elevatedButtonSize,
-                ),
-                minimumSize: const Size.fromHeight(
-                  Constants.elevatedButtonSize,
-                ),
-              ),
-              label: const Text('Add Account'),
-              onPressed: _isLoading ? null : _addAccount,
-              icon: _isLoading
-                  ? const ElevatedButtonProgressIndicator()
-                  : const Icon(Icons.add),
+            const SizedBox(
+              height: Constants.spacingSmall,
             ),
-          ),
-        ],
+            const Divider(
+              color: Constants.dividerColor,
+              height: 1,
+              thickness: 1,
+            ),
+            _buildError(),
+            Padding(
+              padding: const EdgeInsets.all(Constants.spacingMiddle),
+              child: ElevatedButton.icon(
+                style: ElevatedButton.styleFrom(
+                  maximumSize: const Size.fromHeight(
+                    Constants.elevatedButtonSize,
+                  ),
+                  minimumSize: const Size.fromHeight(
+                    Constants.elevatedButtonSize,
+                  ),
+                ),
+                label: const Text('Add Account'),
+                onPressed: _isLoading ? null : _addAccount,
+                icon: _isLoading
+                    ? const ElevatedButtonProgressIndicator()
+                    : const Icon(Icons.add),
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }

app/lib/widgets/settings/accounts/utils/settings_accounts_actions.dart

@@ -18,60 +18,62 @@ class SettingsAccountsActions extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      margin: const EdgeInsets.all(
-        Constants.spacingMiddle,
-      ),
-      padding: const EdgeInsets.only(
-        left: Constants.spacingMiddle,
-        right: Constants.spacingMiddle,
-      ),
-      decoration: const BoxDecoration(
-        color: Constants.background,
-        borderRadius: BorderRadius.all(
-          Radius.circular(Constants.spacingMiddle),
+    return SafeArea(
+      child: Container(
+        margin: const EdgeInsets.all(
+          Constants.spacingMiddle,
         ),
-      ),
-      child: Wrap(
-        alignment: WrapAlignment.center,
-        crossAxisAlignment: WrapCrossAlignment.center,
-        children: [
-          ListTile(
-            mouseCursor: SystemMouseCursors.click,
-            onTap: () {
-              Navigator.of(context).pop();
-              reconnect();
-            },
-            leading: const Icon(
-              Icons.link,
-            ),
-            title: const Text(
-              'Re-Connect',
-            ),
+        padding: const EdgeInsets.only(
+          left: Constants.spacingMiddle,
+          right: Constants.spacingMiddle,
+        ),
+        decoration: const BoxDecoration(
+          color: Constants.background,
+          borderRadius: BorderRadius.all(
+            Radius.circular(Constants.spacingMiddle),
           ),
-          const Divider(
-            color: Constants.dividerColor,
-            height: 1,
-            thickness: 1,
-          ),
-          ListTile(
-            mouseCursor: SystemMouseCursors.click,
-            onTap: () {
-              Navigator.of(context).pop();
-              delete();
-            },
-            leading: const Icon(
-              Icons.delete,
-              color: Constants.error,
-            ),
-            title: const Text(
-              'Delete',
-              style: TextStyle(
-                color: Constants.error,
+        ),
+        child: Wrap(
+          alignment: WrapAlignment.center,
+          crossAxisAlignment: WrapCrossAlignment.center,
+          children: [
+            ListTile(
+              mouseCursor: SystemMouseCursors.click,
+              onTap: () {
+                Navigator.of(context).pop();
+                reconnect();
+              },
+              leading: const Icon(
+                Icons.link,
+              ),
+              title: const Text(
+                'Re-Connect',
               ),
             ),
-          ),
-        ],
+            const Divider(
+              color: Constants.dividerColor,
+              height: 1,
+              thickness: 1,
+            ),
+            ListTile(
+              mouseCursor: SystemMouseCursors.click,
+              onTap: () {
+                Navigator.of(context).pop();
+                delete();
+              },
+              leading: const Icon(
+                Icons.delete,
+                color: Constants.error,
+              ),
+              title: const Text(
+                'Delete',
+                style: TextStyle(
+                  color: Constants.error,
+                ),
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }

app/lib/widgets/settings/decks/settings_decks_select.dart

@@ -4,6 +4,7 @@ import 'package:provider/provider.dart';
 
 import 'package:feeddeck/repositories/app_repository.dart';
 import 'package:feeddeck/repositories/items_repository.dart';
+import 'package:feeddeck/repositories/layout_repository.dart';
 import 'package:feeddeck/utils/constants.dart';
 
 /// The [SettingsDecksSelect] widget shows a list of the users decks, when the
@@ -20,13 +21,18 @@ class _SettingsDecksSelectState extends State<SettingsDecksSelect> {
   /// [_selectDeck] sets the provided [deckId] as the active deck. The active
   /// deck is updated via the [selectDeck] method of the [AppRepository]. When
   /// the active deck is updated the user is redirected to the decks view.
-  ///
-  /// Before the active deck is changed the [ItemsRepositoryStore] is cleared,
-  /// to trigger a reload of the items once the deck is loaded.
   Future<void> _selectDeck(String deckId) async {
     try {
+      /// Before the active deck is changed the [ItemsRepositoryStore] is
+      /// cleared, to trigger a reload of the items once the deck is loaded.
       ItemsRepositoryStore().clear();
 
+      /// We also have to reset the tab index when the user selects a new deck,
+      /// so that the first tab is selected instead of the tab with the same
+      /// index as in the previously selected deck.
+      Provider.of<LayoutRepository>(context, listen: false)
+          .deckLayoutSmallInitialTabIndex = 0;
+
       await Provider.of<AppRepository>(context, listen: false)
           .selectDeck(deckId);
       if (!mounted) return;

app/lib/widgets/settings/premium/settings_premium_inapp.dart

@@ -166,28 +166,29 @@ class _SettingsPremiumInAppState extends State<SettingsPremiumInApp> {
           ),
         ],
       ),
-      body: FutureBuilder(
-        future: _futureFetchOfferings,
-        builder: (
-          BuildContext context,
-          AsyncSnapshot<Offering?> snapshot,
-        ) {
-          return Column(
-            children: [
-              Expanded(
-                child: Padding(
-                  padding: const EdgeInsets.all(Constants.spacingMiddle),
-                  child: SingleChildScrollView(
-                    child: snapshot.connectionState == ConnectionState.none ||
-                            snapshot.connectionState ==
-                                ConnectionState.waiting ||
-                            snapshot.hasError ||
-                            snapshot.data == null ||
-                            snapshot.data?.monthly == null
-                        ? const Text('Loading ...')
-                        : MarkdownBody(
-                            selectable: true,
-                            data: '''
+      body: SafeArea(
+        child: FutureBuilder(
+          future: _futureFetchOfferings,
+          builder: (
+            BuildContext context,
+            AsyncSnapshot<Offering?> snapshot,
+          ) {
+            return Column(
+              children: [
+                Expanded(
+                  child: Padding(
+                    padding: const EdgeInsets.all(Constants.spacingMiddle),
+                    child: SingleChildScrollView(
+                      child: snapshot.connectionState == ConnectionState.none ||
+                              snapshot.connectionState ==
+                                  ConnectionState.waiting ||
+                              snapshot.hasError ||
+                              snapshot.data == null ||
+                              snapshot.data?.monthly == null
+                          ? const Text('Loading ...')
+                          : MarkdownBody(
+                              selectable: true,
+                              data: '''
 You are currently using the free version of FeedDeck, which allows you to add up
 to 10 sources for the first 7 days. After that trial period your sources will
 not be updated anymore.
@@ -197,57 +198,61 @@ upgrade to a premium account. The premium account costs
 ${snapshot.data?.monthly?.storeProduct.priceString} per month and can be
 canceled at any time.
 ''',
-                          ),
-                  ),
-                ),
-              ),
-              const SizedBox(
-                height: Constants.spacingSmall,
-              ),
-              const Divider(
-                color: Constants.dividerColor,
-                height: 1,
-                thickness: 1,
-              ),
-              Padding(
-                padding: const EdgeInsets.all(Constants.spacingMiddle),
-                child: ElevatedButton.icon(
-                  style: ElevatedButton.styleFrom(
-                    backgroundColor: Constants.primary,
-                    foregroundColor: Constants.onPrimary,
-                    maximumSize: const Size.fromHeight(
-                      Constants.elevatedButtonSize,
-                    ),
-                    minimumSize: const Size.fromHeight(
-                      Constants.elevatedButtonSize,
+                            ),
                     ),
                   ),
-                  label: Text(
-                    snapshot.data?.monthly?.storeProduct.priceString != null
-                        ? 'Subscribe to FeedDeck Premium for ${snapshot.data?.monthly?.storeProduct.priceString}'
-                        : 'Subscribe to FeedDeck Premium',
-                  ),
-                  onPressed: snapshot.connectionState == ConnectionState.none ||
-                          snapshot.connectionState == ConnectionState.waiting ||
-                          snapshot.hasError ||
-                          snapshot.data == null ||
-                          snapshot.data?.monthly == null ||
-                          _isLoading
-                      ? null
-                      : () => _purchase(snapshot.data!.monthly!),
-                  icon: snapshot.connectionState == ConnectionState.none ||
-                          snapshot.connectionState == ConnectionState.waiting ||
-                          snapshot.hasError ||
-                          snapshot.data == null ||
-                          snapshot.data?.monthly == null ||
-                          _isLoading
-                      ? const ElevatedButtonProgressIndicator()
-                      : const Icon(FDIcons.feeddeck),
                 ),
-              ),
-            ],
-          );
-        },
+                const SizedBox(
+                  height: Constants.spacingSmall,
+                ),
+                const Divider(
+                  color: Constants.dividerColor,
+                  height: 1,
+                  thickness: 1,
+                ),
+                Padding(
+                  padding: const EdgeInsets.all(Constants.spacingMiddle),
+                  child: ElevatedButton.icon(
+                    style: ElevatedButton.styleFrom(
+                      backgroundColor: Constants.primary,
+                      foregroundColor: Constants.onPrimary,
+                      maximumSize: const Size.fromHeight(
+                        Constants.elevatedButtonSize,
+                      ),
+                      minimumSize: const Size.fromHeight(
+                        Constants.elevatedButtonSize,
+                      ),
+                    ),
+                    label: Text(
+                      snapshot.data?.monthly?.storeProduct.priceString != null
+                          ? 'Subscribe to FeedDeck Premium for ${snapshot.data?.monthly?.storeProduct.priceString}'
+                          : 'Subscribe to FeedDeck Premium',
+                    ),
+                    onPressed:
+                        snapshot.connectionState == ConnectionState.none ||
+                                snapshot.connectionState ==
+                                    ConnectionState.waiting ||
+                                snapshot.hasError ||
+                                snapshot.data == null ||
+                                snapshot.data?.monthly == null ||
+                                _isLoading
+                            ? null
+                            : () => _purchase(snapshot.data!.monthly!),
+                    icon: snapshot.connectionState == ConnectionState.none ||
+                            snapshot.connectionState ==
+                                ConnectionState.waiting ||
+                            snapshot.hasError ||
+                            snapshot.data == null ||
+                            snapshot.data?.monthly == null ||
+                            _isLoading
+                        ? const ElevatedButtonProgressIndicator()
+                        : const Icon(FDIcons.feeddeck),
+                  ),
+                ),
+              ],
+            );
+          },
+        ),
       ),
     );
   }

app/lib/widgets/settings/premium/settings_premium_stripe.dart

@@ -87,62 +87,67 @@ class _SettingsPremiumStripeState extends State<SettingsPremiumStripe> {
           ),
         ],
       ),
-      body: FutureBuilder(
-        future: _futureFetchCheckoutSessionLink,
-        builder: (
-          BuildContext context,
-          AsyncSnapshot<String> snapshot,
-        ) {
-          return Column(
-            children: [
-              const Expanded(
-                child: Padding(
-                  padding: EdgeInsets.all(Constants.spacingMiddle),
-                  child: SingleChildScrollView(
-                    child: MarkdownBody(
-                      selectable: true,
-                      data: _settingsPremiumStripeText,
+      body: SafeArea(
+        child: FutureBuilder(
+          future: _futureFetchCheckoutSessionLink,
+          builder: (
+            BuildContext context,
+            AsyncSnapshot<String> snapshot,
+          ) {
+            return Column(
+              children: [
+                const Expanded(
+                  child: Padding(
+                    padding: EdgeInsets.all(Constants.spacingMiddle),
+                    child: SingleChildScrollView(
+                      child: MarkdownBody(
+                        selectable: true,
+                        data: _settingsPremiumStripeText,
+                      ),
                     ),
                   ),
                 ),
-              ),
-              const SizedBox(
-                height: Constants.spacingSmall,
-              ),
-              const Divider(
-                color: Constants.dividerColor,
-                height: 1,
-                thickness: 1,
-              ),
-              Padding(
-                padding: const EdgeInsets.all(Constants.spacingMiddle),
-                child: ElevatedButton.icon(
-                  style: ElevatedButton.styleFrom(
-                    backgroundColor: Constants.primary,
-                    foregroundColor: Constants.onPrimary,
-                    maximumSize: const Size.fromHeight(
-                      Constants.elevatedButtonSize,
-                    ),
-                    minimumSize: const Size.fromHeight(
-                      Constants.elevatedButtonSize,
-                    ),
-                  ),
-                  label: const Text('Subscribe to FeedDeck Premium'),
-                  onPressed: snapshot.connectionState == ConnectionState.none ||
-                          snapshot.connectionState == ConnectionState.waiting ||
-                          snapshot.hasError
-                      ? null
-                      : () => _openUrl(snapshot.data),
-                  icon: snapshot.connectionState == ConnectionState.none ||
-                          snapshot.connectionState == ConnectionState.waiting ||
-                          snapshot.hasError
-                      ? const ElevatedButtonProgressIndicator()
-                      : const Icon(FDIcons.feeddeck),
+                const SizedBox(
+                  height: Constants.spacingSmall,
                 ),
-              ),
-            ],
-          );
-        },
+                const Divider(
+                  color: Constants.dividerColor,
+                  height: 1,
+                  thickness: 1,
+                ),
+                Padding(
+                  padding: const EdgeInsets.all(Constants.spacingMiddle),
+                  child: ElevatedButton.icon(
+                    style: ElevatedButton.styleFrom(
+                      backgroundColor: Constants.primary,
+                      foregroundColor: Constants.onPrimary,
+                      maximumSize: const Size.fromHeight(
+                        Constants.elevatedButtonSize,
+                      ),
+                      minimumSize: const Size.fromHeight(
+                        Constants.elevatedButtonSize,
+                      ),
+                    ),
+                    label: const Text('Subscribe to FeedDeck Premium'),
+                    onPressed:
+                        snapshot.connectionState == ConnectionState.none ||
+                                snapshot.connectionState ==
+                                    ConnectionState.waiting ||
+                                snapshot.hasError
+                            ? null
+                            : () => _openUrl(snapshot.data),
+                    icon: snapshot.connectionState == ConnectionState.none ||
+                            snapshot.connectionState ==
+                                ConnectionState.waiting ||
+                            snapshot.hasError
+                        ? const ElevatedButtonProgressIndicator()
+                        : const Icon(FDIcons.feeddeck),
+                  ),
+                ),
+              ],
+            );
+          },
+        ),
       ),
     );
   }

app/lib/widgets/settings/profile/settings_profile_customer_portal.dart

@@ -180,60 +180,65 @@ class _SettingsProfileCustomerPortalModalState
           ),
         ],
       ),
-      body: FutureBuilder(
-        future: _futureFetchCustomerPortalLink,
-        builder: (
-          BuildContext context,
-          AsyncSnapshot<String> snapshot,
-        ) {
-          return Column(
-            children: [
-              const Expanded(
-                child: Padding(
-                  padding: EdgeInsets.all(Constants.spacingMiddle),
-                  child: SingleChildScrollView(
-                    child: MarkdownBody(
-                      selectable: true,
-                      data: _settingsProfileCustomerPortalText,
+      body: SafeArea(
+        child: FutureBuilder(
+          future: _futureFetchCustomerPortalLink,
+          builder: (
+            BuildContext context,
+            AsyncSnapshot<String> snapshot,
+          ) {
+            return Column(
+              children: [
+                const Expanded(
+                  child: Padding(
+                    padding: EdgeInsets.all(Constants.spacingMiddle),
+                    child: SingleChildScrollView(
+                      child: MarkdownBody(
+                        selectable: true,
+                        data: _settingsProfileCustomerPortalText,
+                      ),
                     ),
                   ),
                 ),
-              ),
-              const SizedBox(
-                height: Constants.spacingSmall,
-              ),
-              const Divider(
-                color: Constants.dividerColor,
-                height: 1,
-                thickness: 1,
-              ),
-              Padding(
-                padding: const EdgeInsets.all(Constants.spacingMiddle),
-                child: ElevatedButton.icon(
-                  style: ElevatedButton.styleFrom(
-                    maximumSize: const Size.fromHeight(
-                      Constants.elevatedButtonSize,
-                    ),
-                    minimumSize: const Size.fromHeight(
-                      Constants.elevatedButtonSize,
-                    ),
-                  ),
-                  label: const Text('Open Customer Portal'),
-                  onPressed: snapshot.connectionState == ConnectionState.none ||
-                          snapshot.connectionState == ConnectionState.waiting ||
-                          snapshot.hasError
-                      ? null
-                      : () => _openUrl(snapshot.data),
-                  icon: snapshot.connectionState == ConnectionState.none ||
-                          snapshot.connectionState == ConnectionState.waiting ||
-                          snapshot.hasError
-                      ? const ElevatedButtonProgressIndicator()
-                      : const Icon(Icons.receipt),
+                const SizedBox(
+                  height: Constants.spacingSmall,
                 ),
-              ),
-            ],
-          );
-        },
+                const Divider(
+                  color: Constants.dividerColor,
+                  height: 1,
+                  thickness: 1,
+                ),
+                Padding(
+                  padding: const EdgeInsets.all(Constants.spacingMiddle),
+                  child: ElevatedButton.icon(
+                    style: ElevatedButton.styleFrom(
+                      maximumSize: const Size.fromHeight(
+                        Constants.elevatedButtonSize,
+                      ),
+                      minimumSize: const Size.fromHeight(
+                        Constants.elevatedButtonSize,
+                      ),
+                    ),
+                    label: const Text('Open Customer Portal'),
+                    onPressed:
+                        snapshot.connectionState == ConnectionState.none ||
+                                snapshot.connectionState ==
+                                    ConnectionState.waiting ||
+                                snapshot.hasError
+                            ? null
+                            : () => _openUrl(snapshot.data),
+                    icon: snapshot.connectionState == ConnectionState.none ||
+                            snapshot.connectionState ==
+                                ConnectionState.waiting ||
+                            snapshot.hasError
+                        ? const ElevatedButtonProgressIndicator()
+                        : const Icon(Icons.receipt),
+                  ),
+                ),
+              ],
+            );
+          },
+        ),
       ),
     );
   }