switch to BEM naming pattern

ui/js/component/video/internal/loading-screen.jsx

@@ -1,11 +1,11 @@
 import React from "react";
 
 const LoadingScreen = ({ status }) =>
-  <div className="video--loading--screen">
-    <div className="loading--screen--content">
-      <div className="loading--spinner" />
+  <div className="video--loading-screen">
+    <div className="video--loading-screen-content">
+      <div className="video--loading-spinner" />
 
-      <div className="video--loading--status">
+      <div className="video--loading-status">
         {status}
       </div>
     </div>

ui/scss/component/_video.scss

@@ -28,14 +28,21 @@ video {
     /*background: none;*/
   }
 
-  .video--loading--screen {
+  .plyr {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}
+
+
+.video--loading-screen {
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
+}
 
-    .loading--screen--content {
-      .loading--spinner {
+.video--loading-spinner {
   position: relative;
   width: 11em;
   height: 11em;
@@ -80,20 +87,11 @@ video {
     background: black;
     border-radius: 50%;
   }
-      }
+}
 
-
-      .video--loading--status {
+.video--loading-status {
   padding-top: 20px;
   color: white;
-      }
-    }
-  }
-
-  .plyr {
-    top: 50%;
-    transform: translateY(-50%);
-  }
 }
 
 .video__cover {