diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx index 2822dfe2b..2491d7218 100644 --- a/ui/component/claimPreview/view.jsx +++ b/ui/component/claimPreview/view.jsx @@ -35,6 +35,7 @@ const AbandonedChannelPreview = lazyImport(() => import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */) ); +// preview images used on the landing page and on the channel page type Props = { uri: string, claim: ?Claim, diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx index df4140d4f..00539dfb2 100644 --- a/ui/component/claimPreviewTile/view.jsx +++ b/ui/component/claimPreviewTile/view.jsx @@ -53,6 +53,7 @@ type Props = { isLivestream: boolean, }; +// preview image cards used in related video functionality function ClaimPreviewTile(props: Props) { const { history, diff --git a/ui/component/fileWatchLaterLink/view.jsx b/ui/component/fileWatchLaterLink/view.jsx index e49e9754b..50884f80d 100644 --- a/ui/component/fileWatchLaterLink/view.jsx +++ b/ui/component/fileWatchLaterLink/view.jsx @@ -17,10 +17,7 @@ type Props = { function FileWatchLaterLink(props: Props) { const { claim, hasClaimInWatchLater, doToast, doCollectionEdit, focusable = true } = props; const buttonRef = useRef(); - console.log('ref'); - console.log(buttonRef); let isHovering = useHover(buttonRef); - console.log(isHovering); if (!claim) { return null; @@ -40,7 +37,10 @@ function FileWatchLaterLink(props: Props) { }); } + // text that will show if you keep cursor over dic const title = hasClaimInWatchLater ? __('Remove from Watch Later') : __('Add to Watch Later'); + + // label that is shown after hover const label = !hasClaimInWatchLater ? __('Add') : __('Added'); return ( diff --git a/ui/effects/use-hover.js b/ui/effects/use-hover.js index 9f3f5ed9c..d153556b6 100644 --- a/ui/effects/use-hover.js +++ b/ui/effects/use-hover.js @@ -9,17 +9,12 @@ export default function useHover(ref) { useEffect(() => { const refElement = ref.current; if (refElement) { - // refElement.addEventListener('mouseenter', hoverFunc); - // refElement.addEventListener('mouseleave', unHoverFunc); - // refElement.addEventListener('touchstart', hoverFunc); - // refElement.addEventListener('touchmove', unHoverFunc); - + refElement.addEventListener('mouseenter', hoverFunc); + refElement.addEventListener('mouseleave', unHoverFunc); return () => { - // refElement.removeEventListener('mouseenter', hoverFunc); - // refElement.removeEventListener('mouseleave', unHoverFunc); - // refElement.removeEventListener('touchstart', hoverFunc); - // refElement.removeEventListener('touchmove', unHoverFunc); + refElement.removeEventListener('mouseenter', hoverFunc); + refElement.removeEventListener('mouseleave', unHoverFunc); }; } }, [ref, isHovering]); diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index dc963bd6b..0118834fe 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -130,6 +130,7 @@ @include handleChannelGif(6rem); } + // show watch later button and duration divs when hovered &:hover { .claim-preview__hover-actions { display: block; @@ -645,6 +646,7 @@ overflow: hidden; } +// show duration and watch later button when hovered .claim-preview--tile { &:hover { .claim-preview__hover-actions { @@ -672,6 +674,7 @@ margin-bottom: 0; } +// div that displays watch later button .claim-preview__hover-actions { display: none; position: relative; @@ -703,6 +706,7 @@ display: none; } + // show the additional watch later text (Add) when hovered &:hover { .button__label { display: inline;