radames commited on
Commit
3d4c901
1 Parent(s): 96a3fa5

add content warning

Browse files
frontend/package.json CHANGED
@@ -47,6 +47,7 @@
47
  "d3-drag": "^3.0.0",
48
  "d3-selection": "^3.0.0",
49
  "d3-zoom": "^3.0.0",
 
50
  "nanoid": "^4.0.0"
51
  }
52
  }
 
47
  "d3-drag": "^3.0.0",
48
  "d3-selection": "^3.0.0",
49
  "d3-zoom": "^3.0.0",
50
+ "js-cookie": "^3.0.1",
51
  "nanoid": "^4.0.0"
52
  }
53
  }
frontend/src/lib/ContentWarningModal.svelte ADDED
@@ -0,0 +1,34 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ import { createEventDispatcher, onMount } from 'svelte';
3
+
4
+ const dispatch = createEventDispatcher();
5
+
6
+ let okButton: HTMLButtonElement;
7
+
8
+ onMount(() => {
9
+ okButton.focus();
10
+ });
11
+ </script>
12
+
13
+ <form
14
+ class="fixed w-screen top-0 left-0 bottom-0 right-0 h-screen z-50 flex items-center justify-center bg-black bg-opacity-80"
15
+ >
16
+ <div
17
+ class="text-center p-3 m-3 bg-white overflow-hidden rounded-2xl w-full max-w-lg 2xl:max-w-xl"
18
+ >
19
+ <h3
20
+ class="font-semibold text-black text-base 2xl:text-2xl spacing tracking-wide hover:saturate-150 mb-3"
21
+ >
22
+ Since the project is an open interactive art canvas, you may encounter some disturbing and
23
+ potentially NSFW content in the rooms.
24
+ </h3>
25
+
26
+ <button
27
+ bind:this={okButton}
28
+ on:click={() => dispatch('contentModal')}
29
+ class="font-semibold bg-blue-700 text-white rounded-lg px-5 text-xl 2xl:text-2xl spacing tracking-wide hover:saturate-150"
30
+ title="Input prompt to generate image and negative prompt inside brackets <NEGATIVE PROMPT>"
31
+ >OK
32
+ </button>
33
+ </div>
34
+ </form>
frontend/src/routes/+page.svelte CHANGED
@@ -4,6 +4,7 @@
4
  import type { Client } from '@liveblocks/client';
5
  import LiveblocksProvider from '$lib/liveblocks/LiveblocksProvider.svelte';
6
  import RoomProvider from '$lib/liveblocks/RoomProvider.svelte';
 
7
  import App from '$lib/App.svelte';
8
  import About from '$lib/About.svelte';
9
  import { PUBLIC_API_BASE } from '$env/static/public';
@@ -11,9 +12,11 @@
11
  import type { RoomResponse } from '$lib/types';
12
  import { MAX_CAPACITY, FRAME_SIZE } from '$lib/constants';
13
  import { Status } from '$lib/types';
 
14
 
15
  let loading = true;
16
  let client: Client;
 
17
 
18
  $: roomId = $selectedRoomID;
19
 
@@ -33,8 +36,19 @@
33
  });
34
 
35
  updateRooms();
 
 
 
 
 
 
36
  });
37
 
 
 
 
 
 
38
  async function updateRooms() {
39
  loading = true;
40
  const roomidParam = new URLSearchParams(window.location.search).get('roomid');
@@ -79,6 +93,9 @@
79
  };
80
  </script>
81
 
 
 
 
82
  <About classList={$toggleAbout ? 'flex' : 'hidden'} on:click={() => ($toggleAbout = false)} />
83
 
84
  {#if loading}
 
4
  import type { Client } from '@liveblocks/client';
5
  import LiveblocksProvider from '$lib/liveblocks/LiveblocksProvider.svelte';
6
  import RoomProvider from '$lib/liveblocks/RoomProvider.svelte';
7
+ import ContentWarningModal from '$lib/ContentWarningModal.svelte';
8
  import App from '$lib/App.svelte';
9
  import About from '$lib/About.svelte';
10
  import { PUBLIC_API_BASE } from '$env/static/public';
 
12
  import type { RoomResponse } from '$lib/types';
13
  import { MAX_CAPACITY, FRAME_SIZE } from '$lib/constants';
14
  import { Status } from '$lib/types';
15
+ import Cookies from 'js-cookie';
16
 
17
  let loading = true;
18
  let client: Client;
19
+ let hideContentModal = true;
20
 
21
  $: roomId = $selectedRoomID;
22
 
 
36
  });
37
 
38
  updateRooms();
39
+
40
+ const accepted = Cookies.get('acceptedContentWarning');
41
+ hideContentModal = false;
42
+ if (accepted) {
43
+ hideContentModal = true;
44
+ }
45
  });
46
 
47
+ function contentModal() {
48
+ hideContentModal = true;
49
+ Cookies.set('acceptedContentWarning', 'true', { expires: 10 });
50
+ }
51
+
52
  async function updateRooms() {
53
  loading = true;
54
  const roomidParam = new URLSearchParams(window.location.search).get('roomid');
 
93
  };
94
  </script>
95
 
96
+ {#if !hideContentModal}
97
+ <ContentWarningModal on:contentModal={() => contentModal()} />
98
+ {/if}
99
  <About classList={$toggleAbout ? 'flex' : 'hidden'} on:click={() => ($toggleAbout = false)} />
100
 
101
  {#if loading}