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

feat: remove unused component & fix spacing

Browse source
This commit is contained in:
higorgoulart 2025-11-07 17:57:06 -03:00
parent 3b2d1f365c
commit ff08e377fc
8 changed files with 38 additions and 87 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
src/components/DiscItem/DiscItem.js
View file

@ -1,71 +0,0 @@
// Copyright (C) 2017-2023 Smart code 203358507
const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const MetaItem = require('stremio/components/MetaItem');
const { t } = require('i18next');
const DiscItem = ({ id, watched, selected, toggleWatched, ...props }) => {
const options = React.useMemo(() => {
return [
{ label: watched ? 'CTX_MARK_UNWATCHED' : 'CTX_MARK_WATCHED', value: 'watched' },
].filter(({ value }) => {
switch (value) {
case 'watched':
return props.deepLinks && (typeof props.deepLinks.metaDetailsVideos === 'string' || typeof props.deepLinks.metaDetailsStreams === 'string');
}
}).map((option) => ({
...option,
label: t(option.label)
}));
}, [id, props.deepLinks, watched]);
const optionOnSelect = React.useCallback((event) => {
if (typeof props.optionOnSelect === 'function') {
props.optionOnSelect(event);
}
if (!event.nativeEvent.optionSelectPrevented) {
switch (event.value) {
case 'watched': {
if (typeof id === 'string') {
if (typeof toggleWatched === 'function') {
toggleWatched();
}
}
break;
}
}
}
}, [id, props.deepLinks, props.optionOnSelect]);
return (
<MetaItem
{...props}
watched={watched}
playname={selected}
className={classnames({ 'selected': selected })}
options={options}
optionOnSelect={optionOnSelect}
/>
);
};
DiscItem.propTypes = {
id: PropTypes.string,
removable: PropTypes.bool,
watched: PropTypes.bool,
selected: PropTypes.bool,
deepLinks: PropTypes.shape({
metaDetailsVideos: PropTypes.string,
metaDetailsStreams: PropTypes.string,
player: PropTypes.string
}),
toggleWatched: PropTypes.func,
optionOnSelect: PropTypes.func
};
module.exports = DiscItem;

5
src/components/DiscItem/index.js
View file

@ -1,5 +0,0 @@
// Copyright (C) 2017-2023 Smart code 203358507
const DiscItem = require('./DiscItem');
module.exports = DiscItem;

2
src/components/IconsGroup/IconsGroup.less
View file

@ -17,8 +17,6 @@
border-radius: 2rem;
height: @height;
width: fit-content;
margin-bottom: 1rem;
margin-right: 1rem;
.icon-container {
display: flex;

3
src/components/IconsGroup/IconsGroup.tsx
View file

@ -4,9 +4,11 @@ import classNames from 'classnames';
import React from 'react';
import Icon from '@stremio/stremio-icons/react';
import styles from './IconsGroup.less';
import { Tooltip } from 'stremio/common/Tooltips';
type GroupItem = {
icon: string;
label?: string;
filled?: string;
disabled?: boolean;
className?: string;
@ -26,6 +28,7 @@ const IconsGroup = ({ items, className }: Props) => {
className={classNames(styles['icon-container'], item.className, { [styles['disabled']]: item.disabled })}
onClick={item.onClick}
>
{item.label && <Tooltip label={item.label} position={'top'} />}
<Icon name={item.icon} className={styles['icon']} />
</div>
))}

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

@ -102,10 +102,12 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
const libAndWatchedGroup = React.useMemo(() => [
{
icon: inLibrary ? 'remove-from-library' : 'add-to-library',
label: inLibrary ? t('REMOVE_FROM_LIB') : t('ADD_TO_LIB'),
onClick: typeof toggleInLibrary === 'function' ? toggleInLibrary : null,
},
{
icon: watched ? 'eye-off' : 'eye',
label: watched ? t('CTX_MARK_UNWATCHED') : t('CTX_MARK_WATCHED'),
onClick: typeof toggleWatched === 'function' ? toggleWatched : undefined,
},
], [inLibrary, watched, toggleInLibrary, toggleWatched]);
@ -221,7 +223,7 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
}
{
typeof toggleInLibrary === 'function' && typeof toggleWatched === 'function'
? <IconsGroup items={libAndWatchedGroup} />
? <IconsGroup items={libAndWatchedGroup} className={styles['group-container']} />
: null
}
{
@ -238,7 +240,7 @@ const MetaPreview = React.forwardRef(({ className, compact, name, logo, backgrou
}
{
!compact && ratingInfo !== null
? <Ratings ratingInfo={ratingInfo} />
? <Ratings ratingInfo={ratingInfo} className={styles['group-container']} />
: null
}
{

18
src/components/MetaPreview/styles.less
View file

@ -32,7 +32,7 @@
.action-buttons-container {
justify-content: space-between;
.action-button:not(:last-child) {
.action-button:not(:last-child), .group-container:not(:last-child) {
margin-right: 0;
}
}
@ -207,6 +207,20 @@
}
}
}
.group-container {
margin-bottom: 1rem;
&:global(.wide) {
width: auto;
padding: 0 2rem;
border-radius: 4rem;
}
&:not(:last-child) {
margin-right: 1rem;
}
}
}
}
@ -228,7 +242,7 @@
padding-top: 1.5rem;
gap: 0.5rem;
.action-button {
.action-button, .group-container {
padding: 0 1.5rem !important;
margin-right: 0rem !important;
height: 3rem;

2
src/components/index.ts
View file

@ -11,7 +11,6 @@ import EventModal from './EventModal';
import HorizontalScroll from './HorizontalScroll';
import Image from './Image';
import LibItem from './LibItem';
import DiscItem from './DiscItem';
import MainNavBars from './MainNavBars';
import MetaItem from './MetaItem';
import MetaPreview from './MetaPreview';
@ -46,7 +45,6 @@ export {
HorizontalScroll,
Image,
LibItem,
DiscItem,
MainNavBars,
MetaItem,
MetaPreview,

18
src/routes/Discover/Discover.js
View file

@ -7,7 +7,7 @@ const classnames = require('classnames');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { useServices } = require('stremio/services');
const { CONSTANTS, useBinaryState, useOnScrollToBottom, withCoreSuspender } = require('stremio/common');
const { AddonDetailsModal, Button, DelayedRenderer, Image, MainNavBars, DiscItem, MetaPreview, ModalDialog, MultiselectMenu } = require('stremio/components');
const { AddonDetailsModal, Button, DelayedRenderer, Image, MainNavBars, MetaItem, MetaPreview, ModalDialog, MultiselectMenu } = require('stremio/components');
const useDiscover = require('./useDiscover');
const useSelectableInputs = require('./useSelectableInputs');
const styles = require('./styles');
@ -183,8 +183,20 @@ const Discover = ({ urlParams, queryParams }) => {
</div>
:
<div ref={metasContainerRef} className={classnames(styles['meta-items-container'], 'animation-fade-in')} onScroll={onScroll} onFocusCapture={metaItemsOnFocusCapture}>
{discover.catalog.content.content.map((discItem, index) => (
<DiscItem {...discItem} toggleWatched={() => toggleWatched(discItem)} selected={selectedMetaItemIndex === index} key={index} data-index={index} onClick={metaItemOnClick} />
{discover.catalog.content.content.map((metaItem, index) => (
<MetaItem
key={index}
className={classnames({ 'selected': selectedMetaItemIndex === index })}
type={metaItem.type}
name={metaItem.name}
poster={metaItem.poster}
posterShape={metaItem.posterShape}
playname={selectedMetaItemIndex === index}
deepLinks={metaItem.deepLinks}
watched={metaItem.watched}
data-index={index}
onClick={metaItemOnClick}
/>
))}
</div>
}