@oat-sa/tao-core-ui 3.18.3 → 3.18.5

package/dist/mediaplayer.js

@@ -352,12 +352,16 @@ define(['jquery', 'lodash', 'async', 'util/urlParser', 'core/dataProvider/reques
           this._playingState(false, true);
           this._initPlayer();
           this._initSize();
-
-          // Resize for old items with defined height to avoid big jump
-          if (this.config.height && this.config.height !== 'auto') {
-            this.resize('100%', 'auto');
+          if ($$1('body').hasClass('item-writing-mode-vertical-rl')) {
+            // Change size axis for vertical writing view mode
+            this.resize(this.config.height, this.config.width);
           } else {
-            this.resize(this.config.width, this.config.height);
+            // Resize for old items with defined height to avoid big jump
+            if (this.config.height && this.config.height !== 'auto') {
+              this.resize('100%', 'auto');
+            } else {
+              this.resize(this.config.width, this.config.height);
+            }
           }
           this.config.is.rendered = true;
           if (renderTo) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@oat-sa/tao-core-ui",
-    "version": "3.18.3",
+    "version": "3.18.5",
     "displayName": "TAO Core UI",
     "description": "UI libraries of TAO",
     "scripts": {

package/scss/inc/_base.scss

@@ -593,13 +593,26 @@ body {
         writing-mode: vertical-rl;
     }
 
-    .qti-item .qti-itemBody.writing-mode-vertical-rl {
-        hr {
-            height: 100%;
-            max-height: 100%;
-            margin: 0 12px;
-            border: none;
-            border-right: 1px solid #8c8c8c;
+    .qti-item .qti-itemBody {
+        .writing-mode-vertical-rl,
+        &.writing-mode-vertical-rl {
+            hr {
+                height: 100%;
+                max-height: 100%;
+                margin: 0 12px;
+                border: none;
+                border-right: 1px solid #8c8c8c;
+            }
+        }
+        .writing-mode-horizontal-tb,
+        &.writing-mode-horizontal-tb {
+            hr {
+                height: 1px;
+                max-height: 1px;
+                margin: 12px 0;
+                border: none;
+                border-top: 1px solid #8c8c8c;
+            }
         }
     }
 
@@ -689,6 +702,8 @@ body {
     .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) {
         writing-mode: horizontal-tb;
         direction: rtl;
+        height: 100%;
+        width: auto;
 
         .mediaplayer .controls {
             display: inline-block;

package/src/css/basic.css

@@ -1534,13 +1534,20 @@ html .writing-mode-horizontal-tb {
 html .writing-mode-vertical-rl {
   writing-mode: vertical-rl;
 }
-html .qti-item .qti-itemBody.writing-mode-vertical-rl hr {
+html .qti-item .qti-itemBody .writing-mode-vertical-rl hr, html .qti-item .qti-itemBody.writing-mode-vertical-rl hr {
   height: 100%;
   max-height: 100%;
   margin: 0 12px;
   border: none;
   border-right: 1px solid #8c8c8c;
 }
+html .qti-item .qti-itemBody .writing-mode-horizontal-tb hr, html .qti-item .qti-itemBody.writing-mode-horizontal-tb hr {
+  height: 1px;
+  max-height: 1px;
+  margin: 12px 0;
+  border: none;
+  border-top: 1px solid #8c8c8c;
+}
 html .writing-mode-vertical-rl .txt-subscript {
   inset-block-start: -0.9em;
   bottom: 0;
@@ -1644,6 +1651,8 @@ html .qti-item .writing-mode-vertical-rl .media-container,
 html .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) {
   writing-mode: horizontal-tb;
   direction: rtl;
+  height: 100%;
+  width: auto;
 }
 html .qti-item .writing-mode-vertical-rl .media-container .mediaplayer .controls,
 html .qti-item .writing-mode-vertical-rl .qti-object-container.previewer:has(.mediaplayer) .mediaplayer .controls {