Merge pull request #428 from heiseonline/fix/video-handling

Fix/video handling
heiseonline · Sep 9, 2024 · 64896ad · 64896ad
2 parents 5212bb2 + 2f0d587
commit 64896ad
Show file tree

Hide file tree

Showing 15 changed files with 11,145 additions and 5,780 deletions.
diff --git a/.changeset/honest-singers-matter.md b/.changeset/honest-singers-matter.md
@@ -0,0 +1,9 @@
+---
+'@embetty/component': minor
+'@embetty/jest-config': patch
+'@embetty/server': patch
+'@embetty/types': patch
+'@embetty/base': patch
+---
+
+added media hint and full tweets are now displayed
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -11,9 +11,9 @@ jobs:
       fail-fast: false
       matrix:
         node:
-          - '16.14'
-          - '18'
+          - '18.12'
           - '20'
+          - '22'
         platform:
           - ubuntu-latest
 
@@ -24,16 +24,16 @@ jobs:
       - name: Checkout Commit
         uses: actions/checkout@v3
       - name: Install pnpm
-        uses: pnpm/action-setup@v2.2.4
+        uses: pnpm/action-setup@v4.0.0
         with:
-          version: next-8
+          standalone: true
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
           node-version: ${{ matrix.node }}
           cache: 'pnpm'
-      - name: Install npm@7
-        run: npm add --global npm@7
+      - name: Install npm@8
+        run: pnpm add --global npm@8
       - name: pnpm install
         run: pnpm install
       - name: Audit

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,8 +1,8 @@
 {
   // Editor
   "editor.codeActionsOnSave": {
-    "source.organizeImports": true,
-    "source.fixAll.eslint": true
+    "source.organizeImports": "explicit",
+    "source.fixAll.eslint": "explicit"
   },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnPaste": true,

diff --git a/embetty-server/package.json b/embetty-server/package.json
@@ -32,27 +32,27 @@
     "@types/cors": "^2.8.17",
     "@types/debug": "^4.1.12",
     "@types/express": "^4.17.21",
-    "@types/jest": "^29.5.11",
+    "@types/jest": "^29.5.12",
     "@types/morgan": "^1.9.9",
     "@types/nunjucks": "^3.2.6",
     "@types/supertest": "^2.0.16",
     "jest": "^29.7.0",
-    "supertest": "^6.3.3",
-    "ts-jest": "^29.1.1",
-    "tsc-watch": "^6.0.4"
+    "supertest": "^6.3.4",
+    "ts-jest": "^29.2.5",
+    "tsc-watch": "^6.2.0"
   },
   "dependencies": {
     "@embetty/base": "workspace:*",
     "@embetty/component": "workspace:*",
     "commander": "^10.0.1",
     "cors": "^2.8.5",
-    "debug": "^4.3.4",
-    "dotenv": "^16.3.1",
-    "express": "^4.18.2",
+    "debug": "^4.3.7",
+    "dotenv": "^16.4.5",
+    "express": "^4.19.2",
     "helmet": "^6.2.0",
-    "http-status": "^1.7.3",
+    "http-status": "^1.7.4",
     "morgan": "^1.10.0",
     "nunjucks": "^3.2.4",
-    "tslib": "^2.6.2"
+    "tslib": "^2.7.0"
   }
 }
diff --git a/embetty/package.json b/embetty/package.json
@@ -49,30 +49,29 @@
     "@embetty/types": "workspace:^",
     "@types/fs-extra": "^11.0.4",
     "@types/hogan.js": "^3.0.5",
-    "@types/jest": "^29.5.11",
-    "autoprefixer": "^10.4.16",
+    "@types/jest": "^29.5.12",
+    "autoprefixer": "^10.4.20",
     "cpy-cli": "^4.2.0",
-    "css-loader": "^6.8.1",
+    "css-loader": "^6.11.0",
     "file-loader": "^6.2.0",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "fs-extra": "^11.2.0",
     "gh-pages": "^5.0.0",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "lint-staged": "^13.3.0",
-    "postcss": "^8.4.32",
+    "postcss": "^8.4.45",
     "postcss-loader": "^7.3.4",
     "raw-loader": "^4.0.2",
-    "rimraf": "^5.0.5",
-    "sass": "^1.69.7",
+    "rimraf": "^5.0.10",
+    "sass": "^1.78.0",
     "sass-loader": "^13.3.3",
-    "ts-jest": "^29.1.1",
+    "ts-jest": "^29.2.5",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.3.3",
-    "webpack": "^5.89.0",
-    "webpack-bundle-analyzer": "^4.10.1",
+    "typescript": "5.5.3",
+    "webpack": "^5.94.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^4.15.2"
   }
 }
diff --git a/embetty/src/embed/tweet.scss b/embetty/src/embed/tweet.scss
@@ -96,6 +96,20 @@ $quoteLineWidth: 4px;
         text-decoration: underline;
       }
     }
+
+    .media-hint {
+      background-color: #e8e8e8;
+      padding: 0.5rem;
+      margin-bottom: 0.5rem;
+      border-radius: 5px;
+      border: 1px solid #ddd;
+
+      a {
+        color: #444;
+        font-size: 14px;
+        text-decoration: underline;
+      }
+    }
   }
 
   #media {

diff --git a/embetty/src/embed/tweet.ts b/embetty/src/embed/tweet.ts
@@ -20,13 +20,20 @@ const template = `
       </header>
       <article>
         <p>{{{ fullText }}}</p>
-        {{#hasMedia}}
-          <section class="media-{{media.length}}" id="media">
-            {{#media}}
+        {{#hasImages}}
+          <section class="media-{{images.length}}" id="media">
+            {{#images}}
               <a target="_blank" href="{{imageUrl}}"><img src="{{imageUrl}}"></a>
-            {{/media}}
+            {{/images}}
           </section>
-        {{/hasMedia}}
+        {{/hasImages}}
+        {{#hasAdditionalMedia}}
+          <section class="media-hint">
+            <a href="{{twitterUrl}}" target="_blank" rel="noopener">
+              Weitere Inhalte des Posts auf x.com
+            </a>
+          </section>
+        {{/hasAdditionalMedia}}
 
         {{#hasLinks}}
           <a href="{{link.url}}" target="_blank" rel="noopener" id="links">
@@ -166,11 +173,15 @@ export class Tweet extends Embed<EmbettyTweet> {
   }
 
   get fullText() {
-    return this._data?.data.text
-      .replace(/#([^\s-]+)/g, (hashTag: string, word: string) => {
+    const text = this._data?.data.note_tweet
+      ? this._data?.data.note_tweet.text
+      : this._data?.data.text
+
+    return (text ?? '')
+      .replaceAll(/#([^\s-]+)/g, (hashTag: string, word: string) => {
         return `<a href="https://twitter.com/hashtag/${word}">${hashTag}</a>`
       })
-      .replace(/@(\w+)/g, (name: string, word: string) => {
+      .replaceAll(/@(\w+)/g, (name: string, word: string) => {
         return `<a href="https://twitter.com/${word}">${name}</a>`
       })
     // .replace(/(https:\/\/\S+)$/, (link: string) => {
@@ -204,16 +215,25 @@ export class Tweet extends Embed<EmbettyTweet> {
     return this.user?.username
   }
 
-  get media() {
-    return (this._data?.data.attachments?.media_keys ?? []).map(
-      (_key, index) => ({
-        imageUrl: `${this.url}/images/${index}`,
-      }),
+  get images() {
+    const images = (this._data?.includes.media ?? []).filter(
+      (include) => include.type === 'photo',
     )
+
+    return (images ?? []).map((_key, index) => ({
+      imageUrl: `${this.url}/images/${index}`,
+    }))
   }
 
-  get hasMedia() {
-    return this.media.length > 0
+  get hasAdditionalMedia() {
+    return (
+      this.images.length <
+      (this._data?.data.attachments?.media_keys.length ?? 0)
+    )
+  }
+
+  get hasImages() {
+    return this.images.length > 0
   }
 
   get links() {
@@ -247,6 +267,7 @@ export class Tweet extends Embed<EmbettyTweet> {
     await super.becomesVisible()
 
     const linkImage = this.shadowRoot!.querySelector('#links img')
+
     if (linkImage) {
       linkImage.addEventListener('error', () => {
         linkImage.remove()

diff --git a/embetty/tsconfig.json b/embetty/tsconfig.json
@@ -5,19 +5,9 @@
     "outDir": "./dist",
     "importHelpers": false,
     "target": "ES2015",
-    "lib": [
-      "DOM",
-      "DOM.Iterable",
-      "ES2016",
-      "ES2020"
-    ]
+    "lib": ["DOM", "DOM.Iterable", "ES2016", "ES2020", "ES2021.String"]
   },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "dist",
-    "node_modules"
-  ],
+  "include": ["src/**/*"],
+  "exclude": ["dist", "node_modules"],
   "references": []
 }
diff --git a/libs/base/package.json b/libs/base/package.json
@@ -16,13 +16,13 @@
     "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "axios": "^1.6.3",
+    "axios": "^1.7.7",
     "cheerio": "1.0.0-rc.12",
     "content-type": "^1.0.5",
-    "debug": "^4.3.4",
-    "ioredis": "^5.3.2",
+    "debug": "^4.3.7",
+    "ioredis": "^5.4.1",
     "lru-cache": "^9.1.2",
-    "tslib": "^2.6.2"
+    "tslib": "^2.7.0"
   },
   "devDependencies": {
     "@embetty/eslint-config": "workspace:*",
@@ -31,8 +31,8 @@
     "@embetty/types": "workspace:^",
     "@types/content-type": "^1.1.8",
     "@types/debug": "^4.1.12",
-    "@types/jest": "^29.5.11",
+    "@types/jest": "^29.5.12",
     "jest": "^29.7.0",
-    "ts-jest": "^29.1.1"
+    "ts-jest": "^29.2.5"
   }
 }
diff --git a/libs/base/src/twitter/tweet.ts b/libs/base/src/twitter/tweet.ts
@@ -54,7 +54,7 @@ export class Tweet extends Embed<TweetResponse, EmbettyTweet> {
       params: {
         // tweet_mode: 'extended',
         'tweet.fields':
-          'attachments,author_id,context_annotations,conversation_id,created_at,entities,geo,id,in_reply_to_user_id,lang,possibly_sensitive,public_metrics,referenced_tweets,reply_settings,source,text,withheld,edit_history_tweet_ids,edit_controls',
+          'attachments,author_id,context_annotations,conversation_id,created_at,entities,geo,id,in_reply_to_user_id,lang,possibly_sensitive,public_metrics,referenced_tweets,reply_settings,source,text,withheld,edit_history_tweet_ids,edit_controls,note_tweet',
         expansions:
           'attachments.poll_ids,attachments.media_keys,author_id,geo.place_id,in_reply_to_user_id,referenced_tweets.id,entities.mentions.username,referenced_tweets.id.author_id,edit_history_tweet_ids',
         'user.fields': 'id,name,username,profile_image_url',
@@ -106,7 +106,9 @@ export class Tweet extends Embed<TweetResponse, EmbettyTweet> {
   get media() {
     return (this.tweetData?.data.attachments?.media_keys ?? [])
       .map((key) =>
-        this.tweetData?.includes.media.find((media) => media.media_key === key),
+        this.tweetData?.includes.media.find(
+          (media) => media.media_key === key && media.type === 'photo',
+        ),
       )
       .filter(isDefined)
   }

diff --git a/libs/types/package.json b/libs/types/package.json
@@ -9,7 +9,7 @@
   "devDependencies": {
     "@embetty/eslint-config": "workspace:*",
     "@embetty/tsconfig": "workspace:*",
-    "tslib": "^2.6.2"
+    "tslib": "^2.7.0"
   },
   "publishConfig": {
     "access": "public",

diff --git a/libs/types/src/tweet.interfaces.ts b/libs/types/src/tweet.interfaces.ts
@@ -34,6 +34,7 @@ export interface Data {
   reply_settings: string
   possibly_sensitive: boolean
   edit_controls: EditControls
+  note_tweet?: NoteTweet
   conversation_id: string
   lang: string
   author_id: string
@@ -43,6 +44,10 @@ export interface Data {
   referenced_tweets?: ReferencedTweet[]
 }
 
+export interface NoteTweet {
+  text: string
+}
+
 export interface ReferencedTweet {
   type: 'replied_to' | unknown
   id: string

diff --git a/package.json b/package.json
@@ -13,18 +13,19 @@
   },
   "dependencies": {
     "ts-node": "^10.9.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.5.4"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.27.1",
+    "@changesets/cli": "^2.27.8",
     "@commitlint/cli": "^17.8.1",
     "@commitlint/config-conventional": "^17.8.1",
     "@embetty/eslint-config": "workspace:^",
     "@embetty/tsconfig": "workspace:^",
-    "@types/jest": "^29.5.11",
-    "@types/node": "^18.19.4",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^18.19.50",
     "husky": "^8.0.3",
-    "lint-staged": "^13.3.0",
+    "lint-staged": "^15.2.10",
     "prettier": "^2.8.8"
-  }
+  },
+  "packageManager": "[email protected]+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1"
 }