Skip to content

Commit c0f3105

Browse files
luwesluwes
committed
feat: add video-title attr & prop
fix #639
1 parent 205f3c8 commit c0f3105

File tree

7 files changed

+38
-21
lines changed

7 files changed

+38
-21
lines changed

‎examples/vanilla-ts-esm/public/mux-player.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ <h2>On-demand</h2>
4343
<mux-player
4444
stream-type="on-demand"
4545
playback-id="Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008"
46+
video-title="Elephants Dream"
47+
title="Click to play video"
4648
>
4749
<track label="Japanese" kind="captions" srclang="ja" src="./vtt/elephantsdream/captions.ja.vtt"></track>
4850
<track default kind="chapters" src="./vtt/elephantsdream/chapters.vtt"></track>
@@ -84,13 +86,15 @@ <h2>Live</h2>
8486
stream-type="live"
8587
target-live-window="Infinity"
8688
playback-id="v69RSHhFelSm4701snP22dYz2jICy4E4FUyk02rW4gxRM"
87-
title="My amazing video"
89+
title="Big Bucks Bunny"
8890
></mux-player>
8991

9092
<mux-player
9193
stream-type="on-demand"
9294
playback-id="Sc89iWAyNkhJ3P1rQ02nrEdCFTnfT01CZ2KmaEcxXfB008"
9395
proudly-display-mux-badge
96+
title="Click to play"
97+
video-title=""
9498
></mux-player>
9599

96100
<a href="../">Browse Elements</a>

‎packages/mux-player-react/REFERENCE.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
| `hotkeys` | `string` (space separated enum list) | Similar to `className`, a space-separated string blocklist of keyboard shortcuts (hotkeys) you want to disable. Based on [Media Chrome's implementation](https://media-chrome-docs.vercel.app/en/keyboard-shortcuts) | `''` |
1818
| `nohotkeys` | `boolean` | Toggles keyboard shortcut (hot keys) support when focus in inside the player | `false` |
1919
| `thumbnailTime` | `number` (seconds) | [Time offset](https://docs.mux.com/guides/video/get-images-from-a-video#thumbnail-query-string-parameters) for the default `poster` image based on your `playback-id`. If no `thumbnail-time` is specified, `start-time` will be used by default. NOTE: This feature currently cannot be used with `token.thumbnail`. | `0` |
20-
| `title` | `string` | Title text to show for your content in the Mux Player UI. | `""` |
20+
| `title` | `string` | Title text to show for your content in the Mux Player UI. In most browsers the `title` attribute causes a tooltip on hover. Use `videoTitle` to prevent the tooltip. | `""` |
21+
| `videoTitle` | `string` | Title text to show for your content in the Mux Player UI without causing a tooltip. | `""` |
2122
| `placeholder` | `string` (URI) | Image to show as various assets load. Typically a [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) when used | N/A |
2223
| `primaryColor` | `string` (Any valid CSS color style) | The primary color used by the player's UI | `undefined` |
2324
| `secondaryColor` | `string` (Any valid CSS color style) | The secondary color used by the player's UI | `undefined` |

‎packages/mux-player/REFERENCE.md‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@
5252
| `hotkeys` | [`DOMTokenList`](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList) (space separated enum list) | A blocklist of keyboard shortcuts (hotkeys) you want to disable. Based on [Media Chrome's implementation](https://media-chrome-docs.vercel.app/en/keyboard-shortcuts) | N/A |
5353
| `playbackrates` | `number[]` (space separated list) | A space separated string of playback rates used by the playback rate button. | N/A |
5454
| `default-show-remaining-time` | `boolean` | Show remaining playback time (instead of current playback time) by default | `false` |
55-
| `title` | `string` | Title text to show for your content in the Mux Player UI. | `""` |
55+
| `title` | `string` | Title text to show for your content in the Mux Player UI. In most browsers the `title` attribute causes a tooltip on hover. Use `video-title` to prevent the tooltip. | `""` |
56+
| `video-title` | `string` | Title text to show for your content in the Mux Player UI without causing a tooltip. | `""` |
5657
| `placeholder` | `string` (URI) | Image to show as various assets load. Typically a [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) when used | N/A |
5758
| `cast-receiver` | `string` (Receiver ID) | The app ID to use for a custom [Google cast receiver](https://developers.google.com/cast/docs/web_receiver/basic). If none is provided, the default receiver app will be used. | N/A |
5859
| `no-tooltips` | `boolean` | Toggles disabling tooltips in the UI | `false` |
@@ -113,7 +114,8 @@
113114
| `hotkeys` <sub><sup>Read only\*</sup></sub> | [`DOMTokenList`](https://developer.mozilla.org/en-US/docs/Web/API/DOMTokenList) | A `DOMTokenList` (similar to [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)) blocklist of keyboard shortcuts (hotkeys) you want to disable. Based on [Media Chrome's implementation](https://media-chrome-docs.vercel.app/en/keyboard-shortcuts) | `''` |
114115
| `nohotkeys` | `boolean` | Toggles keyboard shortcut (hot keys) support when focus in inside the player | `false` |
115116
| `thumbnailTime` | `number` (seconds) | [Time offset](https://docs.mux.com/guides/video/get-images-from-a-video#thumbnail-query-string-parameters) for the default `poster` image based on your `playback-id`. If no `thumbnail-time` is specified, `start-time` will be used by default. NOTE: This feature currently cannot be used with `thumbnail-token`. | `0` |
116-
| `title` | `string` | Title text to show for your content in the Mux Player UI. | `""` |
117+
| `title` | `string` | Title text to show for your content in the Mux Player UI. In most browsers the `title` attribute causes a tooltip on hover. Use `videoTitle` to prevent the tooltip. | `""` |
118+
| `videoTitle` | `string` | Title text to show for your content in the Mux Player UI without causing a tooltip. | `""` |
117119
| `placeholder` | `string` (URI) | Image to show as various assets load. Typically a [data URI](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) when used | N/A |
118120
| `primaryColor` | `string` (Any valid CSS color style) | The primary color used by the player's UI | `undefined` |
119121
| `secondaryColor` | `string` (Any valid CSS color style) | The secondary color used by the player's UI | `undefined` |

‎packages/mux-player/src/index.ts‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@ const PlayerAttributes = {
7777
DEFAULT_SHOW_REMAINING_TIME: 'default-show-remaining-time',
7878
DEFAULT_DURATION: 'default-duration',
7979
TITLE: 'title',
80+
VIDEO_TITLE: 'video-title', // video-title is an alternative for title which doesn't cause a tooltip.
8081
PLACEHOLDER: 'placeholder',
8182
THEME: 'theme',
8283
DEFAULT_STREAM_TYPE: 'default-stream-type',
@@ -108,6 +109,7 @@ const ThemeAttributeNames = [
108109
'targetlivewindow',
109110
'template',
110111
'title',
112+
'videotitle',
111113
'novolumepref',
112114
'proudlydisplaymuxbadge',
113115
];
@@ -172,6 +174,7 @@ function getProps(el: MuxPlayerElement, state?: any): MuxTemplateProps {
172174
playbackRates: el.getAttribute(PlayerAttributes.PLAYBACK_RATES),
173175
customDomain: el.getAttribute(MuxVideoAttributes.CUSTOM_DOMAIN) ?? undefined,
174176
title: el.getAttribute(PlayerAttributes.TITLE),
177+
videoTitle: el.getAttribute(PlayerAttributes.VIDEO_TITLE),
175178
novolumepref: el.hasAttribute(PlayerAttributes.NO_VOLUME_PREF),
176179
castReceiver: el.castReceiver,
177180
proudlyDisplayMuxBadge: el.hasAttribute(PlayerAttributes.PROUDLY_DISPLAY_MUX_BADGE),
@@ -1107,25 +1110,23 @@ class MuxPlayerElement extends VideoApiElement implements MuxPlayerElement {
11071110
}
11081111

11091112
/**
1110-
* Get the title shown in the player.
1113+
* Get the video title shown in the player.
11111114
*/
1112-
get title() {
1113-
return this.getAttribute(PlayerAttributes.TITLE) ?? '';
1115+
get videoTitle() {
1116+
return this.getAttribute(PlayerAttributes.VIDEO_TITLE) ?? '';
11141117
}
11151118

11161119
/**
1117-
* Set the title shown in the player.
1120+
* Set the video title shown in the player.
11181121
*/
1119-
set title(val: string) {
1120-
if (val === this.title) return;
1122+
set videoTitle(val: string) {
1123+
if (val === this.videoTitle) return;
11211124

11221125
if (!!val) {
1123-
this.setAttribute(PlayerAttributes.TITLE, val);
1126+
this.setAttribute(PlayerAttributes.VIDEO_TITLE, val);
11241127
} else {
1125-
this.removeAttribute('title');
1128+
this.removeAttribute(PlayerAttributes.VIDEO_TITLE);
11261129
}
1127-
// Calling super.title for tooltip usage
1128-
super.title = val;
11291130
}
11301131

11311132
/**

‎packages/mux-player/src/template.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ export const content = (props: MuxTemplateProps) => html`
102102
defaultduration="${props.defaultDuration ?? false}"
103103
hideduration="${props.hideDuration ?? false}"
104104
title="${props.title ?? false}"
105+
videotitle="${props.videoTitle ?? false}"
105106
proudlydisplaymuxbadge="${props.proudlyDisplayMuxBadge ?? false}"
106107
exportparts="${partsListStr}"
107108
onclose="${props.onCloseErrorDialog}"

‎packages/mux-player/src/themes/gerwig/gerwig.html‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -224,11 +224,11 @@
224224
}
225225

226226
media-control-bar {
227-
--gradient-steps: hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0.013) 8.1%, hsl(0 0% 0% / 0.049) 15.5%,
228-
hsl(0 0% 0% / 0.104) 22.5%, hsl(0 0% 0% / 0.175) 29%, hsl(0 0% 0% / 0.259) 35.3%, hsl(0 0% 0% / 0.352) 41.2%,
229-
hsl(0 0% 0% / 0.45) 47.1%, hsl(0 0% 0% / 0.55) 52.9%, hsl(0 0% 0% / 0.648) 58.8%, hsl(0 0% 0% / 0.741) 64.7%,
230-
hsl(0 0% 0% / 0.825) 71%, hsl(0 0% 0% / 0.896) 77.5%, hsl(0 0% 0% / 0.951) 84.5%, hsl(0 0% 0% / 0.987) 91.9%,
231-
hsl(0 0% 0%) 100%;
227+
--gradient-steps:
228+
hsl(0 0% 0% / 0) 0%, hsl(0 0% 0% / 0.013) 8.1%, hsl(0 0% 0% / 0.049) 15.5%, hsl(0 0% 0% / 0.104) 22.5%,
229+
hsl(0 0% 0% / 0.175) 29%, hsl(0 0% 0% / 0.259) 35.3%, hsl(0 0% 0% / 0.352) 41.2%, hsl(0 0% 0% / 0.45) 47.1%,
230+
hsl(0 0% 0% / 0.55) 52.9%, hsl(0 0% 0% / 0.648) 58.8%, hsl(0 0% 0% / 0.741) 64.7%, hsl(0 0% 0% / 0.825) 71%,
231+
hsl(0 0% 0% / 0.896) 77.5%, hsl(0 0% 0% / 0.951) 84.5%, hsl(0 0% 0% / 0.987) 91.9%, hsl(0 0% 0%) 100%;
232232
}
233233

234234
:host([title]:not([audio])) media-control-bar[slot='top-chrome']::before {
@@ -592,8 +592,15 @@
592592
</style>
593593

594594
<template partial="TitleDisplay">
595-
<template if="title">
596-
<media-text-display part="top title display" class="title-display">{{title}}</media-text-display>
595+
<template if="videotitle">
596+
<template if="videotitle != true">
597+
<media-text-display part="top title display" class="title-display">{{videotitle}}</media-text-display>
598+
</template>
599+
</template>
600+
<template if="!videotitle">
601+
<template if="title">
602+
<media-text-display part="top title display" class="title-display">{{title}}</media-text-display>
603+
</template>
597604
</template>
598605
</template>
599606

0 commit comments

Comments
 (0)