Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-10 11:20:49 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat: add styled tooltips to trailer and rating actions

Browse source
This commit is contained in:
FrigoDev 2026-04-23 02:08:30 -05:00
parent c0be44af1e
commit 204d9afc8f
3 changed files with 11 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/MetaPreview/ActionButton/ActionButton.js
View file

@ -8,9 +8,9 @@ const { Button } = require('stremio/components');
const styles = require('./styles');
const { Tooltip } = require('stremio/common/Tooltips');
const ActionButton = ({ className, icon, label, tooltip, ...props }) => {
const ActionButton = ({ className, icon, label, tooltip, showLabel, ...props }) => {
return (
<Button title={tooltip ? '' : label} {...props} className={classnames(className, styles['action-button-container'], { 'wide': typeof label === 'string' && !tooltip })}>
<Button title={tooltip ? undefined : label} {...props} className={classnames(className, styles['action-button-container'], { 'wide': typeof label === 'string' && (!tooltip || showLabel) })}>
{
tooltip === true ?
<Tooltip label={label} position={'top'} />
@ -26,7 +26,7 @@ const ActionButton = ({ className, icon, label, tooltip, ...props }) => {
null
}
{
!tooltip && typeof label === 'string' && label.length > 0 ?
(!tooltip || showLabel) && typeof label === 'string' && label.length > 0 ?
<div className={styles['label-container']}>
<div className={styles['label']}>{label}</div>
</div>
@ -41,7 +41,8 @@ ActionButton.propTypes = {
className: PropTypes.string,
icon: PropTypes.string,
label: PropTypes.string,
tooltip: PropTypes.bool
tooltip: PropTypes.bool,
showLabel: PropTypes.bool
};
module.exports = ActionButton;

3
src/components/MetaPreview/MetaPreview.js
View file

@ -216,7 +216,8 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
label={t('TRAILER')}
tabIndex={compact ? -1 : 0}
href={trailerHref}
tooltip={compact}
tooltip={true}
showLabel={true}
/>
:
null

4
src/components/MetaPreview/Ratings/Ratings.tsx
View file

@ -1,6 +1,7 @@
// Copyright (C) 2017-2025 Smart code 203358507
import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import useRating from './useRating';
import { ActionsGroup } from 'stremio/components';
@ -11,17 +12,20 @@ type Props = {
};
const Ratings = ({ ratingInfo, className }: Props) => {
const { t } = useTranslation();
const { onLiked, onLoved, liked, loved } = useRating(ratingInfo);
const disabled = useMemo(() => ratingInfo?.type !== 'Ready', [ratingInfo]);
const items = useMemo(() => [
{
icon: liked ? 'thumbs-up' : 'thumbs-up-outline',
label: liked ? t('RATING_UNLIKE') : t('RATING_LIKE'),
disabled,
onClick: onLiked,
},
{
icon: loved ? 'heart' : 'heart-outline',
label: loved ? t('RATING_UNLOVE') : t('RATING_LOVE'),
disabled,
onClick: onLoved,
},