Add configurable stage direction styling

.github/workflows/pylint.yml

@@ -1,9 +1,10 @@
-name: Pylint
+name: Python Linting and Formatting
 
 on: [push]
 
 jobs:
-  build:
+  pylint:
+    name: Pylint
     runs-on: ubuntu-latest
     defaults:
       run:
@@ -12,15 +13,61 @@ jobs:
       matrix:
         python-version: ["3.10"]
     steps:
-    - uses: actions/checkout@v3
-    - name: Set up Python ${{ matrix.python-version }}
-      uses: actions/setup-python@v4
-      with:
-        python-version: ${{ matrix.python-version }}
-    - name: Install dependencies
-      run: |
-        python -m pip install --upgrade pip
-        pip install -r requirements.txt
-    - name: Analysing the code with pylint
-      run: |
-        pylint-ignore $(git ls-files '*.py')
+      - uses: actions/checkout@v3
+      - name: Set up Python ${{ matrix.python-version }}
+        uses: actions/setup-python@v4
+        with:
+          python-version: ${{ matrix.python-version }}
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install -r requirements.txt
+      - name: Analysing the code with pylint
+        run: |
+          pylint-ignore $(git ls-files '*.py')
+
+  black:
+    name: Black
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./server
+    strategy:
+      matrix:
+        python-version: ["3.10"]
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Python ${{ matrix.python-version }}
+        uses: actions/setup-python@v4
+        with:
+          python-version: ${{ matrix.python-version }}
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install black
+      - name: Check code formatting with black
+        run: |
+          black --check $(git ls-files '*.py')
+
+  isort:
+    name: isort
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./server
+    strategy:
+      matrix:
+        python-version: ["3.10"]
+    steps:
+      - uses: actions/checkout@v3
+      - name: Set up Python ${{ matrix.python-version }}
+        uses: actions/setup-python@v4
+        with:
+          python-version: ${{ matrix.python-version }}
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install isort
+      - name: Check import sorting with isort
+        run: |
+          isort --check $(git ls-files '*.py') --profile=black

client/package.json

@@ -34,6 +34,7 @@
     "@babel/core": "7.26.10",
     "@babel/eslint-parser": "7.27.0",
     "@babel/preset-env": "7.26.9",
+    "@types/vuelidate": "^0.7.22",
     "@vitejs/plugin-vue2": "2.3.3",
     "eslint": "8.57.0",
     "eslint-config-airbnb-base": "15.0.0",

client/src/main.js

@@ -64,6 +64,14 @@ Vue.filter('capitalize', (value) => {
   if (!value) return '';
   return value.toString().split(' ').map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
 });
+Vue.filter('uppercase', (value) => {
+  if (!value) return '';
+  return value.toString().toUpperCase();
+});
+Vue.filter('lowercase', (value) => {
+  if (!value) return '';
+  return value.toString().toLowerCase();
+});
 
 new Vue({
   router,

client/src/store/modules/script.js

@@ -10,6 +10,7 @@ export default {
     script: {},
     cues: {},
     cuts: [],
+    stageDirectionStyles: [],
   },
   mutations: {
     SET_REVISIONS(state, revisions) {
@@ -27,6 +28,9 @@ export default {
     SET_CUTS(state, cuts) {
       state.cuts = cuts;
     },
+    SET_STAGE_DIRECTION_STYLES(state, styles) {
+      state.stageDirectionStyles = styles;
+    },
   },
   actions: {
     async GET_SCRIPT_REVISIONS(context) {
@@ -216,6 +220,68 @@ export default {
         Vue.$toast.error('Unable to save script cuts');
       }
     },
+    async GET_STAGE_DIRECTION_STYLES(context) {
+      const response = await fetch(`${makeURL('/api/v1/show/script/stage_direction_styles')}`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+      if (response.ok) {
+        const respJson = await response.json();
+        context.commit('SET_STAGE_DIRECTION_STYLES', respJson.styles);
+      } else {
+        log.error('Unable to load stage direction styles');
+      }
+    },
+    async ADD_STAGE_DIRECTION_STYLE(context, style) {
+      const response = await fetch(`${makeURL('/api/v1/show/script/stage_direction_styles')}`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(style),
+      });
+      if (response.ok) {
+        context.dispatch('GET_STAGE_DIRECTION_STYLES');
+        Vue.$toast.success('Added new stage direction style!');
+      } else {
+        log.error('Unable to add new stage direction style');
+        Vue.$toast.error('Unable to add new stage direction style');
+      }
+    },
+    async DELETE_STAGE_DIRECTION_STYLE(context, styleId) {
+      const response = await fetch(`${makeURL('/api/v1/show/script/stage_direction_styles')}`, {
+        method: 'DELETE',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ id: styleId }),
+      });
+      if (response.ok) {
+        context.dispatch('GET_STAGE_DIRECTION_STYLES');
+        Vue.$toast.success('Deleted stage direction style!');
+      } else {
+        log.error('Unable to delete stage direction style');
+        Vue.$toast.error('Unable to delete stage direction style');
+      }
+    },
+    async UPDATE_STAGE_DIRECTION_STYLE(context, style) {
+      const response = await fetch(`${makeURL('/api/v1/show/script/stage_direction_styles')}`, {
+        method: 'PATCH',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(style),
+      });
+      if (response.ok) {
+        context.dispatch('GET_STAGE_DIRECTION_STYLES');
+        Vue.$toast.success('Updated stage direction style!');
+      } else {
+        log.error('Unable to edit stage direction style');
+        Vue.$toast.error('Unable to edit stage direction style');
+      }
+    },
   },
   getters: {
     SCRIPT_REVISIONS(state) {
@@ -237,5 +303,8 @@ export default {
     SCRIPT_CUTS(state) {
       return state.cuts;
     },
+    STAGE_DIRECTION_STYLES(state) {
+      return state.stageDirectionStyles;
+    },
   },
 };

client/src/views/show/ShowLiveView.vue

@@ -73,6 +73,7 @@
               :cue-types="CUE_TYPES"
               :cues="getCuesForLine(line)"
               :cuts="SCRIPT_CUTS"
+              :stage-direction-styles="STAGE_DIRECTION_STYLES"
               @last-line-change="handleLastLineChange"
               @first-line-change="handleFirstLineChange"
             />
@@ -149,6 +150,7 @@
       await this.GET_CUE_TYPES();
       await this.LOAD_CUES();
       await this.GET_CUTS();
+      await this.GET_STAGE_DIRECTION_STYLES();
       await this.getMaxScriptPage();
 
       this.updateElapsedTime();
@@ -248,7 +250,7 @@
       const cutoffBottom = scriptContainer.offset().top + scriptContainer.outerHeight();
       const scriptSelector = $('.script-item');
 
       scriptSelector.each(function () {
         if ($(this).offset().top >= cutoffTop) {
           if (!$(this).attr('class').split(/\s+/).includes('first-script-element')) {
             scriptSelector.removeClass('first-script-element');
@@ -261,7 +263,7 @@
 
       let assignedLastScript = false;
       let lastObject = null;
       scriptSelector.each(function () {
         if (lastObject == null) {
           lastObject = this;
         } else if ($(this).offset().top > $(lastObject).offset().top
@@ -415,9 +417,9 @@
     },
     ...mapActions(['GET_SHOW_SESSION_DATA', 'LOAD_SCRIPT_PAGE', 'GET_ACT_LIST', 'GET_SCENE_LIST',
       'GET_CHARACTER_LIST', 'GET_CHARACTER_GROUP_LIST', 'LOAD_CUES', 'GET_CUE_TYPES',
-      'GET_CUTS']),
+      'GET_CUTS', 'GET_STAGE_DIRECTION_STYLES']),
   },
   computed: {
     pageIter() {
       if (this.SETTINGS.enable_live_batching) {
         return [...Array(this.currentLoadedPage).keys()].map((x) => (x + 1)).filter((x) => (
@@ -440,9 +442,9 @@
     },
     ...mapGetters(['CURRENT_SHOW_SESSION', 'GET_SCRIPT_PAGE', 'ACT_LIST', 'SCENE_LIST',
       'CHARACTER_LIST', 'CHARACTER_GROUP_LIST', 'CURRENT_SHOW', 'CUE_TYPES', 'SCRIPT_CUES',
-      'INTERNAL_UUID', 'SESSION_FOLLOW_DATA', 'SCRIPT_CUTS', 'SETTINGS']),
+      'INTERNAL_UUID', 'SESSION_FOLLOW_DATA', 'SCRIPT_CUTS', 'SETTINGS', 'STAGE_DIRECTION_STYLES']),
   },
   watch: {
     SESSION_FOLLOW_DATA() {
       if (this.isScriptFollowing) {
         let scrollToLine;

client/src/views/show/config/ConfigScript.vue

@@ -82,6 +82,9 @@
               </template>
             </b-table>
           </b-tab>
+          <b-tab title="Stage Direction Styles">
+            <stage-direction-configs />
+          </b-tab>
           <b-tab title="Script">
             <script-config />
           </b-tab>
@@ -134,10 +137,11 @@
 import { mapActions, mapGetters } from 'vuex';
 import { required } from 'vuelidate/lib/validators';
 import ScriptConfig from '@/vue_components/show/config/script/ScriptEditor.vue';
+import StageDirectionStyles from '@/vue_components/show/config/script/StageDirectionStyles.vue';
 
 export default {
   name: 'ConfigScript',
-  components: { ScriptConfig },
+  components: { ScriptConfig, StageDirectionConfigs: StageDirectionStyles },
   data() {
     return {
       revisionColumns: [