Consider rating settings in floating players

toshokanneko · toshokanneko · commit 5558f5c0d4b9 · 2026-03-07T17:33:59.000+01:00
diff --git a/ui/component/fileReactions/view.jsx b/ui/component/fileReactions/view.jsx
@@ -65,6 +65,7 @@ export default function FileReactions(props: Props) {
     <div
       className={classnames('ratio-wrapper', {
         'ratio-wrapper--disabled': scheduledState === 'scheduled',
+        'ratio-wrapper--no-slime': disableSlimes,
       })}
     >
       <LikeButton myReaction={myReaction} reactionCount={likeCount} onClick={() => doReactionLike(uri)} />
diff --git a/ui/component/shortsActions/index.js b/ui/component/shortsActions/index.js
@@ -15,7 +15,12 @@ import {
 } from 'redux/selectors/claims';
 import { selectIsSubscribedForUri } from 'redux/selectors/subscriptions';
 import { doChannelSubscribe, doChannelUnsubscribe } from 'redux/actions/subscriptions';
-import { DISABLE_SLIMES_VIDEO_TAG, DISABLE_SLIMES_ALL_TAG } from 'constants/tags';
+import {
+  DISABLE_SLIMES_VIDEO_TAG,
+  DISABLE_SLIMES_ALL_TAG,
+  DISABLE_REACTIONS_ALL_TAG,
+  DISABLE_REACTIONS_VIDEO_TAG,
+} from 'constants/tags';
 import { doOpenModal } from 'redux/actions/app';
 
 const select = (state, props) => {
@@ -36,6 +41,9 @@ const select = (state, props) => {
     disableSlimes:
       makeSelectTagInClaimOrChannelForUri(uri, DISABLE_SLIMES_ALL_TAG)(state) ||
       makeSelectTagInClaimOrChannelForUri(uri, DISABLE_SLIMES_VIDEO_TAG)(state),
+    disableReactions:
+      makeSelectTagInClaimOrChannelForUri(uri, DISABLE_REACTIONS_ALL_TAG)(state) ||
+      makeSelectTagInClaimOrChannelForUri(uri, DISABLE_REACTIONS_VIDEO_TAG)(state),
     isUnlisted: selectIsUriUnlisted(state, uri),
     webShareable: true,
     collectionId: props.collectionId,
diff --git a/ui/component/shortsActions/view.jsx b/ui/component/shortsActions/view.jsx
@@ -31,6 +31,7 @@ type Props = {
   isLivestreamClaim?: boolean,
   scheduledState: ClaimScheduledState,
   disableSlimes: boolean,
+  disableReactions: boolean,
   doFetchReactions: (claimId: ?string) => void,
   doReactionLike: (uri: string) => void,
   doReactionDislike: (uri: string) => void,
@@ -61,6 +62,7 @@ const ShortsActions = React.memo<Props>(
     isLivestreamClaim,
     scheduledState,
     disableSlimes,
+    disableReactions,
     doFetchReactions,
     doReactionLike,
     doReactionDislike,
@@ -177,11 +179,12 @@ const ShortsActions = React.memo<Props>(
             disabled={isAtEnd || !hasPlaylist}
           />
           <div
-            className="shorts-page__ratings"
+            className={classnames('shorts-page__ratings', { 'shorts-page__ratings--no-slime': disableSlimes })}
             style={{
+              ...(disableReactions ? { visibility: 'hidden', pointerEvents: 'none' } : {}),
               '--ratings-gradient': (() => {
                 if (!Number.isInteger(likeCount) || !Number.isInteger(dislikeCount)) return 'var(--color-border)';
-                const total = likeCount + dislikeCount;
+                const total = likeCount + (disableSlimes ? 0 : dislikeCount);
                 if (total === 0) return 'var(--color-border)';
                 const likePercent = (likeCount / total) * 100;
                 if (likePercent === 100) return 'var(--color-fire)';
@@ -241,7 +244,7 @@ const ShortsActions = React.memo<Props>(
                 />
               )}
             </div>
-            <div className="slime-and-count">
+            <div className="slime-and-count" style={disableSlimes ? { visibility: 'hidden' } : undefined}>
               <Button
                 requiresAuth
                 authSrc={'filereaction_dislike'}
diff --git a/ui/component/videoRenderFloating/internal/floatingReactions/index.js b/ui/component/videoRenderFloating/internal/floatingReactions/index.js
@@ -1,10 +1,23 @@
 import { connect } from 'react-redux';
 import { selectMyReactionForUri } from 'redux/selectors/reactions';
 import { doFetchReactions, doReactionLike, doReactionDislike } from 'redux/actions/reactions';
+import { makeSelectTagInClaimOrChannelForUri } from 'redux/selectors/claims';
+import {
+  DISABLE_SLIMES_VIDEO_TAG,
+  DISABLE_SLIMES_ALL_TAG,
+  DISABLE_REACTIONS_ALL_TAG,
+  DISABLE_REACTIONS_VIDEO_TAG,
+} from 'constants/tags';
 import FloatingReactions from './view';
 
 const select = (state, props) => ({
   myReaction: selectMyReactionForUri(state, props.uri),
+  disableSlimes:
+    makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_SLIMES_ALL_TAG)(state) ||
+    makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_SLIMES_VIDEO_TAG)(state),
+  disableReactions:
+    makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_REACTIONS_ALL_TAG)(state) ||
+    makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_REACTIONS_VIDEO_TAG)(state),
 });
 
 const perform = {
diff --git a/ui/component/videoRenderFloating/internal/floatingReactions/view.jsx b/ui/component/videoRenderFloating/internal/floatingReactions/view.jsx
@@ -9,6 +9,8 @@ type Props = {
   uri: string,
   claimId: ?string,
   myReaction: ?string,
+  disableSlimes: boolean,
+  disableReactions: boolean,
   doFetchReactions: (claimId: string) => void,
   doReactionLike: (uri: string) => void,
   doReactionDislike: (uri: string) => void,
@@ -18,6 +20,8 @@ const FloatingReactions = ({
   uri,
   claimId,
   myReaction,
+  disableSlimes,
+  disableReactions,
   doFetchReactions,
   doReactionLike,
   doReactionDislike,
@@ -40,6 +44,8 @@ const FloatingReactions = ({
   const isFireActive = effectiveReaction === REACTION_TYPES.LIKE;
   const isSlimeActive = effectiveReaction === REACTION_TYPES.DISLIKE;
 
+  if (disableReactions) return null;
+
   return (
     <div className="floating-player__reactions">
       <div className="floating-player__reaction">
@@ -80,39 +86,41 @@ const FloatingReactions = ({
         />
       </div>
 
-      <div className="floating-player__reaction">
-        <Button
-          onClick={() => {
-            setOptimisticReaction(isSlimeActive ? null : REACTION_TYPES.DISLIKE);
-            if (!isSlimeActive) {
-              setSlimeButtonGlow(false);
-              clearTimeout(slimeButtonGlowTimeout.current);
-              requestAnimationFrame(() => {
-                setSlimeButtonGlow(true);
-                slimeButtonGlowTimeout.current = setTimeout(() => setSlimeButtonGlow(false), 3000);
-              });
+      {!disableSlimes && (
+        <div className="floating-player__reaction">
+          <Button
+            onClick={() => {
+              setOptimisticReaction(isSlimeActive ? null : REACTION_TYPES.DISLIKE);
+              if (!isSlimeActive) {
+                setSlimeButtonGlow(false);
+                clearTimeout(slimeButtonGlowTimeout.current);
+                requestAnimationFrame(() => {
+                  setSlimeButtonGlow(true);
+                  slimeButtonGlowTimeout.current = setTimeout(() => setSlimeButtonGlow(false), 3000);
+                });
+              }
+              doReactionDislike(uri);
+            }}
+            icon={isSlimeActive ? ICONS.SLIME_ACTIVE : ICONS.SLIME}
+            iconSize={14}
+            requiresAuth
+            authSrc="filereaction_dislike"
+            className={classnames('button--file-action button-dislike', {
+              'button--slime': isSlimeActive,
+              'button--slime-glow-pulse': slimeButtonGlow,
+            })}
+            label={
+              isSlimeActive ? (
+                <>
+                  <div className="button__slime-stain" />
+                  <div className="button__slime-drop1" />
+                  <div className="button__slime-drop2" />
+                </>
+              ) : null
             }
-            doReactionDislike(uri);
-          }}
-          icon={isSlimeActive ? ICONS.SLIME_ACTIVE : ICONS.SLIME}
-          iconSize={14}
-          requiresAuth
-          authSrc="filereaction_dislike"
-          className={classnames('button--file-action button-dislike', {
-            'button--slime': isSlimeActive,
-            'button--slime-glow-pulse': slimeButtonGlow,
-          })}
-          label={
-            isSlimeActive ? (
-              <>
-                <div className="button__slime-stain" />
-                <div className="button__slime-drop1" />
-                <div className="button__slime-drop2" />
-              </>
-            ) : null
-          }
-        />
-      </div>
+          />
+        </div>
+      )}
     </div>
   );
 };
diff --git a/ui/component/videoRenderFloating/internal/floatingShortsActions/index.js b/ui/component/videoRenderFloating/internal/floatingShortsActions/index.js
@@ -6,8 +6,14 @@ import { toggleAutoplayNextShort } from 'redux/actions/settings';
 import { doSetShortsSidePanel } from 'redux/actions/shorts';
 import { selectIsSubscribedForUri } from 'redux/selectors/subscriptions';
 import { doChannelSubscribe, doChannelUnsubscribe } from 'redux/actions/subscriptions';
-import { selectPermanentUrlForUri } from 'redux/selectors/claims';
+import { selectPermanentUrlForUri, makeSelectTagInClaimOrChannelForUri } from 'redux/selectors/claims';
 import * as SETTINGS from 'constants/settings';
+import {
+  DISABLE_SLIMES_VIDEO_TAG,
+  DISABLE_SLIMES_ALL_TAG,
+  DISABLE_REACTIONS_ALL_TAG,
+  DISABLE_REACTIONS_VIDEO_TAG,
+} from 'constants/tags';
 import FloatingShortsActions from './view';
 
 const select = (state, props) => ({
@@ -17,6 +23,12 @@ const select = (state, props) => ({
   autoPlayNextShort: selectClientSetting(state, SETTINGS.AUTOPLAY_NEXT_SHORTS),
   isSubscribed: props.channelUrl ? selectIsSubscribedForUri(state, props.channelUrl) : false,
   channelPermanentUrl: props.channelUrl ? selectPermanentUrlForUri(state, props.channelUrl) : undefined,
+  disableSlimes:
+    makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_SLIMES_ALL_TAG)(state) ||
+    makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_SLIMES_VIDEO_TAG)(state),
+  disableReactions:
+    makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_REACTIONS_ALL_TAG)(state) ||
+    makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_REACTIONS_VIDEO_TAG)(state),
 });
 
 const perform = {
diff --git a/ui/component/videoRenderFloating/internal/floatingShortsActions/view.jsx b/ui/component/videoRenderFloating/internal/floatingShortsActions/view.jsx
@@ -30,6 +30,8 @@ type Props = {
   doChannelUnsubscribe: (sub: {}) => void,
   onFireGlow?: () => void,
   onSlimeEffect?: () => void,
+  disableSlimes: boolean,
+  disableReactions: boolean,
 };
 
 const FloatingShortsActions = ({
@@ -54,6 +56,8 @@ const FloatingShortsActions = ({
   doChannelUnsubscribe,
   onFireGlow,
   onSlimeEffect,
+  disableSlimes,
+  disableReactions,
 }: Props) => {
   const [optimisticReaction, setOptimisticReaction] = React.useState(undefined);
   const [fireButtonGlow, setFireButtonGlow] = React.useState(false);
@@ -93,7 +97,10 @@ const FloatingShortsActions = ({
       </div>
 
       <div className="content__shorts-floating-actions">
-        <div className="shorts-floating-action">
+        <div
+          className="shorts-floating-action"
+          style={disableReactions ? { visibility: 'hidden', pointerEvents: 'none' } : undefined}
+        >
           <Button
             onClick={() => {
               setOptimisticReaction(isFireActive ? null : REACTION_TYPES.LIKE);
@@ -135,7 +142,10 @@ const FloatingShortsActions = ({
           )}
         </div>
 
-        <div className="shorts-floating-action">
+        <div
+          className="shorts-floating-action"
+          style={disableReactions || disableSlimes ? { visibility: 'hidden', pointerEvents: 'none' } : undefined}
+        >
           <Button
             onClick={() => {
               setOptimisticReaction(isSlimeActive ? null : REACTION_TYPES.DISLIKE);
diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss
@@ -267,6 +267,12 @@
     pointer-events: none;
   }
 
+  .ratio-wrapper--no-slime {
+    max-width: unset;
+    min-width: unset;
+    width: auto;
+  }
+
   .icon--DollarSign {
     stroke-width: 1.5;
     transform: scale(0.8);
diff --git a/ui/scss/component/_shorts.scss b/ui/scss/component/_shorts.scss
@@ -710,6 +710,13 @@ body:has(.main--shorts-page):not(:has(.navigation__overlay--active)) {
       mask-composite: exclude;
       pointer-events: none;
     }
+
+    &--no-slime {
+      &::before {
+        bottom: auto;
+        height: calc(50% + 6px);
+      }
+    }
   }
 
   .shorts-floating-action__avatar.channel-thumbnail {

Original file line number	Diff line number	Diff line change
`@@ -65,6 +65,7 @@ export default function FileReactions(props: Props) {`
`65`	`65`	`<div`
`66`	`66`	`className={classnames('ratio-wrapper', {`
`67`	`67`	`'ratio-wrapper--disabled': scheduledState === 'scheduled',`
	`68`	`+ 'ratio-wrapper--no-slime': disableSlimes,`
`68`	`69`	`})}`
`69`	`70`	`>`
`70`	`71`	`<LikeButton myReaction={myReaction} reactionCount={likeCount} onClick={() => doReactionLike(uri)} />`
Original file line number	Diff line number	Diff line change
`@@ -710,6 +710,13 @@ body:has(.main--shorts-page):not(:has(.navigation__overlay--active)) {`
`710`	`710`	`mask-composite: exclude;`
`711`	`711`	`pointer-events: none;`
`712`	`712`	`}`
	`713`	`+`
	`714`	`+ &--no-slime {`
	`715`	`+ &::before {`
	`716`	`+ bottom: auto;`
	`717`	`+ height: calc(50% + 6px);`
	`718`	`+ }`
	`719`	`+ }`
`713`	`720`	`}`
`714`	`721`
`715`	`722`	`.shorts-floating-action__avatar.channel-thumbnail {`