Ai workshop chapter list prototype

data/russian/bbc_russian_radio/p076qqzl.json

@@ -0,0 +1,108 @@
+{
+  "data": {
+    "metadata": {
+      "type": "Podcast",
+      "atiAnalytics": {
+        "pageIdentifier": "russian.bbc_russian_radio.podcasts.programmes.p076qqzl.page",
+        "contentType": "player-episode",
+        "pageTitle": "Что это было? - BBC News Русская служба",
+        "language": "ru",
+        "contentId": "urn:bbc:pips:p076qqzl"
+      }
+    },
+    "language": "ru",
+    "brandTitle": "Что это было?",
+    "episodeTitle": "Зачем Украина бьет по «Вайлдберриз»?",
+    "headline": "Что это было?",
+    "shortSynopsis": "И какой ущерб понес российский бизнес?",
+    "mediumSynopsis": "",
+    "longSynopsis": "Новая цель украинских атак в России — индустриальные парки и склады маркетплейсов. В ночь на понедельник под удар попал индустриальный парк «Южные Врата», а в ночь на субботу после ударов беспилотников загорелись крупные склады «Вайлдберриз» в Подмосковье и Тамбовской области.\nЗачем Украина бьет по складам маркетплейсов? И какой ущерб эти удары наносят российской экономике? На эти вопросы отвечает экономический обозреватель Русской службы Би-би-си Ольга Шамина.\n\n00:00 Приветствие. Ведущий — Илья Кизиров.\n00:42 Какие объекты были атакованы в ночь на понедельник?\n01:45 Что за склады горели в субботу?\n05:37 Зеленский утверждает, что склады «Вайлдберриз» — легитимная цель, потому что там находились военные товары. Это так?\n09:20 Какой ущерб понесли бизнесмены?\n16:46 Что говорит Татьяна Ким?\n18:00 «Вайлдберриз» действительно так важен для российской экономики?\n19:53 Зачем Украина атакует промышленные парки и логистические центры?\n\nНас можно слушать и смотреть на YouTube https://bit.ly/3rot87v",
+    "episodeShortSynopsis": "И какой ущерб понес российский бизнес?",
+    "episodeMediumSynopsis": "",
+    "episodeLongSynopsis": "Новая цель украинских атак в России — индустриальные парки и склады маркетплейсов. В ночь на понедельник под удар попал индустриальный парк «Южные Врата», а в ночь на субботу после ударов беспилотников загорелись крупные склады «Вайлдберриз» в Подмосковье и Тамбовской области.\nЗачем Украина бьет по складам маркетплейсов? И какой ущерб эти удары наносят российской экономике? На эти вопросы отвечает экономический обозреватель Русской службы Би-би-си Ольга Шамина.\n\n00:00 Приветствие. Ведущий — Илья Кизиров.\n00:42 Какие объекты были атакованы в ночь на понедельник?\n01:45 Что за склады горели в субботу?\n05:37 Зеленский утверждает, что склады «Вайлдберриз» — легитимная цель, потому что там находились военные товары. Это так?\n09:20 Какой ущерб понесли бизнесмены?\n16:46 Что говорит Татьяна Ким?\n18:00 «Вайлдберриз» действительно так важен для российской экономики?\n19:53 Зачем Украина атакует промышленные парки и логистические центры?\n\nНас можно слушать и смотреть на YouTube https://bit.ly/3rot87v",
+    "brandShortSynopsis": "Би-би-си объясняет все самое важное про главное событие недели",
+    "brandMediumSynopsis": "Мы быстро, просто и понятно объясняем, что случилось, почему это важно и что будет дальше. Никаких ненужных подробностей и передергиваний - только факты и взвешенная аналитика.",
+    "brandLongSynopsis": "Мы быстро, просто и понятно объясняем, что случилось, почему это важно и что будет дальше. Никаких ненужных подробностей и передергиваний - только факты и взвешенная аналитика.",
+    "id": "urn:bbc:ares:ws_media:brand:bbc_russian_radio/p076qqzl",
+    "brandId": "p076qqzl",
+    "episodeId": "p0nztzlr",
+    "masterBrand": "bbc_russian_radio",
+    "imageUrl": "ichef.bbci.co.uk/images/ic/$recipe/p0nztzts.jpg",
+    "imageAltText": "",
+    "promoBrandTitle": null,
+    "promoSeriesTitle": "Что это было?",
+    "durationISO8601": "PT24M10S",
+    "thumbnailImageUrl": "https://ichef.bbci.co.uk/images/ic/1024x576/p0nztzts.jpg",
+    "episodeAvailability": "available",
+    "recentEpisodes": [],
+    "mediaBlocks": [
+      {
+        "type": "audio",
+        "model": {
+          "id": "p0nztzlr",
+          "subType": "episode",
+          "format": "Audio",
+          "title": "Что это было?",
+          "synopses": {
+            "short": "И какой ущерб понес российский бизнес?",
+            "long": "Новая цель украинских атак в России — индустриальные парки и склады маркетплейсов. В ночь на понедельник под удар попал индустриальный парк «Южные Врата», а в ночь на субботу после ударов беспилотников загорелись крупные склады «Вайлдберриз» в Подмосковье и Тамбовской области.\nЗачем Украина бьет по складам маркетплейсов? И какой ущерб эти удары наносят российской экономике? На эти вопросы отвечает экономический обозреватель Русской службы Би-би-си Ольга Шамина.\n\n00:00 Приветствие. Ведущий — Илья Кизиров.\n00:42 Какие объекты были атакованы в ночь на понедельник?\n01:45 Что за склады горели в субботу?\n05:37 Зеленский утверждает, что склады «Вайлдберриз» — легитимная цель, потому что там находились военные товары. Это так?\n09:20 Какой ущерб понесли бизнесмены?\n16:46 Что говорит Татьяна Ким?\n18:00 «Вайлдберриз» действительно так важен для российской экономики?\n19:53 Зачем Украина атакует промышленные парки и логистические центры?\n\nНас можно слушать и смотреть на YouTube https://bit.ly/3rot87v"
+          },
+          "imageUrl": "ichef.bbci.co.uk/images/ic/$recipe/p0nztzts.jpg",
+          "embedding": true,
+          "advertising": false,
+          "versions": [
+            {
+              "versionId": "p0nztyz8",
+              "types": ["Podcast"],
+              "duration": 1450,
+              "durationISO8601": "PT24M10S",
+              "warnings": {},
+              "availableTerritories": {
+                "uk": true,
+                "nonUk": true,
+                "world": false
+              },
+              "availableFrom": "2026-07-20T12:53:00.000Z",
+              "availabilityStatus": "available",
+              "availableUntil": null
+            }
+          ],
+          "availability": "available",
+          "smpKind": "radioProgramme",
+          "episodeTitle": "Зачем Украина бьет по «Вайлдберриз»?",
+          "type": "media"
+        }
+      },
+      {
+        "type": "mediaOverrides",
+        "model": {
+          "language": "ru",
+          "pageIdentifierOverride": "russian.bbc_russian_radio.podcasts.p0nztzlr.page"
+        }
+      }
+    ],
+    "releaseDateTimeStamp": "2026-07-20T00:00:00.000Z",
+    "isPodcast": true,
+    "summary": "Новая цель украинских атак в России — индустриальные парки и склады маркетплейсов. В ночь на понедельник под удар попал индустриальный парк «Южные Врата», а в ночь на субботу после ударов беспилотников загорелись крупные склады «Вайлдберриз» в Подмосковье и Тамбовской области.\nЗачем Украина бьет по складам маркетплейсов? И какой ущерб эти удары наносят российской экономике? На эти вопросы отвечает экономический обозреватель Русской службы Би-би-си Ольга Шамина.\n\n00:00 Приветствие. Ведущий — Илья Кизиров.\n00:42 Какие объекты были атакованы в ночь на понедельник?\n01:45 Что за склады горели в субботу?\n05:37 Зеленский утверждает, что склады «Вайлдберриз» — легитимная цель, потому что там находились военные товары. Это так?\n09:20 Какой ущерб понесли бизнесмены?\n16:46 Что говорит Татьяна Ким?\n18:00 «Вайлдберриз» действительно так важен для российской экономики?\n19:53 Зачем Украина атакует промышленные парки и логистические центры?\n\nНас можно слушать и смотреть на YouTube https://bit.ly/3rot87v",
+    "radioScheduleData": null,
+    "externalLinkVersionId": "p0nztyz8",
+    "externalLinks": [
+      {
+        "linkText": "YouTube",
+        "linkUrl": "https://www.youtube.com/@bbcnewsrussia",
+        "linkType": "youtube"
+      },
+      {
+        "linkText": "Apple",
+        "linkUrl": "https://podcasts.apple.com/ru/podcast/что-это-было/id1446419948",
+        "linkType": "apple"
+      },
+      {
+        "linkUrl": "https://podcasts.files.bbci.co.uk/p076qqzl.rss",
+        "linkText": "RSS",
+        "linkType": "rss"
+      }
+    ]
+  },
+  "contentType": "application/json; charset=utf-8"
+}

src/app/components/EpisodeDescriptionFormatter/index.module.scss

@@ -0,0 +1,89 @@
+@use '@scss/themeTokens' as theme;
+
+.paragraph {
+  @include theme.fontSizes-gel-font-size(pica);
+  @include theme.fontVariants-gel-font-variant('sans-regular');
+  color: theme.$palette-metal;
+  margin: 0 0 #{theme.$spacings-double} 0;
+
+  :global([data-is-dark-ui='true']) & {
+    color: theme.$palette-ghost;
+  }
+}
+
+.link {
+  color: theme.$palette-postbox;
+  text-decoration: underline;
+
+  :global([data-is-dark-ui='true']) & {
+    color: theme.$palette-pebble;
+  }
+}
+
+.chapterBlock {
+  margin-bottom: #{theme.$spacings-double};
+}
+
+.chapterList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.chapterItem {
+  display: flex;
+  gap: #{theme.$spacings-full};
+  padding: #{theme.$spacings-half} 0;
+  border-bottom: 1px solid theme.$palette-pebble;
+  align-items: baseline;
+
+  &:first-child {
+    border-top: 1px solid theme.$palette-pebble;
+  }
+
+  :global([data-is-dark-ui='true']) & {
+    border-color: theme.$palette-shadow;
+  }
+}
+
+.timestamp {
+  @include theme.fontSizes-gel-font-size(pica);
+  @include theme.fontVariants-gel-font-variant('sans-bold');
+  color: theme.$palette-postbox;
+  min-width: 3.5rem;
+  flex-shrink: 0;
+  font-variant-numeric: tabular-nums;
+}
+
+.timestampButton {
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+
+  &:hover,
+  &:focus {
+    color: theme.$palette-shadow;
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  :global([data-is-dark-ui='true']) & {
+    &:hover,
+    &:focus {
+      color: theme.$palette-ghost;
+    }
+  }
+}
+
+.chapterLabel {
+  @include theme.fontSizes-gel-font-size(pica);
+  @include theme.fontVariants-gel-font-variant('sans-regular');
+  color: theme.$palette-metal;
+
+  :global([data-is-dark-ui='true']) & {
+    color: theme.$palette-ghost;
+  }
+}