client: fix UI not updating according to grants

client/src/components/PermissionsEditor.vue

@@ -44,9 +44,9 @@
 <script lang="ts">
 import { defineComponent, ref, Ref, PropType } from "vue";
 import _ from "lodash";
-import { granted } from "@/util/grants";
 import { PERMISSIONS, ROLE_NAMES, Permission, Grants } from "ott-common/permissions";
 import { Role } from "ott-common/models/types";
+import { useGrants } from "./composables/grants";
 
 export const PermissionsEditor = defineComponent({
 	name: "PermissionsEditor",
@@ -64,6 +64,7 @@ export const PermissionsEditor = defineComponent({
 	setup(props, { emit }) {
 		const permissions: Ref<Permission[]> = ref([]);
 		const isLoading = ref(false);
+		const granted = useGrants();
 
 		const rolePerms = {
 			[Role.Moderator]: "configure-room.set-permissions.for-moderator",

client/src/components/RoomSettingsForm.vue

@@ -155,16 +155,17 @@ import { ToastStyle } from "@/models/toast";
 import { API } from "@/common-http";
 import { Visibility, QueueMode, RoomSettings, Role, BehaviorOption } from "ott-common/models/types";
 import { Grants } from "ott-common/permissions";
-import { granted } from "@/util/grants";
 import toast from "@/util/toast";
 import { onMounted, Ref, ref } from "vue";
 import { useStore } from "@/store";
 import { useI18n } from "vue-i18n";
 import { OttApiResponseGetRoom } from "ott-common/models/rest-api";
 import { ALL_SKIP_CATEGORIES } from "ott-common/constants";
+import { useGrants } from "./composables/grants";
 
 const store = useStore();
 const { t } = useI18n();
+const granted = useGrants();
 
 const isLoadingRoomSettings = ref(false);
 const inputRoomSettings: Ref<RoomSettings> = ref<RoomSettings>({

client/src/components/UserList.vue

@@ -108,20 +108,21 @@ import { ref, inject } from "vue";
 import { API } from "@/common-http";
 import { ClientId, PlayerStatus, RoomUserInfo } from "ott-common/models/types";
 import { USERNAME_LENGTH_MAX } from "ott-common/constants";
-import { granted } from "@/util/grants";
 import { Role } from "ott-common/models/types";
 import { ROLE_NAMES } from "ott-common/permissions";
 import { useStore } from "@/store";
 import { useConnection } from "@/plugins/connection";
 import { useRoomApi } from "@/util/roomapi";
 import { canKickUser } from "ott-common/userutils";
+import { useGrants } from "./composables/grants";
 
 defineProps<{
 	users: RoomUserInfo[];
 }>();
 
 const store = useStore();
 const roomapi = useRoomApi(useConnection());
+const granted = useGrants();
 const debugMode = inject("debugMode", false);
 
 const inputUsername = ref("");

client/src/components/VideoQueue.vue

@@ -50,7 +50,7 @@
 		</div>
 		<Sortable
 			:list="store.state.room.queue"
-			:move="() => granted('manage-queue.order')"
+			@move.capture="() => granted('manage-queue.order')"
 			@end="onQueueDragDrop"
 			:options="{ animation: 200, handle: '.drag-handle' }"
 			item-key="id"
@@ -65,18 +65,19 @@
 <script lang="ts" setup>
 import { ref, computed } from "vue";
 import VideoQueueItem from "@/components/VideoQueueItem.vue";
-import { granted } from "@/util/grants";
 import { useStore } from "@/store";
 import { Sortable } from "sortablejs-vue3";
 import { useConnection } from "@/plugins/connection";
 import { useRoomApi } from "@/util/roomapi";
 import { exportQueue } from "ott-common/queueexport";
 import { useCopyFromTextbox } from "./composables";
+import { useGrants } from "./composables/grants";
 
 defineEmits(["switchtab"]);
 
 const store = useStore();
 const roomapi = useRoomApi(useConnection());
+const granted = useGrants();
 
 function onQueueDragDrop(e: { oldIndex: number; newIndex: number }) {
 	roomapi.queueMove(e.oldIndex, e.newIndex);

client/src/components/VideoQueueItem.vue

@@ -9,7 +9,11 @@
 			>
 				<span
 					class="drag-handle"
-					v-if="!isPreview && store.state.room.queueMode !== QueueMode.Vote"
+					v-if="
+						!isPreview &&
+						store.state.room.queueMode !== QueueMode.Vote &&
+						granted('manage-queue.order')
+					"
 				>
 					<v-icon>mdi-format-align-justify</v-icon>
 				</span>
@@ -163,6 +167,7 @@ import axios, { type AxiosResponse } from "axios";
 import { useRoomApi } from "@/util/roomapi";
 import { useConnection } from "@/plugins/connection";
 import type { OttResponseBody } from "ott-common/models/rest-api";
+import { useGrants } from "./composables/grants";
 
 interface VideoQueueItemProps {
 	item: QueueItem;
@@ -180,6 +185,7 @@ const { item, index } = toRefs(props);
 const store = useStore();
 const { t } = useI18n();
 const roomapi = useRoomApi(useConnection());
+const granted = useGrants();
 
 const isLoadingAdd = ref(false);
 const isLoadingVote = ref(false);

client/src/components/composables/grants.ts

@@ -0,0 +1,19 @@
+import { parseIntoGrantMask, PermissionName } from "ott-common/permissions";
+import { useStore } from "@/store";
+
+export function useGrants() {
+	const store = useStore();
+	if (!store) {
+		console.error("useGrants: No store found.");
+		return () => true;
+	}
+
+	/** Checks if the current user is granted the given permission. */
+	function granted(permission: PermissionName) {
+		const usermask = store.getters["users/grants"];
+		const permMask = parseIntoGrantMask([permission]);
+		return (usermask & permMask) > 0;
+	}
+
+	return granted;
+}

client/src/components/controls/BasicControls.vue

@@ -66,9 +66,9 @@
 <script lang="ts" setup>
 import _ from "lodash";
 import { useStore } from "@/store";
-import { granted } from "@/util/grants";
 import { useConnection } from "@/plugins/connection";
 import { useRoomApi } from "@/util/roomapi";
+import { useGrants } from "../composables/grants";
 
 const props = withDefaults(
 	defineProps<{
@@ -83,6 +83,7 @@ const emit = defineEmits(["seek", "play", "pause", "skip"]);
 
 const store = useStore();
 const roomapi = useRoomApi(useConnection());
+const granted = useGrants();
 
 /** Send a message to play or pause the video, depending on the current state. */
 function togglePlayback() {

client/src/components/controls/VideoProgressSlider.vue

@@ -30,12 +30,12 @@
 import { ref, Ref, onMounted, onUpdated, computed } from "vue";
 import VueSlider from "vue-slider-component";
 import { useStore } from "@/store";
-import { granted } from "@/util/grants";
 import { secondsToTimestamp } from "@/util/timestamp";
 import { useConnection } from "@/plugins/connection";
 import { useRoomApi } from "@/util/roomapi";
 import "vue-slider-component/theme/default.css";
 import "./slider-tweaks.scss";
+import { useGrants } from "../composables/grants";
 
 withDefaults(
 	defineProps<{
@@ -48,6 +48,7 @@ withDefaults(
 
 const store = useStore();
 const roomapi = useRoomApi(useConnection());
+const granted = useGrants();
 
 /**
  * vue-slider-component requires (props.max - props.min) to be divisible by props.interval.

client/src/views/Room.vue

@@ -215,7 +215,6 @@
 import { useGoTo } from "vuetify";
 import RoomSettingsForm from "@/components/RoomSettingsForm.vue";
 import ShareInvite from "@/components/ShareInvite.vue";
-import { granted } from "@/util/grants";
 import ClientSettingsDialog from "@/components/ClientSettingsDialog.vue";
 import RoomDisconnected from "../components/RoomDisconnected.vue";
 import { useConnection } from "@/plugins/connection";
@@ -236,6 +235,7 @@
 import { useSfx } from "@/plugins/sfx";
 import { secondsToTimestamp } from "@/util/timestamp";
 import { useCaptions, useMediaPlayer, useVolume } from "@/components/composables";
+import { useGrants } from "@/components/composables/grants";
 
 const VIDEO_CONTROLS_HIDE_TIMEOUT = 3000;
 
@@ -579,6 +579,8 @@
 			}
 		});
 
+		const granted = useGrants();
+
 		const addpreview = ref<typeof AddPreview | null>(null);
 		async function setAddPreviewText(text: string) {
 			queueTab.value = 1;