Release 0.21.0

Merge pull request #805 from dreamteamprod/dev

Author: Tim020

client/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "0.20.2",
+  "version": "0.21.0",
   "private": true,
   "scripts": {
     "prebuild": "scripts/copy-docs.sh && node scripts/generate-doc-manifest.js",
@@ -55,9 +55,9 @@
     "eslint-plugin-import": "2.32.0",
     "eslint-plugin-vue": "^9.27.0",
     "eslint-plugin-vuejs-accessibility": "1.2.0",
-    "jsdom": "^27.3.0",
+    "jsdom": "^27.4.0",
     "node-sass": "7.0.3",
-    "sass": "1.97.0",
+    "sass": "1.97.1",
     "sass-loader": "13.3.3",
     "vite": "4.5.5",
     "vitest": "^4.0.16"

client/package.json

@@ -0,0 +1,15 @@
+/**
+ * Script Line Type Constants
+ *
+ * These constants match the ScriptLineType enum values from the backend
+ * (models/script.py). Use these instead of magic numbers throughout the codebase.
+ */
+
+export const LINE_TYPES = {
+  DIALOGUE: 1,
+  STAGE_DIRECTION: 2,
+  CUE_LINE: 3,
+  SPACING: 4,
+};
+
+export default LINE_TYPES;

client/src/constants/lineTypes.js

@@ -0,0 +1,29 @@
+import { LINE_TYPES } from '@/constants/lineTypes';
+
+/**
+ * Determines if a script line is completely cut (all parts cut or empty).
+ *
+ * @param {Object} line - The script line object
+ * @param {Array} cuts - Array of cut line part IDs
+ * @returns {boolean} - True if the entire line is cut, false otherwise
+ */
+export function isWholeLineCut(line, cuts) {
+  // CUE_LINE can never be completely cut
+  if (line.line_type === LINE_TYPES.CUE_LINE) {
+    return false;
+  }
+
+  // SPACING lines are always considered cut
+  if (line.line_type === LINE_TYPES.SPACING) {
+    return true;
+  }
+
+  // For other line types, check if all line parts are cut or empty
+  return line.line_parts.every((linePart) => (
+    cuts.includes(linePart.id)
+    || linePart.line_text == null
+    || linePart.line_text.trim().length === 0
+  ));
+}
+
+export default { isWholeLineCut };

client/src/js/scriptUtils.js

@@ -0,0 +1,35 @@
+import { mapGetters } from 'vuex';
+import { contrastColor } from 'contrast-color';
+
+/**
+ * Shared mixin for cue display logic across live view components.
+ * Provides methods for cue color handling with user override support.
+ */
+export default {
+  computed: {
+    ...mapGetters(['CUE_COLOUR_OVERRIDES']),
+  },
+  methods: {
+    contrastColor,
+    cuePrefix(cue) {
+      const cueType = this.cueTypes.find((cT) => (cT.id === cue.cue_type_id));
+      return cueType.prefix;
+    },
+    cueLabel(cue) {
+      const cueType = this.cueTypes.find((cT) => cT.id === cue.cue_type_id);
+      return `${cueType.prefix} ${cue.ident}`;
+    },
+    cueBackgroundColour(cue) {
+      const cueType = this.cueTypes.find((ct) => ct.id === cue.cue_type_id);
+      if (!cueType) return '#000000'; // Fallback
+
+      // Check if user has an override for this cue type
+      const override = this.CUE_COLOUR_OVERRIDES.find((o) => o.settings.id === cueType.id);
+      if (override) {
+        return override.settings.colour;
+      }
+
+      return cueType.colour;
+    },
+  },
+};

client/src/mixins/cueDisplayMixin.js

@@ -0,0 +1,121 @@
+import { LINE_TYPES } from '@/constants/lineTypes';
+
+/**
+ * Shared mixin for script display presentation logic.
+ * Handles stage directions, act/scene labels, intervals, and viewport tracking.
+ *
+ * This mixin assumes the component has:
+ * - Props: line, lineIndex, previousLine, previousLineIndex, acts, scenes,
+ *          stageDirectionStyles, stageDirectionStyleOverrides
+ * - Refs: lineContainer
+ * - Methods: isWholeLineCut, getPreviousLineForIndex (from scriptNavigationMixin)
+ */
+export default {
+  data() {
+    return {
+      observer: null,
+    };
+  },
+  computed: {
+    needsActSceneLabel() {
+      let { previousLine } = this;
+      let lineIndex = this.previousLineIndex;
+      while (previousLine != null && this.isWholeLineCut(previousLine)) {
+        [lineIndex, previousLine] = this.getPreviousLineForIndex(previousLine.page, lineIndex);
+      }
+      if (previousLine == null) {
+        return true;
+      }
+      return !(previousLine.act_id === this.line.act_id
+        && previousLine.scene_id === this.line.scene_id);
+    },
+    needsIntervalBanner() {
+      let { previousLine, lineIndex } = this;
+      while (previousLine != null && this.isWholeLineCut(previousLine)) {
+        [lineIndex, previousLine] = this.getPreviousLineForIndex(previousLine.page, lineIndex);
+      }
+      if (previousLine == null) {
+        return false;
+      }
+      return previousLine.act_id !== this.line.act_id;
+    },
+    previousActLabel() {
+      return this.acts.find((act) => (act.id === this.previousLine.act_id)).name;
+    },
+    actLabel() {
+      return this.acts.find((act) => (act.id === this.line.act_id)).name;
+    },
+    sceneLabel() {
+      return this.scenes.find((scene) => (scene.id === this.line.scene_id)).name;
+    },
+    stageDirectionStyle() {
+      const sdStyle = this.stageDirectionStyles.find(
+        (style) => (style.id === this.line.stage_direction_style_id),
+      );
+      const override = this.stageDirectionStyleOverrides
+        .find((elem) => elem.settings.id === sdStyle.id);
+      if (this.line.line_type === LINE_TYPES.STAGE_DIRECTION) {
+        return override ? override.settings : sdStyle;
+      }
+      return null;
+    },
+    stageDirectionStyling() {
+      if (this.line.stage_direction_style_id == null || this.stageDirectionStyle == null) {
+        return {
+          'background-color': 'darkslateblue',
+          'font-style': 'italic',
+        };
+      }
+      const style = {
+        'font-weight': this.stageDirectionStyle.bold ? 'bold' : 'normal',
+        'font-style': this.stageDirectionStyle.italic ? 'italic' : 'normal',
+        'text-decoration-line': this.stageDirectionStyle.underline ? 'underline' : 'none',
+        color: this.stageDirectionStyle.text_colour,
+      };
+      if (this.stageDirectionStyle.enable_background_colour) {
+        style['background-color'] = this.stageDirectionStyle.background_colour;
+      }
+      return style;
+    },
+  },
+  mounted() {
+    /* eslint-disable no-restricted-syntax */
+    this.observer = new MutationObserver((mutations) => {
+      for (const m of mutations) {
+        const newValue = m.target.getAttribute(m.attributeName);
+        this.$nextTick(() => {
+          this.onClassChange(newValue, m.oldValue);
+        });
+      }
+    });
+    /* eslint-enable no-restricted-syntax */
+
+    this.observer.observe(this.$refs.lineContainer, {
+      attributes: true,
+      attributeOldValue: true,
+      attributeFilter: ['class'],
+    });
+  },
+  destroyed() {
+    this.observer.disconnect();
+  },
+  methods: {
+    onClassChange(classAttrValue, oldClassAttrValue) {
+      const classList = classAttrValue.split(' ');
+      const oldClassList = oldClassAttrValue.split(' ');
+      if (classList.includes('last-script-element') && !oldClassList.includes('last-script-element')) {
+        this.$emit('last-line-change', this.line.page, this.lineIndex);
+      }
+      if (classList.includes('first-script-element') && !oldClassList.includes('first-script-element')) {
+        let previousLine = null;
+        if (this.previousLine != null) {
+          previousLine = `page_${this.previousLine.page}_line_${this.previousLineIndex}`;
+        }
+        this.$emit('first-line-change', this.line.page, this.lineIndex, previousLine);
+      }
+    },
+    startInterval() {
+      this.$emit('start-interval', this.acts.find((act) => (act.id === this.previousLine.act_id)).id);
+    },
+  },
+};