feat(FEC-9951): pip play here (#526)

As play here button in the PIP overlay was hidden under the play / pause overlay buttons when in small screens / mobile - We decided (together with Ron L and Hillel C) to remove the "Play here" button and relocate the title in the first quarter of the player instead of the center. In addition, to make the UX more clear - the PIP button in the bottom bar has now a new state to expand back.
kaltura · Jul 26, 2020 · af58754 · af58754
1 parent d0f815d
commit af58754
Show file tree

Hide file tree

Showing 19 changed files with 68 additions and 55 deletions.
diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js
@@ -43,7 +43,8 @@ const IconType = {
   CastBrand: 'cast-brand',
   Next: 'next',
   Prev: 'prev',
-  PictureInPicture: 'picture-in-picture'
+  PictureInPictureStart: 'picture-in-picture-start',
+  PictureInPictureStop: 'picture-in-picture-stop'
 };
 
 /**
@@ -183,8 +184,11 @@ class Icon extends Component {
       case IconType.Prev:
         return <i className={[style.icon, style.iconPrev].join(' ')} />;
 
-      case IconType.PictureInPicture:
-        return <i className={[style.icon, style.iconPictureInPicture].join(' ')} />;
+      case IconType.PictureInPictureStart:
+        return <i className={[style.icon, style.iconPictureInPictureStart].join(' ')} />;
+
+      case IconType.PictureInPictureStop:
+        return <i className={[style.icon, style.iconPictureInPictureStop].join(' ')} />;
 
       default:
         break;

diff --git a/src/components/icon/icon.scss b/src/components/icon/icon.scss
@@ -98,7 +98,7 @@
     rewind10:
       '<path fill="#{$color}" d="M258.471 323.053c94.182-126.513 270.298-165.203 410.222-84.418 150.758 87.040 202.411 279.813 115.371 430.571s-279.813 202.411-430.571 115.371c-61.424-35.463-107.948-89.4-134.169-153.673-7.677-18.818-29.156-27.85-47.974-20.173s-27.85 29.156-20.173 47.974c32.339 79.269 89.818 145.906 165.517 189.611 185.96 107.364 423.747 43.649 531.111-142.311s43.649-423.747-142.311-531.111c-172.433-99.554-389.428-52.014-505.682 103.69l-27.226-78.49c-6.66-19.202-27.626-29.368-46.828-22.708s-29.368 27.626-22.708 46.828l52.434 151.164c5.36 15.452 20.275 25.513 36.61 24.694l159.799-8.011c20.299-1.018 35.929-18.298 34.911-38.596s-18.298-35.929-38.596-34.911l-89.738 4.499z"></path><path fill="#{$color}" d="M413.327 636.083h67.358v-252.083h-48.527c-2.173 7.358-4.949 13.589-8.329 18.693s-7.726 9.139-13.037 12.106c-5.311 2.967-11.709 5.103-19.193 6.409s-16.417 1.958-26.798 1.958v41.302h48.527v171.616zM596.807 554.192c0 17.803 1.569 29.849 4.708 36.139s8.208 9.435 15.21 9.435c7.001 0 12.071-3.145 15.21-9.435s4.708-18.336 4.708-36.139v-83.316c0-17.803-1.569-29.849-4.708-36.139s-8.208-9.435-15.21-9.435c-7.001 0-12.071 3.145-15.21 9.435s-4.708 18.336-4.708 36.139v83.316zM529.449 512.534c0-25.398 1.75-46.405 5.251-63.021s8.812-29.789 15.934-39.522c7.122-9.732 16.176-16.497 27.16-20.295s23.962-5.697 38.93-5.697c14.969 0 27.945 1.899 38.93 5.697s20.038 10.563 27.16 20.295c7.122 9.732 12.433 22.906 15.934 39.522s5.251 37.622 5.251 63.021c0 25.636-1.75 46.702-5.251 63.199s-8.812 29.552-15.934 39.166c-7.122 9.613-16.176 16.2-27.16 19.761s-23.962 5.341-38.93 5.341c-14.969 0-27.945-1.78-38.93-5.341s-20.038-10.147-27.16-19.761c-7.122-9.613-12.433-22.668-15.934-39.166s-5.251-37.563-5.251-63.199z"></path>',
     forward:
-    '<path fill="#{$color}" opacity="0.5" d="M765.529 323.053c-94.182-126.513-270.298-165.203-410.222-84.418-150.758 87.040-202.411 279.813-115.371 430.571s279.813 202.411 430.571 115.371c61.424-35.463 107.948-89.4 134.169-153.673 7.677-18.818 29.156-27.85 47.974-20.173s27.85 29.156 20.173 47.974c-32.339 79.269-89.818 145.906-165.517 189.611-185.96 107.364-423.747 43.649-531.111-142.311s-43.649-423.747 142.311-531.111c172.433-99.554 389.428-52.014 505.682 103.69l27.226-78.49c6.66-19.202 27.626-29.368 46.828-22.708s29.368 27.626 22.708 46.828l-52.434 151.164c-5.36 15.452-20.275 25.513-36.61 24.694l-159.799-8.011c-20.299-1.018-35.929-18.298-34.911-38.596s18.298-35.929 38.596-34.911l89.738 4.499z"></path><path fill="#{$color}" d="M207.932 431.974c20.553-78.699 71.369-149.456 147.375-193.338 139.923-80.785 316.040-42.095 410.222 84.418l-89.738-4.499c-20.299-1.018-37.579 14.613-38.596 34.911s14.613 37.579 34.911 38.596l159.799 8.011c16.335 0.819 31.25-9.242 36.61-24.694l52.434-151.164c6.66-19.202-3.506-40.167-22.708-46.828s-40.167 3.506-46.828 22.708l-27.226 78.49c-116.254-155.703-333.248-203.244-505.682-103.69-91.184 52.645-152.976 136.648-179.618 230.523l69.044 26.555z"></path>',
+      '<path fill="#{$color}" opacity="0.5" d="M765.529 323.053c-94.182-126.513-270.298-165.203-410.222-84.418-150.758 87.040-202.411 279.813-115.371 430.571s279.813 202.411 430.571 115.371c61.424-35.463 107.948-89.4 134.169-153.673 7.677-18.818 29.156-27.85 47.974-20.173s27.85 29.156 20.173 47.974c-32.339 79.269-89.818 145.906-165.517 189.611-185.96 107.364-423.747 43.649-531.111-142.311s-43.649-423.747 142.311-531.111c172.433-99.554 389.428-52.014 505.682 103.69l27.226-78.49c6.66-19.202 27.626-29.368 46.828-22.708s29.368 27.626 22.708 46.828l-52.434 151.164c-5.36 15.452-20.275 25.513-36.61 24.694l-159.799-8.011c-20.299-1.018-35.929-18.298-34.911-38.596s18.298-35.929 38.596-34.911l89.738 4.499z"></path><path fill="#{$color}" d="M207.932 431.974c20.553-78.699 71.369-149.456 147.375-193.338 139.923-80.785 316.040-42.095 410.222 84.418l-89.738-4.499c-20.299-1.018-37.579 14.613-38.596 34.911s14.613 37.579 34.911 38.596l159.799 8.011c16.335 0.819 31.25-9.242 36.61-24.694l52.434-151.164c6.66-19.202-3.506-40.167-22.708-46.828s-40.167 3.506-46.828 22.708l-27.226 78.49c-116.254-155.703-333.248-203.244-505.682-103.69-91.184 52.645-152.976 136.648-179.618 230.523l69.044 26.555z"></path>',
     forward10:
       '<path fill="#{$color}" d="M765.529 323.053c-94.182-126.513-270.298-165.203-410.222-84.418-150.758 87.040-202.411 279.813-115.371 430.571s279.813 202.411 430.571 115.371c61.424-35.463 107.948-89.4 134.169-153.673 7.677-18.818 29.156-27.85 47.974-20.173s27.85 29.156 20.173 47.974c-32.339 79.269-89.818 145.906-165.517 189.611-185.96 107.364-423.747 43.649-531.111-142.311s-43.649-423.747 142.311-531.111c172.433-99.554 389.428-52.014 505.682 103.69l27.226-78.49c6.66-19.202 27.626-29.368 46.828-22.708s29.368 27.626 22.708 46.828l-52.434 151.164c-5.36 15.452-20.275 25.513-36.61 24.694l-159.799-8.011c-20.299-1.018-35.929-18.298-34.911-38.596s18.298-35.929 38.596-34.911l89.738 4.499z"></path><path fill="#{$color}" d="M365.327 636.083h67.358v-252.083h-48.527c-2.173 7.358-4.949 13.589-8.329 18.693s-7.726 9.139-13.037 12.106c-5.311 2.967-11.709 5.103-19.193 6.409s-16.417 1.958-26.798 1.958v41.302h48.527v171.616zM548.807 554.192c0 17.803 1.569 29.849 4.708 36.139s8.208 9.435 15.21 9.435c7.001 0 12.071-3.145 15.21-9.435s4.708-18.336 4.708-36.139v-83.316c0-17.803-1.569-29.849-4.708-36.139s-8.208-9.435-15.21-9.435c-7.001 0-12.071 3.145-15.21 9.435s-4.708 18.336-4.708 36.139v83.316zM481.449 512.534c0-25.398 1.75-46.405 5.251-63.021s8.812-29.789 15.934-39.522c7.122-9.732 16.176-16.497 27.16-20.295s23.962-5.697 38.93-5.697c14.969 0 27.945 1.899 38.93 5.697s20.038 10.563 27.16 20.295c7.122 9.732 12.433 22.906 15.934 39.522s5.251 37.622 5.251 63.021c0 25.636-1.75 46.702-5.251 63.199s-8.812 29.552-15.934 39.166c-7.122 9.613-16.176 16.2-27.16 19.761s-23.962 5.341-38.93 5.341c-14.969 0-27.945-1.78-38.93-5.341s-20.038-10.147-27.16-19.761c-7.122-9.613-12.433-22.668-15.934-39.166s-5.251-37.563-5.251-63.199z"></path>',
     vrStereo:
@@ -111,9 +111,11 @@
       '<path fill="#{$color}" d="M640 549.333l-264.982 154.573c-30.386 17.725-55.018 3.388-55.018-32.094v-319.625c0-35.45 24.605-49.835 55.018-32.094l264.982 154.573v-154.448c0-17.794 14.204-32.219 32-32.219 17.673 0 32 14.398 32 32.219v383.562c0 17.794-14.204 32.219-32 32.219-17.673 0-32-14.398-32-32.219v-154.448z"></path>',
     prev:
       '<path fill="#{$color}" d="M384 549.333l264.982 154.573c30.386 17.725 55.018 3.388 55.018-32.094v-319.625c0-35.45-24.605-49.835-55.018-32.094l-264.982 154.573v-154.448c0-17.794-14.204-32.219-32-32.219-17.673 0-32 14.398-32 32.219v383.562c0 17.794 14.204 32.219 32 32.219 17.673 0 32-14.398 32-32.219v-154.448z"></path>',
-    pictureInPicture:
-      '<path fill="#{$color}" d="M224 256c-17.673 0-32 14.327-32 32v448c0 17.673 14.327 32 32 32h576c17.673 0 32-14.327 32-32v-448c0-17.673-14.327-32-32-32h-576zM224 192h576c53.019 0 96 42.981 96 96v448c0 53.019-42.981 96-96 96h-576c-53.019 0-96-42.981-96-96v-448c0-53.019 42.981-96 96-96z"></path><path fill="#{$color}" d="M544 512h192c17.673 0 32 14.327 32 32v128c0 17.673-14.327 32-32 32h-192c-17.673 0-32-14.327-32-32v-128c0-17.673 14.327-32 32-32z"></path>'
-);
+    pictureInPictureStart:
+      '<path fill="#{$color}" d="M224 256c-17.673 0-32 14.327-32 32v448c0 17.673 14.327 32 32 32h576c17.673 0 32-14.327 32-32v-448c0-17.673-14.327-32-32-32h-576zM224 192h576c53.019 0 96 42.981 96 96v448c0 53.019-42.981 96-96 96h-576c-53.019 0-96-42.981-96-96v-448c0-53.019 42.981-96 96-96z"></path><path fill="#{$color}" d="M544 512h192c17.673 0 32 14.327 32 32v128c0 17.673-14.327 32-32 32h-192c-17.673 0-32-14.327-32-32v-128c0-17.673 14.327-32 32-32z"></path>',
+    pictureInPictureStop:
+      '<path fill="#{$color}" d="M800 192c51.126 0 92.917 39.965 95.837 90.359l0.163 5.641v448c0 51.126-39.965 92.917-90.359 95.837l-5.641 0.163h-576c-51.126 0-92.917-39.965-95.837-90.359l-0.163-5.641v-64c0-17.673 14.327-32 32-32 16.411 0 29.936 12.353 31.785 28.268l0.215 3.732v64c0 16.411 12.353 29.936 28.268 31.785l3.732 0.215h576c16.411 0 29.936-12.353 31.785-28.268l0.215-3.732v-448c0-16.411-12.353-29.936-28.268-31.785l-3.732-0.215h-192c-17.673 0-32-14.327-32-32 0-16.411 12.353-29.936 28.268-31.785l3.732-0.215h192z"></path><path fill="#{$color}" d="M416 192c17.673 0 32 14.327 32 32 0 16.411-12.353 29.936-28.268 31.785l-3.732 0.215-178.752-0.032 202.711 202.736c12.497 12.497 12.497 32.758 0 45.255-11.535 11.535-29.687 12.423-42.24 2.662l-3.015-2.662-202.704-202.679v178.72c0 16.411-12.353 29.936-28.268 31.785l-3.732 0.215c-16.411 0-29.936-12.353-31.785-28.268l-0.215-3.732v-256l0.005-0.588c0.014-0.757 0.054-1.514 0.122-2.268l-0.127 2.856c0-1.62 0.12-3.212 0.353-4.767 0.083-0.544 0.182-1.101 0.295-1.656 0.141-0.705 0.307-1.399 0.495-2.084 0.14-0.5 0.288-0.992 0.449-1.482 0.204-0.629 0.434-1.262 0.684-1.885 0.227-0.568 0.466-1.121 0.722-1.669 0.311-0.661 0.644-1.314 0.998-1.954 0.212-0.388 0.439-0.779 0.676-1.166 0.503-0.818 1.040-1.614 1.61-2.382 0.174-0.238 0.351-0.47 0.532-0.7 1.588-2.021 3.42-3.854 5.45-5.446l-2.891 2.563c1.133-1.133 2.329-2.163 3.578-3.090 0.774-0.571 1.569-1.108 2.389-1.609 0.386-0.239 0.777-0.466 1.171-0.685 0.633-0.348 1.285-0.681 1.951-0.993 0.544-0.255 1.098-0.495 1.656-0.718 0.632-0.253 1.265-0.483 1.907-0.694 0.476-0.154 0.969-0.302 1.464-0.438 0.69-0.192 1.384-0.359 2.086-0.502 0.557-0.111 1.115-0.209 1.674-0.293 0.327-0.051 0.672-0.097 1.019-0.137l0.876-0.088c0.755-0.067 1.511-0.108 2.268-0.122l0.588-0.005h256z"></path>'
+  );
   $icon: map-get($icons, $icon-name);
   $svg-encoded-icon: svg-url($icon);
   @return $svg-encoded-icon;
@@ -271,21 +273,25 @@
 }
 
 .icon-chromecast {
-  background-image: icon(chromecast, '#fff')
+  background-image: icon(chromecast, '#fff');
 }
 
 .icon-chromecast-brand {
-  background-image: icon(chromecast, $brand-color)
+  background-image: icon(chromecast, $brand-color);
 }
 
 .icon-next {
-  background-image: icon(next, '#fff')
+  background-image: icon(next, '#fff');
 }
 
 .icon-prev {
-  background-image: icon(prev, '#fff')
+  background-image: icon(prev, '#fff');
+}
+
+.icon-picture-in-picture-start {
+  background-image: icon(pictureInPictureStart, '#fff');
 }
 
-.icon-picture-in-picture {
-  background-image: icon(pictureInPicture, '#fff')
+.icon-picture-in-picture-stop {
+  background-image: icon(pictureInPictureStop, '#fff');
 }
diff --git a/src/components/picture-in-picture-overlay/_picture-in-picture-overlay.scss b/src/components/picture-in-picture-overlay/_picture-in-picture-overlay.scss
@@ -1,6 +1,6 @@
 @import '~styles/variables';
 
-.picture-in-picture-overlay{
+.picture-in-picture-overlay {
   position: absolute;
   top: 0;
   left: 0;
@@ -33,6 +33,16 @@
     position: absolute;
     display: flex;
     flex-direction: column;
+    height: 100%;
+  }
+
+  .picture-in-picture-control::after {
+    content: '';
+    flex: 3;
+  }
+  .picture-in-picture-control::before {
+    content: '';
+    flex: 1;
   }
 
   .picture-in-picture-text {
@@ -55,7 +65,7 @@
     cursor: pointer;
     margin-top: 20px;
     align-self: center;
-    &:hover{
+    &:hover {
       background-color: $grayscale2;
     }
   }

diff --git a/src/components/picture-in-picture-overlay/picture-in-picture-overlay.js b/src/components/picture-in-picture-overlay/picture-in-picture-overlay.js
@@ -5,7 +5,6 @@ import {connect} from 'react-redux';
 import {Localizer, Text} from 'preact-i18n';
 import {withPlayer} from '../player';
 import {withLogger} from 'components/logger';
-import {Button} from 'components/button';
 /**
  * mapping state to props
  * @param {*} state - redux store state
@@ -73,11 +72,6 @@ class PictureInPictureOverlay extends Component {
                 <Text id="pictureInPicture.overlay_text" />
               </span>
             </Localizer>
-            <Localizer>
-              <Button tabIndex="0" className={[style.pictureInPictureButton, style.controlButton].join(' ')} onClick={() => this._handleClick()}>
-                <Text id="pictureInPicture.overlay_button" />
-              </Button>
-            </Localizer>
           </div>
         </div>
       </div>

diff --git a/src/components/picture-in-picture/_picture-in-picture.scss b/src/components/picture-in-picture/_picture-in-picture.scss
@@ -1,5 +1,11 @@
-.player{
-  .picture-in-picture{
-
+.icon-picture-in-picture-stop {
+  display: none;
+}
+.is-in-picture-in-picture {
+  .icon-picture-in-picture-start {
+    display: none;
+  }
+  .icon-picture-in-picture-stop {
+    display: block;
   }
 }
diff --git a/src/components/picture-in-picture/picture-in-picture.js b/src/components/picture-in-picture/picture-in-picture.js
@@ -20,6 +20,7 @@ import {Button} from 'components/button';
  */
 const mapStateToProps = state => ({
   isPictureInPictureSupported: state.engine.isPictureInPictureSupported,
+  isInPictureInPicture: state.engine.isInPictureInPicture,
   playerSize: state.shell.playerSize
 });
 
@@ -30,7 +31,10 @@ const COMPONENT_NAME = 'PictureInPicture';
 @withKeyboardEvent(COMPONENT_NAME)
 @withLogger(COMPONENT_NAME)
 @withEventDispatcher(COMPONENT_NAME)
-@withText({pipText: 'controls.pictureInPicture'})
+@withText({
+  pictureInPictureText: 'controls.pictureInPicture',
+  pictureInPictureExitText: 'controls.pictureInPictureExit'
+})
 
 /**
  * PictureInPicture component
@@ -87,13 +91,14 @@ class PictureInPicture extends Component {
     if (this.props.isPictureInPictureSupported && this.props.playerSize !== PLAYER_SIZE.EXTRA_SMALL) {
       return (
         <div className={[style.controlButtonContainer, style.pictureInPicture].join(' ')}>
-          <Tooltip label={this.props.pipText}>
+          <Tooltip label={this.props.isInPictureInPicture ? this.props.pictureInPictureExitText : this.props.pictureInPictureText}>
             <Button
               tabIndex="0"
-              aria-label={this.props.pipText}
-              className={`${style.controlButton} ${this.state.animation ? style.rotate : ''}`}
+              aria-label={this.props.isInPictureInPicture ? this.props.pictureInPictureExitText : this.props.pictureInPictureText}
+              className={this.props.isInPictureInPicture ? [style.controlButton, style.isInPictureInPicture].join(' ') : style.controlButton}
               onClick={() => this.togglePip()}>
-              <Icon type={IconType.PictureInPicture} />
+              <Icon type={IconType.PictureInPictureStart} />
+              <Icon type={IconType.PictureInPictureStop} />
             </Button>
           </Tooltip>
         </div>

diff --git a/translations/ar.i18n.json b/translations/ar.i18n.json
@@ -91,8 +91,7 @@
       "cancel": "إلغاء"
     },
     "pictureInPicture": {
-      "overlay_text": "تشغيل في وضع صورة داخل صورة",
-      "overlay_button": "تشغيل هنا"
+      "overlay_text": "تشغيل في وضع صورة داخل صورة"
     }
   }
 }
diff --git a/translations/de.i18n.json b/translations/de.i18n.json
@@ -91,8 +91,7 @@
       "cancel": "Abbrechen"
     },
     "pictureInPicture": {
-      "overlay_text": "Wiedergabe im Bild-im-Bild-Modus",
-      "overlay_button": "Hier abspielen"
+      "overlay_text": "Wiedergabe im Bild-im-Bild-Modus"
     }
   }
 }
diff --git a/translations/en.i18n.json b/translations/en.i18n.json
@@ -17,6 +17,7 @@
       "prev": "Prev",
       "startOver": "Start over",
       "pictureInPicture": "Picture in picture",
+      "pictureInPictureExit": "Exit picture in picture",
       "logo": "Logo",
       "seekBarSlider": "Seek slider"
     },
@@ -92,8 +93,7 @@
       "cancel": "Cancel"
     },
     "pictureInPicture": {
-      "overlay_text": "Playing in Picture In Picture mode",
-      "overlay_button": "Play Here"
+      "overlay_text": "Playing in Picture In Picture mode"
     }
   }
 }
diff --git a/translations/es.i18n.json b/translations/es.i18n.json
@@ -91,8 +91,7 @@
       "cancel": "Cancelar"
     },
     "pictureInPicture": {
-      "overlay_text": "Reproducido en modo imagen dentro de la imagen",
-      "overlay_button": "Reproducir aquí"
+      "overlay_text": "Reproducido en modo imagen dentro de la imagen"
     }
   }
 }
diff --git a/translations/fr.i18n.json b/translations/fr.i18n.json
@@ -91,8 +91,7 @@
       "cancel": "Annuler"
     },
     "pictureInPicture": {
-      "overlay_text": "Lecture en mode Image dans l’image",
-      "overlay_button": "Lire ici"
+      "overlay_text": "Lecture en mode Image dans l’image"
     }
   }
 }
diff --git a/translations/hi_in.i18n.json b/translations/hi_in.i18n.json
@@ -91,8 +91,7 @@
       "cancel": "रद्द करें"
     },
     "pictureInPicture": {
-      "overlay_text": "पिक्चर इन पिक्चर मोड में चला रहा",
-      "overlay_button": "यहां चलाएं"
+      "overlay_text": "पिक्चर इन पिक्चर मोड में चला रहा"
     }
   }
 }
diff --git a/translations/it.i18n.json b/translations/it.i18n.json
@@ -91,8 +91,7 @@
       "cancel": "Annulla"
     },
     "pictureInPicture": {
-      "overlay_text": "Riproduzione in modalità Immagine nell’immagine",
-      "overlay_button": "Riproduci qui"
+      "overlay_text": "Riproduzione in modalità Immagine nell’immagine"
     }
   }
 }
diff --git a/translations/ja.i18n.json b/translations/ja.i18n.json
@@ -91,8 +91,7 @@
       "cancel": "キャンセルする"
     },
     "pictureInPicture": {
-      "overlay_text": "ピクチャーインピクチャー モードで再生中",
-      "overlay_button": "ここで再生する"
+      "overlay_text": "ピクチャーインピクチャー モードで再生中"
     }
   }
 }
diff --git a/translations/nl.i18n.json b/translations/nl.i18n.json
@@ -91,8 +91,7 @@
       "cancel": "Annuleren"
     },
     "pictureInPicture": {
-      "overlay_text": "Afspelen in de Beeld in beeld-modus",
-      "overlay_button": "Hier afspelen"
+      "overlay_text": "Afspelen in de Beeld in beeld-modus"
     }
   }
 }
diff --git a/translations/pt_br.i18n.json b/translations/pt_br.i18n.json
@@ -91,8 +91,7 @@
       "cancel": "Cancelar"
     },
     "pictureInPicture": {
-      "overlay_text": "Reproduzindo no modo Picture In Picture",
-      "overlay_button": "Reproduzir Aqui"
+      "overlay_text": "Reproduzindo no modo Picture In Picture"
     }
   }
 }
diff --git a/translations/ru.i18n.json b/translations/ru.i18n.json
@@ -91,8 +91,7 @@
       "cancel": "Отмена"
     },
     "pictureInPicture": {
-      "overlay_text": "Воспроизведение в режиме «картинка в картинке»",
-      "overlay_button": "Воспроизвести здесь"
+      "overlay_text": "Воспроизведение в режиме «картинка в картинке»"
     }
   }
 }
diff --git a/translations/zh_cn.i18n.json b/translations/zh_cn.i18n.json
@@ -91,8 +91,7 @@
       "cancel": "取消"
     },
     "pictureInPicture": {
-      "overlay_text": "以画中画模式播放",
-      "overlay_button": "在这里播放"
+      "overlay_text": "以画中画模式播放"
     }
   }
 }
diff --git a/translations/zh_tw.i18n.json b/translations/zh_tw.i18n.json
@@ -91,8 +91,7 @@
       "cancel": "取消"
     },
     "pictureInPicture": {
-      "overlay_text": "在圖片中的圖片模式中播放",
-      "overlay_button": "在此處播放"
+      "overlay_text": "在圖片中的圖片模式中播放"
     }
   }
 }