public/clients/insports/privacy-policy-and-statement.html

@@ -86,7 +86,8 @@
       </p>
 
       <p>
-        (inSports TV also referred to as "us", "we", "our" or "the company"; refers to InSport TV Limited)
+        (inSports TV also referred to as "us", "we", "our" or "the company";
+        refers to InSport TV Limited)
       </p>
 
       <p
@@ -105,12 +106,11 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >inSports TV is committed to the privacy of those that we engage with and
+          >inSports TV is committed to the privacy of those that we engage with
-          this statements details our approach. While using this site or
+          and this statements details our approach. While using this site or
           providing personal data to us in the course of business, we will
           manage your data in accordance with this privacy statement.
-          </span
+        </span>
-        >
       </p>
 
       <ul style="margin-top: 0in" type="disc">
@@ -175,10 +175,10 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >inSports TV provides an online platform that allows to broadcast sports
+          >inSports TV provides an online platform that allows to broadcast
-          video content. This is a legitimate interest pursued by inSports TV.
+          sports video content. This is a legitimate interest pursued by
-          Personal data processed by the business is done so in accordance with
+          inSports TV. Personal data processed by the business is done so in
-          current Data Protection Regulation and GDPR.</span
+          accordance with current Data Protection Regulation and GDPR.</span
         >
       </p>
       <p
@@ -219,7 +219,18 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >We may obtain personal data including name, address, phone numbers, e-mail address, other electronic identifiers, title, images, IP address, company details, information about usage of inSports TV services (e.g., the types of content that you engage with), device information, transaction information including a credit card number and other authentication information (only when the transaction on our products is made) and other information provided by you or by other people when they use our products in accordance with this policy and with data protection law. We may also obtain similar information from other sources such as club, league or broadcast game footage, or from your use of inSports TV services, or when you sign up to our services, or attend events or otherwise engage with the business.</span
+          >We may obtain personal data including name, address, phone numbers,
+          e-mail address, other electronic identifiers, title, images, IP
+          address, company details, information about usage of inSports TV
+          services (e.g., the types of content that you engage with), device
+          information, transaction information including a credit card number
+          and other authentication information (only when the transaction on our
+          products is made) and other information provided by you or by other
+          people when they use our products in accordance with this policy and
+          with data protection law. We may also obtain similar information from
+          other sources such as club, league or broadcast game footage, or from
+          your use of inSports TV services, or when you sign up to our services,
+          or attend events or otherwise engage with the business.</span
         >
       </p>
 
@@ -261,9 +272,10 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >We use personal data for the purposes for which it was provided to us as
+          >We use personal data for the purposes for which it was provided to us
-           expressed at the point of collection or as is obvious in the context of collection. 
+          as expressed at the point of collection or as is obvious in the
-           Typically, information is collected for the following purposes:</span
+          context of collection. Typically, information is collected for the
+          following purposes:</span
         >
       </p>
 
@@ -601,7 +613,13 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >We take all reasonable measures to protect your personal information while it is in our possession. Your personal information may be transferred to third party service providers who process information on the inSports TV behalf, including providers of information technology, identity management, website hosting and management, network services, data analysis, anti-spam services, data back-up, security, and storage services.</span
+          >We take all reasonable measures to protect your personal information
+          while it is in our possession. Your personal information may be
+          transferred to third party service providers who process information
+          on the inSports TV behalf, including providers of information
+          technology, identity management, website hosting and management,
+          network services, data analysis, anti-spam services, data back-up,
+          security, and storage services.</span
         >
       </p>
 
@@ -621,7 +639,12 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >Your Personal data may also be transferred to joint sponsors of events, or to certification bodies. We may also provide access to your personal information to law enforcement authorities, revenue commissioners, regulatory or other government agencies, or to other third parties should we receive a valid request compatible with applicable law or regulation.</span
+          >Your Personal data may also be transferred to joint sponsors of
+          events, or to certification bodies. We may also provide access to your
+          personal information to law enforcement authorities, revenue
+          commissioners, regulatory or other government agencies, or to other
+          third parties should we receive a valid request compatible with
+          applicable law or regulation.</span
         >
       </p>
 
@@ -641,7 +664,14 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >Personal data submitted through this site may be transferred to third party service providers or to other companies within the inSports group of companies that are outside of the state, and outside of the European Economic Area (EEA). Where you request goods or services to be provided outside the EEA (European Economic Area), or to be delivered in conjunction with others outside of the EEA, personal data provided by you may be shared with organizations or state bodies (customs, revenue authorities and etc.) to fulfil an agreement.</span
+          >Personal data submitted through this site may be transferred to third
+          party service providers or to other companies within the inSports
+          group of companies that are outside of the state, and outside of the
+          European Economic Area (EEA). Where you request goods or services to
+          be provided outside the EEA (European Economic Area), or to be
+          delivered in conjunction with others outside of the EEA, personal data
+          provided by you may be shared with organizations or state bodies
+          (customs, revenue authorities and etc.) to fulfil an agreement.</span
         >
       </p>
 
@@ -683,7 +713,15 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >Customers and other organizations engaging with us for service shall warrant that personal information provided to us for the administration and delivery of goods and services being provided under the Agreement has been obtained fairly and lawfully. Such customers or organizations shall also warrant that subjects are aware of the purpose for which their personal data is being used and that such data may be transferred outside of the EEA for processing or to deliver the service or upon your request, and that the privacy rights of subjects have been upheld.</span
+          >Customers and other organizations engaging with us for service shall
+          warrant that personal information provided to us for the
+          administration and delivery of goods and services being provided under
+          the Agreement has been obtained fairly and lawfully. Such customers or
+          organizations shall also warrant that subjects are aware of the
+          purpose for which their personal data is being used and that such data
+          may be transferred outside of the EEA for processing or to deliver the
+          service or upon your request, and that the privacy rights of subjects
+          have been upheld.</span
         >
       </p>
 
@@ -725,7 +763,15 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >inSports TV have implemented generally accepted standards of technology and operational security to protect personal data from alteration, unauthorized disclosure or destruction, and from use for unauthorized purposes. Furthermore, we have taken measures to ensure that contracts with all third parties that provide technical and processing services include terms that specify appropriate technical and organizational security measures to prevent accidental, unauthorized or unlawful disclosure or processing of personal data.</span
+          >inSports TV have implemented generally accepted standards of
+          technology and operational security to protect personal data from
+          alteration, unauthorized disclosure or destruction, and from use for
+          unauthorized purposes. Furthermore, we have taken measures to ensure
+          that contracts with all third parties that provide technical and
+          processing services include terms that specify appropriate technical
+          and organizational security measures to prevent accidental,
+          unauthorized or unlawful disclosure or processing of personal
+          data.</span
         >
       </p>
 
@@ -1191,31 +1237,14 @@
         >
       </p>
 
-      <p style="margin-bottom: 0in; line-height: normal; background: #f2f2f2">
-        <span
-          style="
-            font-size: 9pt;
-            font-family: 'Trebuchet MS', sans-serif;
-            color: black;
-          "
-          >© inSportsTV.com All right reserved.</span
-        >
-      </p>
-    </div>
-    <div
-      style="
-        background-color: white;
-        max-width: 1264px;
-        padding: 40px;
-        margin: 0 auto;
-      "
-    >
       <p
         style="
           margin-top: 22.5pt;
           margin-right: 7.5pt;
           margin-bottom: 7.5pt;
-          line-height: 1.1;
+          margin-left: 7.5pt;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <b
@@ -1225,7 +1254,7 @@
               font-family: 'Trebuchet MS', sans-serif;
               color: #002060;
             "
-            >*ERSTE LIGA ADDITIONAL NOTICE</span
+            >Cookies Policy</span
           ></b
         >
       </p>
@@ -1235,7 +1264,8 @@
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-          line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1244,35 +1274,39 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >In the case of ERSTE LIGA TV channel, data is processed jointly in
+          >We use cookies, pixels, and other technologies (collectively,
-          accordance with EU Regulation 2016/679 (hereinafter GDPR). When
+          “cookies”) to recognize your browser or device, learn more about your
-          registering on the inSports site, after accepting this Privacy Policy
+          interests, and provide you with essential features and services and
-          and Privacy Statement, the user provides the e-mail address required
+          for additional purposes.<br />
-          to use the service, which is handed over to the Hungarian Ice Hockey
+          If you opt out of advertising cookies, you may still see /platform
-          Federation (hereinafter referred to as HIHF), the rights holder of the
+          name/ ads on other sites, but those ads will not be customized by us
-          ERSTE LIGA TV channel, within the framework of joint data processing.
+          or our service providers and we will continue to customize your
-          Details of the joint processing by the HIHF:
+          experience on our website via our use of cookies you have not
+          refused.<br />
+          Please note that some of the services will not function as well if
+          cookies are disabled.
         </span>
       </p>
       <p
         style="
-          margin-top: 7.5pt;
+          margin-top: 22.5pt;
-          margin-right: 0in;
+          margin-right: 7.5pt;
           margin-bottom: 7.5pt;
-          margin-left: 0in;
+          margin-left: 7.5pt;
-          line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
-        <span
+        <b
+          ><span
             style="
-            font-size: 10.5pt;
+              font-size: 12.5pt;
               font-family: 'Trebuchet MS', sans-serif;
-            color: black;
+              color: #002060;
             "
-          >Purpose of data processing: the HIHF sends marketing, PR and sports
+            >What kind of cookies do we use?</span
-          promotional content by electronic messages to users who accept this
+          ></b
-          Privacy Statement,  to the e-mail address they have provided.
+        >
-        </span>
       </p>
       <p
         style="
@@ -1280,7 +1314,8 @@
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-          line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1289,8 +1324,19 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >Legal basis for processing: consent of the data subject.
+          ><i>Analytics and Performance:</i> We make use of analytic cookies to
-        </span>
+          analyze how our visitors use our Website and to monitor Website
+          performance. This allows us to provide a high-quality experience by
+          customizing our offering and quickly identifying and fixing any issues
+          that arise. For example, we might use performance cookies to keep
+          track of which pages are most popular, which method of linking between
+          pages is most effective, and to determine why some pages are receiving
+          error messages. We might also use these cookies to highlight articles
+          or site services that we think will be of interest to you based on
+          your usage of the Website. The information collected by these cookies
+          is not associated with your personal information by us or by our
+          contractors.</span
+        >
       </p>
       <p
         style="
@@ -1298,7 +1344,8 @@
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-          line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1307,9 +1354,13 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >The scope of the data processed: the e-mail address of the user
+          ><i>Website Functionality:</i> We make use of cookies to provide you
-          registered on inSports.tv.
+          with certain functionality. For example, to remember choices you make
-        </span>
+          (such as your username, language or the region you are in), or to
+          recognize the platform from which you access the Website, and to
+          provide enhanced and more personal features. These cookies are not
+          used to track your browsing on other sites.</span
+        >
       </p>
       <p
         style="
@@ -1317,7 +1368,8 @@
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-          line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1326,28 +1378,38 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >Duration of processing: until the data subject's consent is
+          ><i>Advertising:</i> Advertising cookies (also known as Third Party or
-          withdrawn.
+          targeting cookies) collect information about the browsing habits
-        </span>
+          associated with your device and are used to make advertising more
+          relevant to you and your interests. Advertisers such as Facebook,
+          Google, Twitter and others may have buttons embedded on our webpage
+          that such as ‘Like' or ‘Share' buttons in addition to providing the
+          requested functionality or if you click on an advertiser’s ad on our
+          website and are taken to the advertiser’s website (these are Third
+          Party Cookies).</span
+        >
       </p>
       <p
         style="
-          margin-top: 7.5pt;
+          margin-top: 22.5pt;
-          margin-right: 0in;
+          margin-right: 7.5pt;
           margin-bottom: 7.5pt;
-          margin-left: 0in;
+          margin-left: 7.5pt;
-          line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
-        <span
+        <b
+          ><span
             style="
-            font-size: 10.5pt;
+              font-size: 12.5pt;
               font-family: 'Trebuchet MS', sans-serif;
-            color: black;
+              color: #002060;
+              font-style: italic;
             "
-          >Method of processing: electronically, in compliance with the
+            >What is the lifespan of cookies?</span
-          necessary security standards.
+          ></b
-        </span>
+        >
       </p>
       <p
         style="
@@ -1355,7 +1417,8 @@
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-          line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1363,58 +1426,35 @@
             font-size: 10.5pt;
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
+            font-style: italic;
           "
-          >Data subjects' rights:
-        </span>
-      </p>
-      <ol style="margin-top: 0in" start="1" type="a">
-        <li style="color: black; margin-bottom: 0in; line-height: 1.1">
-          <span
-            style="font-size: 10.5pt; font-family: 'Trebuchet MS', sans-serif"
-            >The data subject has the right to withdraw consent to data
-            processing at any time. Withdrawal of consent does not affect the
-            lawfulness of the prior processing.</span
         >
-        </li>
+          Analytics and Performance: 2 Years;<br />
-        <li style="color: black; margin-bottom: 0in; line-height: 1.1">
+          Website Functionality: 100 days;<br />
-          <span
+          Advertising: 2 Years;
-            style="font-size: 10.5pt; font-family: 'Trebuchet MS', sans-serif"
-            >The data subject may also exercise his or her right of access to
-            his or her personal data (right to request information about the
-            processing), the right to rectification of his or her personal data
-            (e.g. if his or her e-mail address changes), the right to object to
-            processing, the right to restriction of processing (e.g. if he or
-            she does not wish to receive e-mails for a certain period of time),
-            the right to erasure or blocking of his or her data, and the right
-            to data portability.
         </span>
-        </li>
+      </p>
-        <li style="color: black; margin-bottom: 0in; line-height: 1.1">
+
-          <span
-            style="font-size: 10.5pt; font-family: 'Trebuchet MS', sans-serif"
-            >If the data subject wishes to exercise his or her rights in
-            relation to the joint processing described in this paragraph, he or
-            she may do so by the means listed below:
-          </span>
-        </li>
       <p
         style="
           margin-top: 22.5pt;
-            margin-right: 0in;
+          margin-right: 7.5pt;
           margin-bottom: 7.5pt;
-            margin-left: 0in;
+          margin-left: 7.5pt;
-            line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
-          <span
+        <b
+          ><span
             style="
-              font-size: 10.5pt;
+              font-size: 12.5pt;
               font-family: 'Trebuchet MS', sans-serif;
-              color: black;
+              color: #002060;
             "
-            >Name: Hungarian Ice Hockey Federation (hereinafter referred to as
+            >Local storage</span
-            the "Controller")
+          ></b
-          </span>
+        >
       </p>
       <p
         style="
@@ -1422,7 +1462,8 @@
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-            line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1431,26 +1472,39 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-            >Seat: H-1146 Budapest, Istvánmezei út 1-3.
+        >
+          Local storage is a feature we utilize on our website to enhance your
+          user experience. It allows us to store your user preferences and
+          settings, such as volume/mute settings, and enables the smooth
+          functioning of animated content on our website. Additionally, we can
+          utilize local storage to remember the point at which you left off
+          while watching content. This means that if you navigate away from the
+          page or close your browser, you can easily resume viewing from where
+          you left off without any hassle. Rest assured that this information is
+          stored securely and can only be accessed by our website.
         </span>
       </p>
+
       <p
         style="
-            margin-top: 7.5pt;
+          margin-top: 22.5pt;
-            margin-right: 0in;
+          margin-right: 7.5pt;
           margin-bottom: 7.5pt;
-            margin-left: 0in;
+          margin-left: 7.5pt;
-            line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
-          <span
+        <b
+          ><span
             style="
-              font-size: 10.5pt;
+              font-size: 12.5pt;
               font-family: 'Trebuchet MS', sans-serif;
-              color: black;
+              color: #002060;
             "
-            >Postal address: H-1146 Budapest, Istvánmezei út 1-3.
+            >Use of IP addresses and web logs</span
-          </span>
+          ></b
+        >
       </p>
       <p
         style="
@@ -1458,7 +1512,8 @@
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-            line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1467,26 +1522,37 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-            >Represented by: Zsolt Levente Sipos, General Secretary
+        >
+          We may also use your IP address and browser type to help diagnose
+          problems with our server, to administer our Website and to improve the
+          services we offer to you. An IP address is a numeric code that
+          identifies your computer on the internet. Your IP address might also
+          be used to gather broad demographic information.<br />
+          We may perform IP lookups to determine which domain you are coming
+          from (e.g. google.com) to more accurately gauge our users'
+          demographics.
         </span>
       </p>
       <p
         style="
-            margin-top: 7.5pt;
+          margin-top: 22.5pt;
-            margin-right: 0in;
+          margin-right: 7.5pt;
           margin-bottom: 7.5pt;
-            margin-left: 0in;
+          margin-left: 7.5pt;
-            line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
-          <span
+        <b
+          ><span
             style="
-              font-size: 10.5pt;
+              font-size: 12.5pt;
               font-family: 'Trebuchet MS', sans-serif;
-              color: black;
+              color: #002060;
             "
-            >Phone: +36 1 460 6863
+            >Cookie Notice does not cover third party websites</span
-          </span>
+          ></b
+        >
       </p>
       <p
         style="
@@ -1494,7 +1560,8 @@
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-            line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1503,35 +1570,43 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-            >Fax: +36 1 460 6864
+        >
+          Please note that this Cookie Notice does not apply to, and we are not
+          responsible for, the privacy practices of third-party websites which
+          may be linked to this Website.
         </span>
       </p>
+
       <p
         style="
-            margin-top: 7.5pt;
+          margin-top: 22.5pt;
-            margin-right: 0in;
+          margin-right: 7.5pt;
           margin-bottom: 7.5pt;
-            margin-left: 0in;
+          margin-left: 7.5pt;
-            line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
-          <span
+        <b
+          ><span
             style="
-              font-size: 10.5pt;
+              font-size: 12.5pt;
               font-family: 'Trebuchet MS', sans-serif;
-              color: black;
+              color: #002060;
             "
-            >E-mail: adatvedelem@icehockey.hu
+            >Changes to the Cookie Notice</span
-          </span>
+          ></b
+        >
       </p>
-      </ol>
+
       <p
         style="
           margin-top: 7.5pt;
           margin-right: 0in;
           margin-bottom: 7.5pt;
           margin-left: 0in;
-          line-height: 1.1;
+          line-height: normal;
+          background: #f2f2f2;
         "
       >
         <span
@@ -1540,11 +1615,23 @@
             font-family: 'Trebuchet MS', sans-serif;
             color: black;
           "
-          >HIHF ERSTE LIGA TV Terms and Conditions of Use, including the Privacy
+        >
-          Statement, can be found at the following link:
+          We may update this Cookie Notice and we would encourage you to review
-          "ersteligatv.hu/Felhasznalasi-feltetelek"
+          the notice from time to time to stay informed of how we are using
+          cookies.
         </span>
       </p>
+
+      <p style="margin-bottom: 0in; line-height: normal; background: #f2f2f2">
+        <span
+          style="
+            font-size: 9pt;
+            font-family: 'Trebuchet MS', sans-serif;
+            color: black;
+          "
+          >© inSportsTV.com All right reserved.</span
+        >
+      </p>
     </div>
   </body>
 </html>

src/features/CircleAnimationBar/index.tsx

@@ -10,16 +10,16 @@ import { fullEpisodesDuration } from './helpers'
 import { Svg, Circle } from './styled'
 
 export type TCircleAnimation = {
-  plaingOrder: number,
   playedProgress: number,
   playing: boolean,
+  playingOrder: number,
   ready: boolean,
 }
 
 export const initialCircleAnimation: TCircleAnimation = {
-  plaingOrder: 0,
   playedProgress: 0,
   playing: false,
+  playingOrder: 0,
   ready: false,
 }
 
@@ -43,14 +43,14 @@ export const CircleAnimationBar = ({
   } = useMatchPageStore()
 
   const {
-    plaingOrder,
     playedProgress,
     playing,
+    playingOrder,
     ready,
   } = circleAnimation
 
   const timeOfAllEpisodes = fullEpisodesDuration(filteredEvents)
-  const remainingEvents = filteredEvents.slice(plaingOrder && plaingOrder - 1)
+  const remainingEvents = filteredEvents.slice(playingOrder && playingOrder - 1)
   const fullTimeOfRemainingEpisodes = !isEmpty(remainingEvents)
     ? fullEpisodesDuration(remainingEvents)
     : 0
@@ -62,13 +62,13 @@ export const CircleAnimationBar = ({
   const strokeDashOffset = svgSize * Math.PI
 
   useEffect(() => {
-    if (currentEpisodesPercent >= 100 && (plaingOrder === size(filteredEvents))) {
+    if (currentEpisodesPercent >= 100 && (playingOrder === size(filteredEvents))) {
       setWatchAllEpisodesTimer(false)
     }
   }, [
     currentEpisodesPercent,
     filteredEvents,
-    plaingOrder,
+    playingOrder,
     setWatchAllEpisodesTimer,
   ])
 

src/features/MatchPage/components/FinishedMatch/hooks/index.tsx

@@ -41,11 +41,12 @@ export const useFinishedMatch = () => {
     setSettings(newSettings)
     closeSettingsPopup()
   }
-
+  // @ts-expect-error
   const onPlaylistSelect: typeof handlePlaylistClick = (playlist, e) => {
     if (selectedPlaylist) {
       logPlaylistChange(selectedPlaylist)
     }
+    // @ts-expect-error
     handlePlaylistClick(playlist, e)
   }
   const { chapters } = useChapters({ episodes, selectedPlaylist })

src/features/MatchPage/components/FinishedMatch/hooks/useEpisodes.tsx

@@ -49,7 +49,7 @@ export const useEpisodes = () => {
 
   useEffect(() => {
     if (!selectedPlaylist && playlists && !isEmpty(playlists.match)) {
-      handlePlaylistClick(playlists.match[0])
+      // handlePlaylistClick(playlists.match[0])
     }
   }, [
     selectedPlaylist,

src/features/MatchPage/components/FinishedMatch/index.tsx

@@ -66,6 +66,7 @@ export const FinishedMatch = () => {
 
       <MatchSidePlaylists
         selectedPlaylist={selectedPlaylist}
+        // @ts-expect-error
         onSelect={onPlaylistSelect}
       />
     </Fragment>

src/features/MatchPage/components/LiveMatch/hooks/index.tsx

@@ -1,3 +1,4 @@
+import type { MouseEvent } from 'react'
 import { useMemo } from 'react'
 
 import { API_ROOT } from 'config'
@@ -6,6 +7,7 @@ import { readToken } from 'helpers/token'
 
 import { usePageParams } from 'hooks'
 
+import type { PlaylistOption } from 'features/MatchPage/types'
 import { useMatchPageStore } from 'features/MatchPage/store'
 
 import { MatchSecondType, usePlayerProgressReporter } from './usePlayerProgressReporter'
@@ -18,6 +20,7 @@ export const useLiveMatch = () => {
     handlePlaylistClick,
     profile,
     selectedPlaylist,
+    selectedTab,
     setFullMatchPlaylistDuration,
   } = useMatchPageStore()
   const { profileId: matchId, sportType } = usePageParams()
@@ -59,11 +62,15 @@ export const useLiveMatch = () => {
     notifyProgressLogger(playing)
   }
 
-  const onPlaylistSelect: typeof handlePlaylistClick = (playlist, e) => {
+  const onPlaylistSelect = (playlist: PlaylistOption, e?: MouseEvent) => {
     if (selectedPlaylist) {
       logPlaylistChange(selectedPlaylist)
     }
-    handlePlaylistClick(playlist, e)
+    handlePlaylistClick({
+      e,
+      playlist,
+      tab: selectedTab,
+    })
   }
   return {
     chapters,

src/features/MatchPage/store/hooks/index.tsx

@@ -17,6 +17,7 @@ import { initialCircleAnimation } from 'features/CircleAnimationBar'
 import type { TCircleAnimation } from 'features/CircleAnimationBar'
 import { StatsType } from 'features/MatchSidePlaylists/components/TabStats/config'
 import { PlaylistTypes } from 'features/MatchPage/types'
+import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
 
 import type { MatchInfo } from 'requests/getMatchInfo'
 import { getMatchInfo } from 'requests/getMatchInfo'
@@ -48,9 +49,9 @@ type PlayingData = {
 }
 
 type EpisodeInfo = {
-  paramName: string,
+  episodesCount?: number,
-  paramValue?: number,
+  paramName?: string,
-  playerOrTeamName: string,
+  playerOrTeamName?: string,
 }
 
 const initPlayingData: PlayingData = {
@@ -72,18 +73,16 @@ export const useMatchPage = () => {
   const [access, setAccess] = useState(true)
   const [playingProgress, setPlayingProgress] = useState(0)
   const [playingData, setPlayingData] = useState<PlayingData>(initPlayingData)
-  const [plaingOrder, setPlaingOrder] = useState(0)
+  const [playingOrder, setPlaingOrder] = useState(0)
   const [isPlayFilterEpisodes, setIsPlayingFiltersEpisodes] = useState(false)
   const [selectedTab, setSelectedTab] = useState<Tabs>(Tabs.WATCH)
   const [circleAnimation, setCircleAnimation] = useState<TCircleAnimation>(initialCircleAnimation)
   const [episodeInfo, setEpisodeInfo] = useState<EpisodeInfo>({
+    episodesCount: 0,
     paramName: '',
-    paramValue: 0,
     playerOrTeamName: '',
   })
 
-  const isStatsTab = selectedTab === Tabs.STATS
-
   const { profileId: matchId, sportType } = usePageParams()
 
   useEffect(() => {
@@ -112,13 +111,13 @@ export const useMatchPage = () => {
     matchPlaylists,
     selectedPlaylist,
     setFullMatchPlaylistDuration,
-  } = useMatchData({ matchProfile, selectedTab })
+  } = useMatchData({ matchProfile })
 
   const profile = matchProfile
 
-  const isPlayingEpisode = selectedPlaylist.type === PlaylistTypes.EVENT
+  const isPlayingEpisode = selectedPlaylist.id !== FULL_GAME_KEY
-    && selectedPlaylist.tab === Tabs.STATS
+
-    && selectedTab === Tabs.STATS
+  const isStatsPlaylist = selectedPlaylist.tab === Tabs.STATS
 
   const {
     activeEvents,
@@ -245,7 +244,7 @@ export const useMatchPage = () => {
   }
 
   const disablePlayingEpisodes = () => {
-    isStatsTab ? disablePlayingStatsEpisodes() : disablePlayingPlaysEpisodes()
+    isStatsPlaylist ? disablePlayingStatsEpisodes() : disablePlayingPlaysEpisodes()
   }
 
   useEffect(() => {
@@ -253,7 +252,7 @@ export const useMatchPage = () => {
       disablePlayingStatsEpisodes()
       disablePlayingPlaysEpisodes()
     } else {
-      selectedTab === Tabs.EVENTS ? disablePlayingStatsEpisodes() : disablePlayingPlaysEpisodes()
+      !isStatsPlaylist ? disablePlayingStatsEpisodes() : disablePlayingPlaysEpisodes()
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedPlaylist])
@@ -265,8 +264,8 @@ export const useMatchPage = () => {
     isPlayersStatsFetching,
     isPlayFilterEpisodes: isStatsPlayFilterEpisodes,
     isTeamsStatsFetching,
-    plaingOrder: statsPlaingOrder,
     playEpisodes: playStatsEpisodes,
+    playingOrder: statsPlaingOrder,
     playNextEpisode: playStatsNextEpisode,
     reduceTable,
     selectedStatsTable,
@@ -357,16 +356,19 @@ export const useMatchPage = () => {
   } = useTabEvents({ events: filteredEvents, profile })
 
   const playNextEpisode = (order?: number) => {
-    const isLastEpisode = plaingOrder === episodesToPlay.length
+    const isLastEpisode = playingOrder === episodesToPlay.length
 
-    const currentOrder = order === 0 ? order : plaingOrder
+    const currentOrder = order === 0 ? order : playingOrder
     if (isLastEpisode) {
       setIsPlayingFiltersEpisodes(false)
       setPlaingOrder(0)
 
       return
     }
-    handlePlaylistClick(episodesToPlay[currentOrder])
+    handlePlaylistClick({
+      playlist: episodesToPlay[currentOrder],
+      tab: Tabs.EVENTS,
+    })
     setPlaingOrder(currentOrder + 1)
   }
   const playEpisodes = () => {
@@ -380,17 +382,8 @@ export const useMatchPage = () => {
     }
 
     setIsPlayingFiltersEpisodes(true)
-
-    if (matchProfile?.live) {
-      handlePlaylistClick({
-        episodes: episodesToPlay.map((el) => el.episodes[0]),
-        id: 1,
-        type: episodesToPlay[0].type,
-      })
-    } else {
     playNextEpisode(0)
   }
-  }
 
   return {
     access,
@@ -402,13 +395,13 @@ export const useMatchPage = () => {
     allPlayersToggle,
     applyFilters,
     beforeCloseTourCallback,
-    circleAnimation: isStatsTab ? statsCircleAnimation : circleAnimation,
+    circleAnimation: isStatsPlaylist ? statsCircleAnimation : circleAnimation,
     closePopup,
     countOfFilters,
     disablePlayingEpisodes,
     episodeInfo,
     events,
-    filteredEvents: isStatsTab ? statsFilteredEvents : filteredEvents,
+    filteredEvents: isStatsPlaylist ? statsFilteredEvents : filteredEvents,
     getFirstClickableParam,
     getParams,
     handlePlaylistClick,
@@ -421,7 +414,7 @@ export const useMatchPage = () => {
     isFirstTeamPlayersChecked,
     isLiveMatch,
     isOpenFiltersPopup,
-    isPlayFilterEpisodes: isStatsTab ? isStatsPlayFilterEpisodes : isPlayFilterEpisodes,
+    isPlayFilterEpisodes: isStatsPlaylist ? isStatsPlayFilterEpisodes : isPlayFilterEpisodes,
     isPlayersStatsFetching,
     isPlayingEpisode,
     isSecondTeamPlayersChecked,
@@ -430,13 +423,13 @@ export const useMatchPage = () => {
     likeImage,
     likeToggle,
     matchPlaylists,
-    plaingOrder: isStatsTab ? statsPlaingOrder : plaingOrder,
     playEpisodes,
-    playNextEpisode: isStatsTab ? playStatsNextEpisode : playNextEpisode,
+    playNextEpisode: isStatsPlaylist ? playStatsNextEpisode : playNextEpisode,
     playStatsEpisodes,
     playersData,
     playersStats,
     playingData,
+    playingOrder: isStatsPlaylist ? statsPlaingOrder : playingOrder,
     playingProgress,
     profile,
     profileCardShown,
@@ -445,13 +438,13 @@ export const useMatchPage = () => {
     selectedPlaylist,
     selectedStatsTable,
     selectedTab,
-    setCircleAnimation: isStatsTab ? setStatsCircleAnimation : setCircleAnimation,
+    setCircleAnimation: isStatsPlaylist ? setStatsCircleAnimation : setCircleAnimation,
     setEpisodeInfo,
     setFullMatchPlaylistDuration,
-    setIsPlayingFiltersEpisodes: isStatsTab
+    setIsPlayingFiltersEpisodes: isStatsPlaylist
       ? setStatsIsPlayinFiltersEpisodes
       : setIsPlayersStatsFetching,
-    setPlaingOrder: isStatsTab ? setStatsPlaingOrder : setPlaingOrder,
+    setPlaingOrder: isStatsPlaylist ? setStatsPlaingOrder : setPlaingOrder,
     setPlayingData,
     setPlayingProgress,
     setReversed,
@@ -459,9 +452,10 @@ export const useMatchPage = () => {
     setSelectedTab,
     setStatsType,
     setUnreversed,
-    setWatchAllEpisodesTimer: isStatsTab ? setStatsWatchAllEpisodesTimer : setWatchAllEpisodesTimer,
+    setWatchAllEpisodesTimer: isStatsPlaylist
+      ? setStatsWatchAllEpisodesTimer
+      : setWatchAllEpisodesTimer,
     showProfileCard,
-    statsPlaingOrder,
     statsType,
     teamsStats,
     toggleActiveEvents,
@@ -472,6 +466,6 @@ export const useMatchPage = () => {
     tournamentData,
     uniqEvents,
     user,
-    watchAllEpisodesTimer: isStatsTab ? statsWatchAllEpisodesTimer : watchAllEpisodesTimer,
+    watchAllEpisodesTimer: isStatsPlaylist ? statsWatchAllEpisodesTimer : watchAllEpisodesTimer,
   }
 }

src/features/MatchPage/store/hooks/useMatchData.tsx

@@ -11,7 +11,6 @@ import { usePageParams, useInterval } from 'hooks'
 import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
 import { useDuration } from 'features/MultiSourcePlayer/hooks/useDuration'
 import { useMatchPopupStore } from 'features/MatchPopup'
-import { Tabs } from 'features/MatchSidePlaylists/config'
 
 import { useMatchPlaylists } from './useMatchPlaylists'
 import { useEvents } from './useEvents'
@@ -21,10 +20,9 @@ const MATCH_DATA_POLL_INTERVAL = 5000
 
 type UseMatchDataArgs = {
   matchProfile: MatchInfo,
-  selectedTab: Tabs,
 }
 
-export const useMatchData = ({ matchProfile: profile, selectedTab }: UseMatchDataArgs) => {
+export const useMatchData = ({ matchProfile: profile }: UseMatchDataArgs) => {
   const { profileId: matchId, sportType } = usePageParams()
   const { chapters } = useMatchPopupStore()
   const [matchDuration, setMatchDuration] = useState(0)
@@ -35,7 +33,7 @@ export const useMatchData = ({ matchProfile: profile, selectedTab }: UseMatchDat
     selectedPlaylist,
     setFullMatchPlaylistDuration,
     setSelectedPlaylist,
-  } = useMatchPlaylists({ matchProfile: profile, selectedTab })
+  } = useMatchPlaylists({ matchProfile: profile })
 
   const { events, fetchMatchEvents } = useEvents()
 

src/features/MatchPage/store/hooks/useMatchPlaylists.tsx

@@ -13,7 +13,6 @@ import { usePageParams } from 'hooks/usePageParams'
 
 import type { Playlists } from 'features/MatchPage/types'
 import { buildPlaylists, FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
-import { Tabs } from 'features/MatchSidePlaylists/config'
 
 import { usePlaylistLexics } from './usePlaylistLexics'
 import { initialPlaylist, useSelectedPlaylist } from './useSelectedPlaylist'
@@ -26,14 +25,12 @@ type ArgsFetchMatchPlaylists = {
 
 type UseMatchPlaylistsArgs = {
   matchProfile: MatchInfo,
-  selectedTab: Tabs,
 }
 
 const initialPlaylists = buildPlaylists(null)
 
 export const useMatchPlaylists = ({
   matchProfile: profile,
-  selectedTab,
 }: UseMatchPlaylistsArgs) => {
   const [matchPlaylists, setMatchPlaylists] = useState<Playlists>(initialPlaylists)
 
@@ -43,7 +40,7 @@ export const useMatchPlaylists = ({
     handlePlaylistClick,
     selectedPlaylist,
     setSelectedPlaylist,
-  } = useSelectedPlaylist({ selectedTab })
+  } = useSelectedPlaylist()
 
   const setInitialSeletedPlaylist = useCallback((playlists: Playlists) => {
     setSelectedPlaylist((playlist) => {

src/features/MatchPage/store/hooks/useSelectedPlaylist.tsx

@@ -21,14 +21,17 @@ export const initialPlaylist = {
   episodes: [],
   id: FULL_GAME_KEY,
   lexic: indexLexics.full_game,
+  tab: Tabs.WATCH,
   type: 0,
 }
 
-type UseSelectedPlaylistArgs = {
+type HandlePlaylistClickArgs = {
-  selectedTab: Tabs,
+  e?: MouseEvent,
+  playlist: PlaylistOption,
+  tab: Tabs,
 }
 
-export const useSelectedPlaylist = ({ selectedTab }: UseSelectedPlaylistArgs) => {
+export const useSelectedPlaylist = () => {
   const { profileId: matchId, sportType } = usePageParams()
   const [selectedPlaylist, setSelectedPlaylist] = useState<PlaylistOption>(initialPlaylist)
 
@@ -41,7 +44,11 @@ export const useSelectedPlaylist = ({ selectedTab }: UseSelectedPlaylistArgs) =>
     })
   ), [matchId, sportType])
 
-  const handlePlaylistClick = useCallback((playlist: PlaylistOption, e?: MouseEvent) => {
+  const handlePlaylistClick = useCallback(({
+    e,
+    playlist,
+    tab,
+  }: HandlePlaylistClickArgs) => {
     e?.stopPropagation()
     if (playlist === selectedPlaylist) return
 
@@ -50,16 +57,16 @@ export const useSelectedPlaylist = ({ selectedTab }: UseSelectedPlaylistArgs) =>
         setSelectedPlaylist({
           ...playlist,
           episodes,
+          tab,
         })
       })
     } else {
       setSelectedPlaylist({
         ...playlist,
-        // @ts-expect-error
+        tab,
-        tab: selectedTab,
       })
     }
-  }, [fetchPlayerEpisodes, selectedPlaylist, selectedTab])
+  }, [fetchPlayerEpisodes, selectedPlaylist])
 
   return {
     handlePlaylistClick,

src/features/MatchPage/store/hooks/useStatsTab.tsx

@@ -14,12 +14,19 @@ import type { EventPlaylistOption, PlaylistOption } from 'features/MatchPage/typ
 import type { TCircleAnimation } from 'features/CircleAnimationBar'
 import { initialCircleAnimation } from 'features/CircleAnimationBar'
 import { PlaylistTypes } from 'features/MatchPage/types'
-import { StatsType, Tabs } from 'features/MatchSidePlaylists/components/TabStats/config'
+import { StatsType, Tabs as StatsTabs } from 'features/MatchSidePlaylists/components/TabStats/config'
+import { Tabs } from 'features/MatchSidePlaylists/config'
+
 import { useToggle } from 'hooks'
 
+type HandlePlaylistClickArgs = {
+  playlist: PlaylistOption,
+  tab: Tabs,
+}
+
 type UseStatsTabArgs = {
   disablePlayingEpisodes: () => void,
-  handlePlaylistClick: (playlist: PlaylistOption) => void,
+  handlePlaylistClick: (args: HandlePlaylistClickArgs) => void,
   matchProfile: MatchInfo,
   selectedPlaylist?: PlaylistOption,
 }
@@ -52,11 +59,11 @@ export const useStatsTab = ({
   const [isTeamsStatsFetching, setIsTeamsStatsFetching] = useState(false)
   const [stateEpisodesToPlay, setEpisodesToPlay] = useState<Array<EventPlaylistOption>>([])
   const [filteredEvents, setFilteredEvents] = useState<Events>([])
-  const [plaingOrder, setPlaingOrder] = useState(0)
+  const [playingOrder, setPlaingOrder] = useState(0)
   const [isPlayFilterEpisodes, setIsPlayingFiltersEpisodes] = useState(false)
   const [watchAllEpisodesTimer, setWatchAllEpisodesTimer] = useState(false)
   const [circleAnimation, setCircleAnimation] = useState<TCircleAnimation>(initialCircleAnimation)
-  const [selectedStatsTable, setSelectedStatsTable] = useState<Tabs>(Tabs.TEAMS)
+  const [selectedStatsTable, setSelectedStatsTable] = useState<StatsTabs>(StatsTabs.TEAMS)
 
   const {
     close: reduceTable,
@@ -92,7 +99,7 @@ export const useStatsTab = ({
     episodesToPlay = stateEpisodesToPlay,
     order,
   }: PlayNextEpisodeArgs = {}) => {
-    const currentOrder = order === 0 ? order : plaingOrder
+    const currentOrder = order === 0 ? order : playingOrder
     const isLastEpisode = currentOrder === episodesToPlay.length
 
     if (isLastEpisode) {
@@ -103,7 +110,10 @@ export const useStatsTab = ({
     }
 
     if (currentOrder !== 0) {
-      handlePlaylistClick(episodesToPlay[currentOrder])
+      handlePlaylistClick({
+        playlist: episodesToPlay[currentOrder],
+        tab: Tabs.STATS,
+      })
     }
 
     setPlaingOrder(currentOrder + 1)
@@ -120,7 +130,10 @@ export const useStatsTab = ({
     setWatchAllEpisodesTimer(true)
     setIsPlayingFiltersEpisodes(true)
 
-    handlePlaylistClick(episodesToPlay[0])
+    handlePlaylistClick({
+      playlist: episodesToPlay[0],
+      tab: Tabs.STATS,
+    })
     playNextEpisode({ episodesToPlay, order: 0 })
   }
 
@@ -137,9 +150,9 @@ export const useStatsTab = ({
     isPlayFilterEpisodes,
     isPlayersStatsFetching,
     isTeamsStatsFetching,
-    plaingOrder,
     playEpisodes,
     playNextEpisode,
+    playingOrder,
     reduceTable,
     selectedStatsTable,
     setCircleAnimation,

src/features/MatchPage/types.tsx

@@ -17,6 +17,7 @@ export type MatchPlaylistOption = {
   episodes: Episodes,
   id: MatchPlaylistIds,
   lexic: number | string,
+  tab?: Tabs,
   type: PlaylistTypes.MATCH,
 }
 
@@ -29,6 +30,7 @@ export type PlayerPlaylistOption = {
   name_rus: string,
   num: string,
   start?: boolean,
+  tab?: Tabs,
   type: PlaylistTypes.PLAYER,
 }
 
@@ -37,6 +39,7 @@ export type InterviewPlaylistOption = {
   id: number,
   name_eng: string,
   name_rus: string,
+  tab?: Tabs,
   type: PlaylistTypes.INTERVIEW,
 }
 

src/features/MatchSidePlaylists/components/EventsList/index.tsx

@@ -1,5 +1,7 @@
+import { useEffect } from 'react'
+
 import map from 'lodash/map'
-// import find from 'lodash/find'
+import find from 'lodash/find'
 
 import type { Events, MatchInfo } from 'requests'
 
@@ -12,9 +14,9 @@ import type {
 } from 'features/MatchPage/types'
 import { PlaylistTypes } from 'features/MatchPage/types'
 
-// import { useMatchPageStore } from 'features/MatchPage/store'
+import { useMatchPageStore } from 'features/MatchPage/store'
-// import { useLexicsStore } from 'features/LexicsStore'
+import { useLexicsStore } from 'features/LexicsStore'
-// import { Tabs } from 'features/MatchSidePlaylists/config'
+import { Tabs } from 'features/MatchSidePlaylists/config'
 
 import { isEqual } from '../../helpers'
 import { EventButton } from '../EventButton'
@@ -41,7 +43,46 @@ export const EventsList = ({
   profile,
   selectedPlaylist,
   setWatchAllEpisodesTimer,
-}: Props) => (
+}: Props) => {
+  const {
+    filteredEvents,
+    isPlayingEpisode,
+    selectedTab,
+    setEpisodeInfo,
+  } = useMatchPageStore()
+  const { suffix, translate } = useLexicsStore()
+
+  useEffect(() => {
+    if (selectedPlaylist?.tab === Tabs.EVENTS && isPlayingEpisode) {
+      const {
+        e,
+        h,
+        s,
+      } = selectedPlaylist.episodes[0]
+
+      const event = find(events, {
+        e,
+        h,
+        s,
+      })
+
+      if (event) {
+        const playerName = event.pl?.[`name_${suffix}`]
+        const teamName = event.t === profile?.team1.id
+          ? profile?.team1[`name_${suffix}`]
+          : profile?.team2[`name_${suffix}`]
+
+        setEpisodeInfo({
+          episodesCount: filteredEvents.length,
+          paramName: translate(event.l),
+          playerOrTeamName: playerName || teamName || '',
+        })
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isPlayingEpisode, selectedPlaylist, suffix])
+
+  return (
     <List>
       {map(events, (event) => {
         if (!event.t && !event.pl) {
@@ -79,23 +120,15 @@ export const EventsList = ({
           if (disablePlayingEpisodes) {
             disablePlayingEpisodes()
           }
-
-        // const playerName = event.pl?.[`name_${suffix}`]
-        // const teamName = event.t === profile?.team1.id
-        //   ? profile?.team1[`name_${suffix}`]
-        //   : profile?.team2[`name_${suffix}`]
-
-        // setEpisodeInfo({
-        //   paramName: translate(event.l),
-        //   paramValue: filteredEvents.length,
-        //   playerOrTeamName: playerName || teamName || '',
-        // })
         }
 
+        const active = isEqual(eventPlaylist, selectedPlaylist)
+          && selectedPlaylist?.tab === selectedTab
+
         return (
           <Event key={event.n}>
             <EventButton
-            active={isEqual(eventPlaylist, selectedPlaylist)}
+              active={active}
               event={event}
               isHomeTeam={isHomeTeam}
               onClick={eventClick}
@@ -105,4 +138,5 @@ export const EventsList = ({
         )
       })}
     </List>
-)
+  )
+}

src/features/MatchSidePlaylists/components/MatchPlaylists/index.tsx

@@ -6,12 +6,18 @@ import styled, { css } from 'styled-components/macro'
 import isEmpty from 'lodash/isEmpty'
 import map from 'lodash/map'
 
-import { isMobileDevice } from 'config/userAgent'
+import { isMobileDevice } from 'config'
 
-import type { MatchPlaylistOptions, PlaylistOption } from 'features/MatchPage/types'
+import type {
+  MatchPlaylistOption,
+  MatchPlaylistOptions,
+  PlaylistOption,
+} from 'features/MatchPage/types'
 import { FULL_GAME_KEY } from 'features/MatchPage/helpers/buildPlaylists'
 import { isEqual } from 'features/MatchSidePlaylists/helpers'
 import { T9n } from 'features/T9n'
+import { useMatchPageStore } from 'features/MatchPage/store'
+import { useLexicsStore } from 'features/LexicsStore'
 
 import { PlayButton } from '../PlayButton'
 
@@ -54,7 +60,21 @@ export const MatchPlaylists = forwardRef(
       selectedMathPlaylist,
     }: Props,
     ref: ForwardedRef<HTMLUListElement>,
-  ) => (
+  ) => {
+    const { setEpisodeInfo } = useMatchPageStore()
+    const { translate } = useLexicsStore()
+
+    const handleButtonClick = (playlist: MatchPlaylistOption) => {
+      onSelect?.(playlist)
+
+      if (playlist.id === FULL_GAME_KEY) return
+
+      setEpisodeInfo({
+        paramName: translate(playlist.lexic),
+      })
+    }
+
+    return (
       <List ref={ref}>
         {
           map(playlists, (playlist) => (
@@ -67,7 +87,7 @@ export const MatchPlaylists = forwardRef(
                 active={isEqual(playlist, selectedMathPlaylist)}
                 live={live}
                 disabled={playlist.id !== FULL_GAME_KEY && isEmpty(playlist.episodes)}
-              onClick={() => onSelect?.(playlist)}
+                onClick={() => handleButtonClick(playlist)}
               >
                 <T9n t={playlist.lexic} />
               </PlayButton>
@@ -75,5 +95,6 @@ export const MatchPlaylists = forwardRef(
           ))
         }
       </List>
-  ),
+    )
+  },
 )

src/features/MatchSidePlaylists/components/PlayersPlaylists/index.tsx

@@ -15,6 +15,8 @@ import type {
 } from 'features/MatchPage/types'
 
 import { Name } from 'features/Name'
+import { useMatchPageStore } from 'features/MatchPage/store'
+import { useLexicsStore } from 'features/LexicsStore'
 
 import { isEqual } from '../../helpers'
 
@@ -52,6 +54,15 @@ export const PlayersPlaylists = ({
 }: Props) => {
   const { sportType } = usePageParams()
   const [selectedTeam, setSelectedTeam] = useState(Teams.TEAM1)
+  const { setEpisodeInfo } = useMatchPageStore()
+  const { suffix } = useLexicsStore()
+
+  const handleButtonClick = (player: PlayerPlaylistOption) => {
+    onSelect(player)
+    setEpisodeInfo({
+      playerOrTeamName: player[`name_${suffix}`],
+    })
+  }
 
   if (!profile) return null
 
@@ -80,7 +91,7 @@ export const PlayersPlaylists = ({
               <PlayButton
                 active={isEqual(player, selectedMathPlaylist)}
                 duration={player.dur}
-                onClick={() => onSelect(player)}
+                onClick={() => handleButtonClick(player)}
                 leftContent={(
                   <PlayerAvatar
                     id={player.id}

src/features/MatchSidePlaylists/components/PlayersTable/hooks/index.tsx

@@ -13,7 +13,7 @@ export const usePlayersTable = ({ teamId }: PlayersTableProps) => {
     paramId: null,
   })
 
-  const { plaingOrder, setCircleAnimation } = useMatchPageStore()
+  const { playingOrder, setCircleAnimation } = useMatchPageStore()
 
   const {
     getPlayerName,
@@ -47,9 +47,9 @@ export const usePlayersTable = ({ teamId }: PlayersTableProps) => {
   useEffect(() => {
     setCircleAnimation((state) => ({
       ...state,
-      plaingOrder,
+      playingOrder,
     }))
-  }, [setCircleAnimation, plaingOrder])
+  }, [setCircleAnimation, playingOrder])
 
   return {
     containerRef,

src/features/MatchSidePlaylists/components/PlayersTable/hooks/useTable.tsx

@@ -197,8 +197,8 @@ export const useTable = ({
 
       playStatsEpisodes(events)
       setEpisodeInfo({
+        episodesCount: param.val!,
         paramName: translate(param.lexic),
-        paramValue: param.val!,
         playerOrTeamName: getPlayerName(player),
       })
     // eslint-disable-next-line no-empty

src/features/MatchSidePlaylists/components/TabEvents/index.tsx

@@ -47,8 +47,8 @@ export const TabEvents = ({
     isLiveMatch,
     likeImage,
     likeToggle,
-    plaingOrder,
     playEpisodes,
+    playingOrder,
     reversedGroupEvents,
     setCircleAnimation,
     setReversed,
@@ -61,9 +61,9 @@ export const TabEvents = ({
   useEffect(() => {
     setCircleAnimation((state) => ({
       ...state,
-      plaingOrder,
+      playingOrder,
     }))
-  }, [setCircleAnimation, plaingOrder])
+  }, [setCircleAnimation, playingOrder])
 
   if (!profile) return null
 

src/features/MatchSidePlaylists/components/TeamsStatsTable/Cell.tsx

@@ -102,8 +102,8 @@ export const Cell = ({
 
       playStatsEpisodes(events)
       setEpisodeInfo({
+        episodesCount: param.val!,
         paramName,
-        paramValue: param.val!,
         playerOrTeamName: teamId === profile?.team1.id
           ? profile.team1[`name_${suffix}`]
           : profile?.team2[`name_${suffix}`] || '',

src/features/MatchSidePlaylists/components/TeamsStatsTable/hooks.tsx

@@ -7,7 +7,7 @@ import { useMatchPageStore } from 'features/MatchPage/store'
 export const useTeamsStatsTable = () => {
   const {
     getFirstClickableParam,
-    plaingOrder,
+    playingOrder,
     profile,
     setCircleAnimation,
     teamsStats,
@@ -22,9 +22,9 @@ export const useTeamsStatsTable = () => {
   useEffect(() => {
     setCircleAnimation((state) => ({
       ...state,
-      plaingOrder,
+      playingOrder,
     }))
-  }, [setCircleAnimation, plaingOrder])
+  }, [setCircleAnimation, playingOrder])
 
   return {
     firstClickableParam: getFirstClickableParam(teamsStats),

src/features/MultiSourcePlayer/hooks/index.tsx

@@ -91,7 +91,7 @@ export const useMultiSourcePlayer = ({
     isPlayFilterEpisodes,
     isPlayingEpisode,
     matchPlaylists,
-    plaingOrder,
+    playingOrder,
     playingProgress,
     playNextEpisode,
     selectedPlaylist,
@@ -245,6 +245,7 @@ export const useMultiSourcePlayer = ({
 
   const backToPausedTime = useCallback(() => {
     if (selectedPlaylist?.id !== FULL_GAME_KEY) {
+      // @ts-expect-error
       handlePlaylistClick(matchPlaylists.match[0])
     }
 
@@ -273,9 +274,24 @@ export const useMultiSourcePlayer = ({
     setPlayerState({ playing: false })
   }
 
+  const restartVideo = () => {
+    // @ts-expect-error
+    handlePlaylistClick(matchPlaylists.match[0])
+  }
+
   const stopPlayingEpisodes = () => {
     disablePlayingEpisodes()
-    backToPausedTime()
+    restartVideo()
+    setTimeout(() => {
+      setPlayerState((state) => ({
+        activeChapterIndex: pausedData.activeChapterIndex,
+        playedProgress: pausedData.playedProgress,
+        seek: {
+          ...state.seek,
+          [pausedData.activePlayer]: pausedData.playedProgress / 1000,
+        },
+      }))
+    }, 1000)
   }
 
   useEffect(() => {
@@ -414,18 +430,18 @@ export const useMultiSourcePlayer = ({
         elem[1] + 1,
       ))
 
-      if (index !== -1 && ordersObj.current[plaingOrder] !== index) {
+      if (index !== -1 && ordersObj.current[playingOrder] !== index) {
         ordersObj.current = {
           ...ordersObj.current,
-          [plaingOrder]: index,
+          [playingOrder]: index,
         }
       }
 
-      return plaingOrder + sum(values(ordersObj.current))
+      return playingOrder + sum(values(ordersObj.current))
     }
 
     setCurrentPlayingOrder(getCurrentPlayingOrder())
-  }, [getActiveChapter, isPlayingEpisode, plaingOrder, playingProgress])
+  }, [getActiveChapter, isPlayingEpisode, playingOrder, playingProgress])
 
   useEffect(() => {
     if (!isPlayingEpisode) {

src/features/MultiSourcePlayer/index.tsx

@@ -117,16 +117,18 @@ export const MultiSourcePlayer = (props: Props) => {
             {isMobileDevice
               ? (
                 <Fragment>
-                  {episodeInfo.playerOrTeamName} <br /> {episodeInfo.paramName}
+                  {episodeInfo.playerOrTeamName}
+                  {episodeInfo.playerOrTeamName && <br />}
+                  {episodeInfo.paramName}
                 </Fragment>
               )
-              : `${episodeInfo.playerOrTeamName}${episodeInfo.playerOrTeamName ? ' - ' : ''}${episodeInfo.paramName}`}
+              : `${episodeInfo.playerOrTeamName || ''}${episodeInfo.paramName && episodeInfo.playerOrTeamName ? ' - ' : ''}${episodeInfo.paramName || ''}`}
           </EpisodeInfoName>
           {currentPlayingOrder > 0 && (
             <EpisodeInfoOrder>
               {currentPlayingOrder}
               <EpisodeInfoDivider>/</EpisodeInfoDivider>
-              {episodeInfo.paramValue}
+              {episodeInfo.episodesCount}
             </EpisodeInfoOrder>
           )}
           <CloseButton onClick={stopPlayingEpisodes} />

src/features/StreamPlayer/hooks/index.tsx

@@ -109,12 +109,12 @@ export const useVideoPlayer = ({
     isPlayFilterEpisodes,
     isPlayingEpisode,
     matchPlaylists,
+    playingOrder,
     playingProgress,
     playNextEpisode,
     selectedPlaylist,
     setCircleAnimation,
     setPlayingProgress,
-    statsPlaingOrder,
   } = useMatchPageStore()
 
   const { isOpen } = useTour()
@@ -142,7 +142,7 @@ export const useVideoPlayer = ({
   // временно закоментил, если ничего не сломается, удалю
   // const [isLivePlaying, setIsLivePlaying] = useState(false)
   const [isPausedTime, setIsPausedTime] = useState(false)
-  const [pausedProgress, setPausedProgress] = useState(0)
+  const pausedProgress = useRef(0)
 
   const getActiveChapter = useCallback(
     (index: number = activeChapterIndex) => chapters[index],
@@ -173,18 +173,18 @@ export const useVideoPlayer = ({
         elem[1] + 1,
       ))
 
-      if (index !== -1 && ordersObj.current[statsPlaingOrder] !== index) {
+      if (index !== -1 && ordersObj.current[playingOrder] !== index) {
         ordersObj.current = {
           ...ordersObj.current,
-          [statsPlaingOrder]: index,
+          [playingOrder]: index,
         }
       }
 
-      return statsPlaingOrder + sum(values(ordersObj.current))
+      return playingOrder + sum(values(ordersObj.current))
     }
 
     setCurrentPlayingOrder(getCurrentPlayingOrder())
-  }, [getActiveChapter, isPlayingEpisode, statsPlaingOrder, playingProgress])
+  }, [getActiveChapter, isPlayingEpisode, playingOrder, playingProgress])
 
   useEffect(() => {
     if (!isPlayingEpisode) {
@@ -342,7 +342,8 @@ export const useVideoPlayer = ({
     }
 
     const liveProgressMs = Math.max(duration - BUFFERING_TIME, 0)
-    setPlayerState({ playedProgress: pausedProgress, seek: pausedProgress / 1000 })
+
+    setPlayerState({ playedProgress: pausedProgress.current, seek: pausedProgress.current / 1000 })
     if (liveProgressMs > 0) setIsPausedTime(false)
     // eslint-disable-next-line
   }, [
@@ -355,12 +356,18 @@ export const useVideoPlayer = ({
 
   const stopPlayingEpisodes = () => {
     disablePlayingEpisodes()
-    backToPausedTime()
+    restartVideo()
+    setTimeout(() => {
+      setPlayerState({
+        playedProgress: pausedProgress.current,
+        seek: pausedProgress.current / 1000,
+      })
+    }, 100)
   }
 
   useEffect(() => {
     if (chapters[0]?.isFullMatchChapter) {
-      setPausedProgress(playedProgress + chapters[0].startOffsetMs)
+      pausedProgress.current = playedProgress + chapters[0].startOffsetMs
     }
     // eslint-disable-next-line
   }, [selectedPlaylist])

src/features/StreamPlayer/index.tsx

@@ -126,16 +126,18 @@ export const StreamPlayer = (props: Props) => {
             {isMobileDevice
               ? (
                 <Fragment>
-                  {episodeInfo.playerOrTeamName} <br /> {episodeInfo.paramName}
+                  {episodeInfo.playerOrTeamName}
+                  {episodeInfo.playerOrTeamName && <br />}
+                  {episodeInfo.paramName}
                 </Fragment>
               )
-              : `${episodeInfo.playerOrTeamName}${episodeInfo.playerOrTeamName ? ' - ' : ''}${episodeInfo.paramName}`}
+              : `${episodeInfo.playerOrTeamName || ''}${episodeInfo.paramName && episodeInfo.playerOrTeamName ? ' - ' : ''}${episodeInfo.paramName || ''}`}
           </EpisodeInfoName>
           {currentPlayingOrder > 0 && (
             <EpisodeInfoOrder>
               {currentPlayingOrder}
               <EpisodeInfoDivider />
-              {episodeInfo.paramValue}
+              {episodeInfo.episodesCount}
             </EpisodeInfoOrder>
           )}
           <CloseButton onClick={stopPlayingEpisodes} />

src/features/StreamPlayer/styled.tsx

@@ -406,7 +406,7 @@ export const Next = styled(Prev)`
 
 export const TeamsDetailsWrapper = styled.div`
   position: absolute;
-  top: 20px;
+  top: 40px;
   left: 15px;
   font-size: 16px;
   color: #FFFFFF;
@@ -434,8 +434,10 @@ export const EpisodeInfo = styled.div`
   display: flex;
   align-items: center;
   gap: max(0.755rem, 12px);
+  padding: 2px;
   font-weight: 600;
   color: ${({ theme }) => theme.colors.white};
+  background-color: rgba(0, 0, 0, 0.3);
   z-index: 1;
 `