99c1401164
(1) This reverts commit 8641a3ee1c.
(2) Fix floating-player misalignment due to YT badge in mobile by hiding the badge.
At first, the suggestion to truncate the left URI to keep the entire thing single-lined was implemented, but during testing, I realized that the YT badge will take up the entire width anyway (especially on other languages). The URI is more important than the badge, and truncating both of them would be ugly.
Given the preference to not have 2 lines for this, we'll just hide the badge for the mobile case.
For the Channel Page case, let's make it single-line through "4454: URL / top claims overlap" instead. We'll keep this commit/PR limited to fixing the YT badge.
50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
// @flow
|
|
import * as ICONS from 'constants/icons';
|
|
import * as React from 'react';
|
|
import DateTime from 'component/dateTime';
|
|
import Icon from 'component/common/icon';
|
|
import { Lbryio } from 'lbryinc';
|
|
|
|
type Props = {
|
|
channelClaimId: string,
|
|
includeSyncDate: boolean,
|
|
};
|
|
|
|
export default function YoutubeBadge(props: Props) {
|
|
const { channelClaimId, includeSyncDate = true } = props;
|
|
|
|
const [isVerified, setIsVerified] = React.useState();
|
|
const [lastYtSyncDate, setLastYtSyncDate] = React.useState();
|
|
|
|
React.useEffect(() => {
|
|
if (channelClaimId) {
|
|
Lbryio.call('yt', 'get_youtuber', { channel_claim_id: channelClaimId }).then(response => {
|
|
if (response.is_verified_youtuber) {
|
|
setIsVerified(true);
|
|
setLastYtSyncDate(response.last_synced);
|
|
} else {
|
|
setIsVerified(false);
|
|
setLastYtSyncDate(undefined);
|
|
}
|
|
});
|
|
} else {
|
|
setIsVerified(false);
|
|
setLastYtSyncDate(undefined);
|
|
}
|
|
}, [channelClaimId]);
|
|
|
|
if (isVerified) {
|
|
const str =
|
|
includeSyncDate && lastYtSyncDate
|
|
? __('Official YouTube Creator - Last checked %time_ago%', { time_ago: DateTime.getTimeAgoStr(lastYtSyncDate) })
|
|
: __('Official YouTube Creator');
|
|
return (
|
|
<div className="media__uri--right--yt-badge">
|
|
<Icon icon={ICONS.VALIDATED} size={12} />
|
|
{str}
|
|
</div>
|
|
);
|
|
} else {
|
|
return null;
|
|
}
|
|
}
|