Skip to content

Commit 6b064fb

Browse files
abeddow91abeddow91
authored
Revert "Use subtitles file and use in looping video (#14624)" (#14785)
This reverts commit 6f267fd.
1 parent 6175452 commit 6b064fb

File tree

13 files changed

+8
-129
lines changed

13 files changed

+8
-129
lines changed

‎dotcom-rendering/src/components/Card/Card.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,6 @@ import { CardPicture } from '../CardPicture';
4242
import { Island } from '../Island';
4343
import { LatestLinks } from '../LatestLinks.importable';
4444
import { LoopVideo } from '../LoopVideo.importable';
45-
import type { SubtitleSize } from '../LoopVideoPlayer';
4645
import { Pill } from '../Pill';
4746
import { SlideshowCarousel } from '../SlideshowCarousel.importable';
4847
import { Snap } from '../Snap';
@@ -157,7 +156,6 @@ export type Props = {
157156
trailTextSize?: TrailTextSize;
158157
/** A kicker image is seperate to the main media and renders as part of the kicker */
159158
showKickerImage?: boolean;
160-
subtitleSize?: SubtitleSize;
161159
/** Determines if the headline should be positioned within the content or outside the content */
162160
headlinePosition?: 'inner' | 'outer';
163161
/** Feature flag for the labs redesign work */
@@ -405,7 +403,6 @@ export const Card = ({
405403
showKickerImage = false,
406404
headlinePosition = 'inner',
407405
showLabsRedesign = false,
408-
subtitleSize = 'small',
409406
}: Props) => {
410407
const hasSublinks = supportingContent && supportingContent.length > 0;
411408
const sublinkPosition = decideSublinkPosition(
@@ -953,10 +950,6 @@ export const Card = ({
953950
fallbackImageAlt={media.imageAltText}
954951
fallbackImageAspectRatio="5:4"
955952
linkTo={linkTo}
956-
subtitleSource={
957-
media.mainMedia.subtitleSource
958-
}
959-
subtitleSize={subtitleSize}
960953
/>
961954
</Island>
962955
)}

‎dotcom-rendering/src/components/FlexibleGeneral.stories.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -323,7 +323,6 @@ export const SplashBoostLevels: Story = {
323323

324324
return (
325325
<>
326-
<Section title="Default" boostLevel="default" />
327326
<Section title="Boosted" boostLevel="boost" />
328327
<Section title="Mega boosted" boostLevel="megaboost" />
329328
<Section title="Giga boosted" boostLevel="gigaboost" />

‎dotcom-rendering/src/components/FlexibleGeneral.tsx‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import type { ResponsiveFontSize } from './CardHeadline';
2121
import type { Loading } from './CardPicture';
2222
import { FeatureCard } from './FeatureCard';
2323
import { FrontCard } from './FrontCard';
24-
import type { SubtitleSize } from './LoopVideoPlayer';
2524
import type { Alignment } from './SupportingContent';
2625

2726
type Props = {
@@ -156,7 +155,6 @@ type BoostedSplashProperties = {
156155
supportingContentAlignment: Alignment;
157156
liveUpdatesAlignment: Alignment;
158157
trailTextSize: TrailTextSize;
159-
subtitleSize: SubtitleSize;
160158
avatarUrl?: string;
161159
};
162160

@@ -187,7 +185,6 @@ const decideSplashCardProperties = (
187185
supportingContentLength >= 4 ? 'horizontal' : 'vertical',
188186
liveUpdatesAlignment: 'vertical',
189187
trailTextSize: 'regular',
190-
subtitleSize: 'medium',
191188
};
192189
case 'boost':
193190
return {
@@ -203,7 +200,6 @@ const decideSplashCardProperties = (
203200
supportingContentLength >= 4 ? 'horizontal' : 'vertical',
204201
liveUpdatesAlignment: 'vertical',
205202
trailTextSize: 'regular',
206-
subtitleSize: 'medium',
207203
};
208204
case 'megaboost':
209205
return {
@@ -220,7 +216,6 @@ const decideSplashCardProperties = (
220216
supportingContentAlignment: 'horizontal',
221217
liveUpdatesAlignment: 'horizontal',
222218
trailTextSize: 'large',
223-
subtitleSize: 'large',
224219
};
225220
case 'gigaboost':
226221
return {
@@ -237,7 +232,6 @@ const decideSplashCardProperties = (
237232
supportingContentAlignment: 'horizontal',
238233
liveUpdatesAlignment: 'horizontal',
239234
trailTextSize: 'large',
240-
subtitleSize: 'large',
241235
};
242236
}
243237
};
@@ -299,7 +293,6 @@ const SplashCardLayout = ({
299293
supportingContentAlignment,
300294
liveUpdatesAlignment,
301295
trailTextSize,
302-
subtitleSize,
303296
} = decideSplashCardProperties(
304297
card.boostLevel ?? 'default',
305298
card.supportingContent?.length ?? 0,
@@ -349,7 +342,6 @@ const SplashCardLayout = ({
349342
trailTextSize={trailTextSize}
350343
canPlayInline={true}
351344
showKickerImage={card.format.design === ArticleDesign.Audio}
352-
subtitleSize={subtitleSize}
353345
headlinePosition={card.showLivePlayable ? 'outer' : 'inner'}
354346
showLabsRedesign={showLabsRedesign}
355347
/>
@@ -363,7 +355,6 @@ type BoostedCardProperties = {
363355
mediaSize: MediaSizeType;
364356
liveUpdatesPosition: Position;
365357
supportingContentAlignment: Alignment;
366-
subtitleSize: SubtitleSize;
367358
};
368359

369360
/**
@@ -387,7 +378,6 @@ const decideCardProperties = (
387378
liveUpdatesPosition: 'outer',
388379
supportingContentAlignment:
389380
supportingContentLength >= 2 ? 'horizontal' : 'vertical',
390-
subtitleSize: 'medium',
391381
};
392382
case 'boost':
393383
default:
@@ -401,7 +391,6 @@ const decideCardProperties = (
401391
liveUpdatesPosition: 'inner',
402392
supportingContentAlignment:
403393
supportingContentLength >= 2 ? 'horizontal' : 'vertical',
404-
subtitleSize: 'small',
405394
};
406395
}
407396
};
@@ -442,7 +431,6 @@ const FullWidthCardLayout = ({
442431
mediaSize,
443432
supportingContentAlignment,
444433
liveUpdatesPosition,
445-
subtitleSize,
446434
} = decideCardProperties(
447435
card.supportingContent?.length ?? 0,
448436
card.boostLevel,
@@ -508,7 +496,6 @@ const FullWidthCardLayout = ({
508496
canPlayInline={true}
509497
showKickerImage={card.format.design === ArticleDesign.Audio}
510498
showLabsRedesign={showLabsRedesign}
511-
subtitleSize={subtitleSize}
512499
/>
513500
</LI>
514501
</UL>

‎dotcom-rendering/src/components/FlexibleSpecial.tsx‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import { UL } from './Card/components/UL';
1919
import type { ResponsiveFontSize } from './CardHeadline';
2020
import type { Loading } from './CardPicture';
2121
import { FrontCard } from './FrontCard';
22-
import type { SubtitleSize } from './LoopVideoPlayer';
2322
import type { Alignment } from './SupportingContent';
2423

2524
type Props = {
@@ -42,7 +41,6 @@ type BoostProperties = {
4241
supportingContentAlignment: Alignment;
4342
liveUpdatesAlignment: Alignment;
4443
trailTextSize: TrailTextSize;
45-
subtitleSize: SubtitleSize;
4644
};
4745

4846
/**
@@ -71,7 +69,6 @@ const determineCardProperties = (
7169
supportingContentLength >= 3 ? 'horizontal' : 'vertical',
7270
liveUpdatesAlignment: 'vertical',
7371
trailTextSize: 'regular',
74-
subtitleSize: 'medium',
7572
};
7673
case 'boost':
7774
return {
@@ -87,7 +84,6 @@ const determineCardProperties = (
8784
supportingContentLength >= 3 ? 'horizontal' : 'vertical',
8885
liveUpdatesAlignment: 'vertical',
8986
trailTextSize: 'regular',
90-
subtitleSize: 'medium',
9187
};
9288
case 'megaboost':
9389
return {
@@ -102,7 +98,6 @@ const determineCardProperties = (
10298
supportingContentAlignment: 'horizontal',
10399
liveUpdatesAlignment: 'horizontal',
104100
trailTextSize: 'large',
105-
subtitleSize: 'large',
106101
};
107102
case 'gigaboost':
108103
return {
@@ -117,7 +112,6 @@ const determineCardProperties = (
117112
supportingContentAlignment: 'horizontal',
118113
liveUpdatesAlignment: 'horizontal',
119114
trailTextSize: 'large',
120-
subtitleSize: 'large',
121115
};
122116
}
123117
};
@@ -160,7 +154,6 @@ export const OneCardLayout = ({
160154
supportingContentAlignment,
161155
liveUpdatesAlignment,
162156
trailTextSize,
163-
subtitleSize,
164157
} = determineCardProperties(
165158
card.boostLevel ?? 'default',
166159
card.supportingContent?.length ?? 0,
@@ -201,7 +194,6 @@ export const OneCardLayout = ({
201194
showKickerImage={card.format.design === ArticleDesign.Audio}
202195
headlinePosition={isSplashCard ? 'outer' : 'inner'}
203196
showLabsRedesign={showLabsRedesign}
204-
subtitleSize={subtitleSize}
205197
/>
206198
</LI>
207199
</UL>

‎dotcom-rendering/src/components/LoopVideo.importable.tsx‎

Lines changed: 1 addition & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { css } from '@emotion/react';
22
import { log, storage } from '@guardian/libs';
3-
import { space } from '@guardian/source/foundations';
43
import { SvgAudio, SvgAudioMute } from '@guardian/source/react-components';
54
import { useCallback, useEffect, useRef, useState } from 'react';
65
import {
@@ -19,12 +18,8 @@ import {
1918
} from '../lib/video';
2019
import { CardPicture, type Props as CardPictureProps } from './CardPicture';
2120
import { useConfig } from './ConfigContext';
22-
import type {
23-
PLAYER_STATES,
24-
PlayerStates,
25-
SubtitleSize,
26-
} from './LoopVideoPlayer';
2721
import { LoopVideoPlayer } from './LoopVideoPlayer';
22+
import type { PLAYER_STATES, PlayerStates } from './LoopVideoPlayer';
2823
import { ophanTrackerWeb } from './YoutubeAtom/eventEmitters';
2924

3025
const videoContainerStyles = css`
@@ -122,8 +117,6 @@ type Props = {
122117
fallbackImageAlt: CardPictureProps['alt'];
123118
fallbackImageAspectRatio: CardPictureProps['aspectRatio'];
124119
linkTo: string;
125-
subtitleSource?: string;
126-
subtitleSize: SubtitleSize;
127120
};
128121

129122
export const LoopVideo = ({
@@ -139,8 +132,6 @@ export const LoopVideo = ({
139132
fallbackImageAlt,
140133
fallbackImageAspectRatio,
141134
linkTo,
142-
subtitleSource,
143-
subtitleSize,
144135
}: Props) => {
145136
const adapted = useShouldAdapt();
146137
const { renderingTarget } = useConfig();
@@ -487,25 +478,6 @@ export const LoopVideo = ({
487478
return FallbackImageComponent;
488479
}
489480

490-
const handleLoadedMetadata = () => {
491-
const video = vidRef.current;
492-
if (!video) return;
493-
494-
const track = video.textTracks[0];
495-
if (!track?.cues) return;
496-
const pxFromBottom = space[3];
497-
const videoHeight = video.getBoundingClientRect().height;
498-
const percentFromTop =
499-
((videoHeight - pxFromBottom) / videoHeight) * 100;
500-
501-
for (const cue of Array.from(track.cues)) {
502-
if (cue instanceof VTTCue) {
503-
cue.snapToLines = false;
504-
cue.line = percentFromTop;
505-
}
506-
}
507-
};
508-
509481
const handleLoadedData = () => {
510482
if (vidRef.current) {
511483
setHasAudio(doesVideoHaveAudio(vidRef.current));
@@ -645,7 +617,6 @@ export const LoopVideo = ({
645617
isPlayable={isPlayable}
646618
playerState={playerState}
647619
isMuted={isMuted}
648-
handleLoadedMetadata={handleLoadedMetadata}
649620
handleLoadedData={handleLoadedData}
650621
handleCanPlay={handleCanPlay}
651622
handlePlayPauseClick={handlePlayPauseClick}
@@ -656,8 +627,6 @@ export const LoopVideo = ({
656627
AudioIcon={hasAudio ? AudioIcon : null}
657628
preloadPartialData={preloadPartialData}
658629
showPlayIcon={showPlayIcon}
659-
subtitleSource={subtitleSource}
660-
subtitleSize={subtitleSize}
661630
/>
662631
</figure>
663632
);

‎dotcom-rendering/src/components/LoopVideo.stories.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ const meta = {
1212
parameters: {
1313
chromatic: {
1414
viewports: [breakpoints.mobile, breakpoints.wide],
15-
disableSnapshot: true,
1615
},
1716
},
1817
} satisfies Meta<typeof LoopVideo>;

0 commit comments

Comments
 (0)