Merge pull request #6689 from simfeld/fix/uuid-polyfill

Polyfill randomUUID

Author: simfeld

frontend/src/components/activity/content/Storyboard.vue

@@ -86,6 +86,26 @@ import ApiSortable from '@/components/form/api/ApiSortable.vue'
 import { errorToMultiLineToast } from '@/components/toast/toasts'
 import StoryboardSortable from '@/components/activity/content/storyboard/StoryboardSortable.vue'
 
+// This is a very poorly implemented polyfill for crypto.randomUUID
+// which was generated by ChatGPT. It should under no circumstances
+// be used for security/cryptographic purposes. In this component it
+// serves the use case of generating unique identifiers for storyboard sections.
+// We only employ this polyfill here  because there are apparently some users
+// with ancient Safari versions lacking support for randomUUID,
+// see https://caniuse.com/mdn-api_crypto_randomuuid
+const poorUuidPolyfill = function () {
+  function randomDigit() {
+    const random = (Math.random() * 16) | 0
+    return random.toString(16)
+  }
+
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    const r = randomDigit()
+    const v = c === 'x' ? r : (r & 0x3) | 0x8
+    return v.toString(16)
+  })
+}
+
 export default {
   name: 'Storyboard',
   components: {
@@ -133,7 +153,10 @@ export default {
     async addSection() {
       this.isAdding = true
 
-      const sectionId = self.crypto.randomUUID()
+      const sectionId =
+        typeof self.crypto?.randomUUID !== 'function'
+          ? poorUuidPolyfill()
+          : self.crypto.randomUUID()
       try {
         // TODO: consider adding item to ApiSortable eagerly (should be easy, now that uuid is generated locally)
         await this.contentNode.$patch({