diff --git a/.github/workflows/app1.yml b/.github/workflows/app1.yml index e7d2d0b9..3b79592e 100644 --- a/.github/workflows/app1.yml +++ b/.github/workflows/app1.yml @@ -41,4 +41,4 @@ jobs: yarn build systemctl restart upstage.service systemctl restart event_archive.service - chown -R upstage:upstage /home/upstage/upstage \ No newline at end of file + chown -R upstage:upstage /home/upstage/upstage diff --git a/.github/workflows/devapp1.yml b/.github/workflows/devapp1.yml index 204345a6..f81b3fa4 100644 --- a/.github/workflows/devapp1.yml +++ b/.github/workflows/devapp1.yml @@ -6,7 +6,7 @@ name: DEVAPP1 CI on: # Triggers the workflow on push or approved pull request on R1-2021 branch push: - branches: [ MB-13 ] + branches: [ TC-14 ] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: @@ -30,15 +30,15 @@ jobs: key: ${{ secrets.DEVAPP1_KEY }} port: ${{ secrets.DEVAPP1_PORT }} script: | - cd /home/upstage/mobilise/ui/dashboard/ + cd /home/upstage/upstage/ui/dashboard/ git fetch - git checkout MB-13 + git checkout TC-14 git pull yarn yarn build:dev - cd /home/upstage/mobilise/ui/studio/ + cd /home/upstage/upstage/ui/studio/ yarn yarn build:dev systemctl restart upstage.service systemctl restart event_archive.service - chown -R upstage:upstage /home/upstage/mobilise + chown -R upstage:upstage /home/upstage/upstage diff --git a/.github/workflows/meta.yml b/.github/workflows/meta.yml new file mode 100644 index 00000000..58f9eae0 --- /dev/null +++ b/.github/workflows/meta.yml @@ -0,0 +1,44 @@ +# This is a basic workflow to help you get started with Actions + +name: CI + +# Controls when the action will run. +on: + # Triggers the workflow on push or approved pull request on R1-2021 branch + push: + branches: [ main ] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + # This workflow contains a single job called "build" + build: + # The type of runner that the job will run on + runs-on: ubuntu-latest + + # Steps represent a sequence of tasks that will be executed as part of the job + steps: + - name: SSH Remote Commands + # You may pin to the exact commit or the version. + # uses: appleboy/ssh-action@1d1b21ca96111b1eb4c03c21c14ebb971d2200f6 + uses: appleboy/ssh-action@v0.1.4 + with: + host: ${{ secrets.META_HOST }} + username: ${{ secrets.META_USERNAME }} + key: ${{ secrets.META_KEY }} + port: ${{ secrets.META_PORT }} + script: | + cd /home/upstage/upstage/ui/dashboard/ + git fetch + git checkout main + git pull + yarn + yarn build + cd /home/upstage/upstage/ui/studio/ + yarn + yarn build + systemctl restart upstage.service + systemctl restart event_archive.service + chown -R upstage:upstage /home/upstage/upstage diff --git a/asset/models.py b/asset/models.py index 2ea2f182..aafa650f 100644 --- a/asset/models.py +++ b/asset/models.py @@ -41,11 +41,13 @@ class Asset(Base, db.Model): created_on = Column(DateTime, nullable=False, default=datetime.utcnow) updated_on = Column(DateTime, nullable=False, default=datetime.utcnow) size = Column(BigInteger, nullable=False, default=0) + copyright_level = Column(Integer, nullable=False, default=0) asset_type = relationship(AssetType, foreign_keys=[asset_type_id]) asset_license = relationship(AssetLicense, uselist=False, backref="asset") owner = relationship(User, foreign_keys=[owner_id]) - stages = relationship('ParentStage', lazy='dynamic') - tags = relationship('MediaTag', lazy='dynamic') + stages = relationship('ParentStage', lazy='dynamic', back_populates='child_asset') + tags = relationship('MediaTag', lazy='dynamic', back_populates='asset') + permissions = relationship('AssetUsage', lazy='dynamic', back_populates='asset') class Stage(Base, db.Model): @@ -61,8 +63,8 @@ class Stage(Base, db.Model): file_location = Column(Text, nullable=False) created_on = Column(DateTime, nullable=False, default=datetime.utcnow) owner = relationship(User, foreign_keys=[owner_id]) - attributes = relationship(lambda: StageAttribute, lazy='dynamic') - assets = relationship('ParentStage', lazy='dynamic') + attributes = relationship(lambda: StageAttribute, lazy='dynamic', back_populates='stage') + assets = relationship('ParentStage', lazy='dynamic', back_populates='stage') class AssetAttribute(Base, db.Model): @@ -88,7 +90,7 @@ class StageAttribute(Base, db.Model): name = Column(String, nullable=False) description = Column(Text, nullable=False) created_on = Column(DateTime, nullable=False, default=datetime.utcnow) - stage = relationship(Stage, foreign_keys=[stage_id]) + stage = relationship(Stage, foreign_keys=[stage_id], back_populates="attributes") class Tag(Base, db.Model): @@ -104,5 +106,5 @@ class MediaTag(Base, db.Model): id = Column(BigInteger, primary_key=True) asset_id = Column(Integer, ForeignKey(Asset.id), nullable=False, default=0) tag_id = Column(Integer, ForeignKey(Tag.id), nullable=False, default=0) - asset = relationship(Asset, foreign_keys=[asset_id]) + asset = relationship(Asset, foreign_keys=[asset_id], back_populates="tags") tag = relationship(Tag, foreign_keys=[tag_id]) diff --git a/asset/sqlfiles/create.sql b/asset/sqlfiles/create.sql index 8465900f..d0ed3c8d 100644 --- a/asset/sqlfiles/create.sql +++ b/asset/sqlfiles/create.sql @@ -16,6 +16,7 @@ CREATE TABLE "public"."asset" ( "owner_id" integer NOT NULL, "description" TEXT default NULL, "file_location" TEXT NOT NULL, + "copyright_level" integer NOT NULL default 0, "created_on" timestamp DEFAULT (now() at time zone 'utc'), "updated_on" timestamp DEFAULT (now() at time zone 'utc'), "size" BIGINT NOT NULL DEFAULT 0, diff --git a/config/schema.py b/config/schema.py index 7802f97a..b9bfe46c 100644 --- a/config/schema.py +++ b/config/schema.py @@ -1,6 +1,6 @@ # -*- coding: iso8859-15 -*- from os import name -from config.project_globals import ScopedSession, app +from config.project_globals import DBSession, ScopedSession, app from flask_graphql import GraphQLView from config.settings import NGINX_CONFIG_FILE, VERSION from graphene import relay @@ -28,22 +28,40 @@ def resolve_uploadLimit(self, info): return limit +def get_config(name): + config = DBSession.query(ConfigModel).filter( + ConfigModel.name == name).first() + if config: + return config.value + + class SystemConfig(graphene.ObjectType): termsOfService = graphene.String() def resolve_termsOfService(self, info): - with ScopedSession() as local_db_session: - config = local_db_session.query(ConfigModel).filter( - ConfigModel.name == TERMS_OF_SERVICE - ).first() - if config: - return config.value + return get_config(TERMS_OF_SERVICE) + + +class FoyerConfig(graphene.ObjectType): + title = graphene.String() + description = graphene.String() + menu = graphene.String() + + def resolve_title(self, info): + return get_config('FOYER_TITLE') + + def resolve_description(self, info): + return get_config('FOYER_DESCRIPTION') + + def resolve_menu(self, info): + return get_config('FOYER_MENU') class Query(graphene.ObjectType): node = relay.Node.Field() nginx = graphene.Field(NginxConfig) system = graphene.Field(SystemConfig) + foyer = graphene.Field(FoyerConfig) def resolve_nginx(self, info): return NginxConfig() @@ -51,6 +69,9 @@ def resolve_nginx(self, info): def resolve_system(self, info): return SystemConfig() + def resolve_foyer(self, info): + return FoyerConfig() + class UpdateTermsOfService(graphene.Mutation): """Mutation to update Terms of Service's URL.""" @@ -76,8 +97,38 @@ def mutate(self, info, url): return UpdateTermsOfService(url=url) +class SaveConfig(graphene.Mutation): + """Mutation to customise foyer.""" + success = graphene.Boolean(description="True if the config was saved.") + + class Arguments: + name = graphene.String( + required=True, description="The name of the config.") + value = graphene.String( + required=True, description="The value of the config.") + + # decorate this with jwt login decorator. + def mutate(self, info, name, value): + with ScopedSession() as local_db_session: + config = local_db_session.query(ConfigModel).filter( + ConfigModel.name == name).first() + + if name == TERMS_OF_SERVICE: + # Use UpdateTermsOfService mutation instead. + return SaveConfig(success=False) + + if config: + config.value = value + else: + config = ConfigModel(name=name, value=value) + local_db_session.add(config) + + return SaveConfig(success=True) + + class Mutation(graphene.ObjectType): updateTermsOfService = UpdateTermsOfService.Field() + saveConfig = SaveConfig.Field() # ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ diff --git a/config/sqlfiles/create.sql b/config/sqlfiles/create.sql index add9830f..962698c8 100644 --- a/config/sqlfiles/create.sql +++ b/config/sqlfiles/create.sql @@ -6,3 +6,9 @@ CREATE TABLE "public"."config" ( "created_on" timestamp DEFAULT (now() at time zone 'utc'), PRIMARY KEY ("id") ); + +-- Seed foyer config +INSERT INTO "config" ("name", "value") VALUES ('FOYER_TITLE', 'CYBERFORMANCE PLATFORM'); +INSERT INTO "config" ("name", "value") VALUES ('FOYER_DESCRIPTION', 'UpStage is an online venue for live performance: remote performers collaborate in real time using digital media, and online audiences anywhere in the world join events by going to a web page, without having to download and install any additional software. UpStage is available free to anyone who would like to use it.'); +INSERT INTO "config" ("name", "value") VALUES ('FOYER_MENU', 'UpStage User Manual (https://docs.upstage.live/) +Customise Foyer (/backstage/admin/foyer-customisation)'); \ No newline at end of file diff --git a/docs/conf.py b/docs/conf.py index 14a7fd23..d0ae7134 100644 --- a/docs/conf.py +++ b/docs/conf.py @@ -56,7 +56,7 @@ "description": "UpStage is a platform for cyberformance: remote players combine digital media in real-time for an online audience. All you need is a web browser!", "logo": "logo.svg", "github_user": "upstage-org", - "github_repo": "mobilise", + "github_repo": "upstage", "github_banner": "true", "page_width": "90%", "donate_url": "https://upstage.org.nz/?page_id=278", diff --git a/licenses/models.py b/licenses/models.py index 8274a04b..b9d488a3 100644 --- a/licenses/models.py +++ b/licenses/models.py @@ -38,3 +38,15 @@ class AssetLicense(Base,db.Model): created_on = Column(DateTime, nullable=False, default=datetime.utcnow) level = Column(Integer, nullable=False, default=0) permissions = Column(String, nullable=True) + +class AssetUsage(Base,db.Model): + __tablename__ = "asset_usage" + id = Column(BigInteger, primary_key=True) + asset_id = Column(Integer, ForeignKey('asset.id'), nullable=False, default=0) + user_id = Column(Integer, ForeignKey('upstage_user.id'), nullable=False, default=0) + approved = Column(Boolean, nullable=False, default=False) + seen = Column(Boolean, nullable=False, default=False) + note = Column(String, nullable=True) + created_on = Column(DateTime, nullable=False, default=datetime.utcnow) + user = relationship('User', foreign_keys=[user_id]) + asset = relationship('Asset', foreign_keys=[asset_id]) \ No newline at end of file diff --git a/licenses/sqlfiles/create.sql b/licenses/sqlfiles/create.sql index 6f952bcf..6cae57b4 100644 --- a/licenses/sqlfiles/create.sql +++ b/licenses/sqlfiles/create.sql @@ -3,8 +3,8 @@ DROP TABLE IF EXISTS "stage_license"; CREATE TABLE "public"."stage_license" ( "id" BIGSERIAL NOT NULL, "stage_id" integer NOT NULL, - "created_on" timestamp DEFAULT (now() at time zone 'utc'), - "expires_on" timestamp DEFAULT timezone('utc')) NOT NULL, + "created_on" timestamp without time zone DEFAULT (now() at time zone 'utc'), + "expires_on" timestamp without time zone NOT NULL, "access_path" character varying unique NOT NULL, PRIMARY KEY ("id"), FOREIGN KEY (stage_id) REFERENCES stage(id) ON UPDATE CASCADE ON DELETE CASCADE NOT DEFERRABLE @@ -25,3 +25,17 @@ CREATE TABLE "public"."asset_license" ( ); CREATE INDEX "asset_license_created_on" ON "public"."asset_license" USING btree ("created_on"); +-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +DROP TABLE IF EXISTS "asset_usage"; +CREATE TABLE "public"."asset_usage" ( + "id" BIGSERIAL NOT NULL, + "asset_id" integer NOT NULL, + "user_id" integer NOT NULL, + "approved" boolean NOT NULL DEFAULT false, + "seen" boolean NOT NULL DEFAULT false, + "note" TEXT, + "created_on" timestamp DEFAULT (now() at time zone 'utc'), + PRIMARY KEY ("id"), + FOREIGN KEY (asset_id) REFERENCES asset(id) ON UPDATE CASCADE ON DELETE CASCADE NOT DEFERRABLE, + FOREIGN KEY (user_id) REFERENCES upstage_user(id) ON UPDATE CASCADE ON DELETE CASCADE NOT DEFERRABLE +); diff --git a/performance_config/models.py b/performance_config/models.py index ba81cce6..30aa8ab4 100644 --- a/performance_config/models.py +++ b/performance_config/models.py @@ -37,8 +37,8 @@ class ParentStage(Base,db.Model): id = Column(BigInteger, primary_key=True) stage_id = Column(Integer, ForeignKey(Stage.id), nullable=False, default=0) child_asset_id = Column(Integer, ForeignKey(Asset.id), nullable=False, default=0) - stage = relationship(Stage, foreign_keys=[stage_id]) - child_asset = relationship(Asset, foreign_keys=[child_asset_id]) + stage = relationship(Stage, foreign_keys=[stage_id], back_populates="assets") + child_asset = relationship(Asset, foreign_keys=[child_asset_id], back_populates="stages") class ParentAsset(Base,db.Model): ''' diff --git a/requirements.pip b/requirements.pip index 20f464f0..1337ee71 100644 --- a/requirements.pip +++ b/requirements.pip @@ -11,6 +11,8 @@ flask-restx flask-sqlalchemy flask-talisman gevent +graphql-core==2.2.1 +graphene==2.1.8 graphene-sqlalchemy paho-mqtt pillow diff --git a/stage/asset.py b/stage/asset.py index 35024173..f9118429 100644 --- a/stage/asset.py +++ b/stage/asset.py @@ -14,7 +14,7 @@ from flask_jwt_extended.view_decorators import verify_jwt_in_request from graphene_sqlalchemy.fields import SQLAlchemyConnectionField from sqlalchemy.sql.expression import and_, or_ -from licenses.models import AssetLicense +from licenses.models import AssetLicense, AssetUsage import os from user.models import ADMIN, SUPER_ADMIN from user.user_utils import current_user @@ -362,6 +362,8 @@ def mutate(self, info, id): MediaTag.asset_id == id).delete(synchronize_session=False) local_db_session.query(AssetLicense).filter( AssetLicense.asset_id == id).delete(synchronize_session=False) + local_db_session.query(AssetUsage).filter( + AssetUsage.asset_id == id).delete(synchronize_session=False) for multiframe_media in local_db_session.query(AssetModel).filter(AssetModel.description.like(f"%{asset.file_location}%")).all(): attributes = json.loads(multiframe_media.description) diff --git a/stage/schema.py b/stage/schema.py index 70814c45..f7470bc8 100644 --- a/stage/schema.py +++ b/stage/schema.py @@ -80,10 +80,12 @@ class Stage(SQLAlchemyObjectType): class Meta: model = StageModel - model.db_id = model.id interfaces = (relay.Node,) connection_class = graphql_utils.CountableConnection + def resolve_db_id(self, info): + return self.id + def resolve_events(self, info, performance_id=None, cursor=0): events = DBSession.query(EventModel)\ .filter(EventModel.performance_id == performance_id)\ diff --git a/studio/media.py b/studio/media.py index 9109ec21..26a7c16a 100644 --- a/studio/media.py +++ b/studio/media.py @@ -1,5 +1,6 @@ import hashlib import json +from operator import itemgetter import os import sys import time @@ -11,14 +12,14 @@ from asset.models import Asset as AssetModel, MediaTag, Stage as StageModel, Tag from asset.models import AssetType as AssetTypeModel from user.models import MAKER, PLAYER, User as UserModel -from config.project_globals import ScopedSession, appdir +from config.project_globals import DBSession, ScopedSession, appdir from config.settings import STREAM_EXPIRY_DAYS, STREAM_KEY from flask_jwt_extended import get_jwt_identity, jwt_required from flask_jwt_extended.view_decorators import verify_jwt_in_request from graphene_sqlalchemy import SQLAlchemyObjectType from graphene_sqlalchemy.fields import SQLAlchemyConnectionField from graphql_relay.node.node import from_global_id -from licenses.models import AssetLicense +from licenses.models import AssetLicense, AssetUsage as AssetUsageModel from performance_config.models import ParentStage from sqlalchemy.orm import joinedload from sqlalchemy.sql.expression import and_, or_ @@ -43,26 +44,41 @@ class AssignedStage(graphene.ObjectType): url = graphene.String() +class AssetUsage(SQLAlchemyObjectType): + class Meta: + model = AssetUsageModel + interfaces = (graphene.relay.Node,) + + +class Previlege(graphene.Enum): + NONE = 0 + OWNER = 1 + APPROVED = 2 + PENDING_APPROVAL = 3 + REQUIRE_APPROVAL = 4 + + class Asset(SQLAlchemyObjectType): db_id = graphene.Int(description="Database ID") src = graphene.String(description="Logical path of the media") stages = graphene.List( AssignedStage, description="Stages that this media is assigned to") - copyright_level = graphene.Int(description="Copyright level") - playerAccess = graphene.String( - description="Users who can access and edit this media") - permission = graphene.String( - description="What permission the logged in user is granted to this media") + permissions = graphene.List( + AssetUsage, description="Users who had been granted or acknowledged to use this media") + privilege = Previlege( + description="Permission of the logged in user for this media") sign = graphene.String( description="Stream sign that is required to publish from broadcaster") tags = graphene.List(graphene.String, description="Media tags") class Meta: model = AssetModel - model.db_id = model.id interfaces = (graphene.relay.Node,) connection_class = CountableConnection + def resolve_db_id(self, info): + return self.id + def resolve_src(self, info): timestamp = int(time.mktime(self.updated_on.timetuple())) return self.file_location + '?t=' + str(timestamp) @@ -73,36 +89,30 @@ def resolve_stages(self, info): def resolve_tags(self, info): return [x.tag.name for x in self.tags.all()] - def resolve_copyright_level(self, info): - if self.asset_license: - return self.asset_license.level - return 0 - - def resolve_playerAccess(self, info): - if self.asset_license and self.asset_license.permissions: - return self.asset_license.permissions - return "[]" + def resolve_permissions(self, info): + return self.permissions.order_by(AssetUsageModel.created_on.desc()).all() - def resolve_permission(self, info): + def resolve_privilege(self, info): result = verify_jwt_in_request(True) user_id = get_jwt_identity() if not user_id: - return "none" + return Previlege.NONE if self.owner_id == user_id: - return 'owner' - if not self.asset_license or self.asset_license.level == 0: - return "editor" - if self.asset_license.level == 3: - return "none" - player_access = self.asset_license.permissions - if player_access: - accesses = json.loads(player_access) - if len(accesses) == 2: - if user_id in accesses[0]: - return "readonly" - elif user_id in accesses[1]: - return "editor" - return "none" + return Previlege.OWNER + if not self.copyright_level: # no copyright + return Previlege.APPROVED + if self.copyright_level == 3: + # not shared, will not visisble to anyone either, this condidtion is just in case + return Previlege.NONE + usage = DBSession.query(AssetUsageModel).filter( + AssetUsageModel.asset_id == self.id).filter(AssetUsageModel.user_id == user_id).first() + if usage: + if not usage.approved and self.copyright_level == 2: + return Previlege.PENDING_APPROVAL + else: + return Previlege.APPROVED + else: + return Previlege.REQUIRE_APPROVAL def resolve_sign(self, info): result = verify_jwt_in_request(True) @@ -122,9 +132,11 @@ class AssetType(SQLAlchemyObjectType): class Meta: model = AssetTypeModel - model.db_id = model.id interfaces = (graphene.relay.Node,) + def resolve_db_id(self, info): + return self.id + class AssetConnectionField(SQLAlchemyConnectionField): RELAY_ARGS = ['first', 'last', 'before', 'after'] @@ -137,10 +149,8 @@ def get_query(cls, model, info, sort=None, **args): result = verify_jwt_in_request(True) user_id = get_jwt_identity() query = query.filter(or_( - AssetModel.asset_license == None, - AssetModel.asset_license.has(AssetLicense.level < 3), - and_(AssetModel.asset_license.has(AssetLicense.level == 3), - AssetModel.owner_id == user_id) + AssetModel.copyright_level < 3, + AssetModel.copyright_level == 3 and AssetModel.owner_id == user_id )) for field, value in args.items(): if field == 'id': @@ -198,8 +208,6 @@ def mutate(self, info): local_db_session.flush() total += media.size - local_db_session.commit() - local_db_session.close() return CalcSizes(size=total) @@ -234,29 +242,38 @@ def mutate(self, info, base64, filename): return UploadFile(url=file_location) +class SaveStageInput(graphene.InputObjectType): + """Arguments to update a stage.""" + name = graphene.String( + required=True, description="Name of the media") + urls = graphene.List( + graphene.String, description="Uploaded url of files") + media_type = graphene.String( + description="Avatar/prop/backdrop,... default to just a generic media", default_value='media') + id = graphene.ID(description="ID of the media (for updating)") + copyright_level = graphene.Int(description="Copyright level") + user_ids = graphene.List( + graphene.Int, description="Users who can access and edit this media") + stage_ids = graphene.List( + graphene.Int, description="Id of stages to be assigned to") + tags = graphene.List( + graphene.String, description="Media tags") + w = graphene.Int(description="Width of the media") + h = graphene.Int(description="Height of the media") + + class SaveMedia(graphene.Mutation): """Mutation to upload a media.""" asset = graphene.Field( lambda: Asset, description="Media saved by this mutation.") class Arguments: - name = graphene.String( - required=True, description="Name of the media") - urls = graphene.List( - graphene.String, description="Uploaded url of files") - media_type = graphene.String( - description="Avatar/prop/backdrop,... default to just a generic media", default_value='media') - id = graphene.ID(description="ID of the media (for updating)") - copyright_level = graphene.Int(description="Copyright level") - player_access = graphene.String( - description="Users who can access and edit this media") - stage_ids = graphene.List( - graphene.Int, description="Id of stages to be assigned to") - tags = graphene.List( - graphene.String, description="Media tags") + input = SaveStageInput(required=True) @jwt_required() - def mutate(self, info, name, urls, media_type='media', id=None, copyright_level=None, player_access=None, stage_ids=None, tags=None): + def mutate(self, info, input): + name, urls, media_type, copyright_level, user_ids, stage_ids, tags, w, h = itemgetter( + 'name', 'urls', 'media_type', 'copyright_level', 'user_ids', 'stage_ids', 'tags', 'w', 'h')(input) current_user_id = get_jwt_identity() with ScopedSession() as local_db_session: asset_type = local_db_session.query(AssetTypeModel).filter( @@ -267,8 +284,8 @@ def mutate(self, info, name, urls, media_type='media', id=None, copyright_level= local_db_session.add(asset_type) local_db_session.flush() - if id: - id = from_global_id(id)[1] + if 'id' in input: + id = from_global_id(input['id'])[1] asset = local_db_session.query(AssetModel).filter( AssetModel.id == id).first() else: @@ -279,21 +296,8 @@ def mutate(self, info, name, urls, media_type='media', id=None, copyright_level= asset.name = name asset.asset_type = asset_type asset.file_location = urls[0] + asset.copyright_level = copyright_level asset.updated_on = datetime.utcnow() - - if asset.asset_license: - asset.asset_license.level = copyright_level - asset.asset_license.permissions = player_access - else: - if not asset.id: - local_db_session.flush() - - asset_license = AssetLicense( - asset_id=asset.id, - level=copyright_level, - permissions=player_access - ) - local_db_session.add(asset_license) local_db_session.flush() if urls: @@ -315,6 +319,11 @@ def mutate(self, info, name, urls, media_type='media', id=None, copyright_level= if len(urls) > 1: attributes['multi'] = True + else: + attributes['multi'] = False + attributes['frames'] = [] + attributes['w'] = w + attributes['h'] = h asset.description = json.dumps(attributes) local_db_session.flush() @@ -324,6 +333,22 @@ def mutate(self, info, name, urls, media_type='media', id=None, copyright_level= for id in stage_ids: asset.stages.append(ParentStage(stage_id=id)) + if user_ids != None: + granted_permissions = asset.permissions.all() + for permission in granted_permissions: + if isinstance(permission, AssetUsageModel): + if permission.user_id not in user_ids and permission.approved == True: + asset.permissions.remove(permission) + local_db_session.delete(permission) + for user_id in user_ids: + permission = local_db_session.query(AssetUsageModel).filter( + AssetUsageModel.asset_id == asset.id, AssetUsageModel.user_id == user_id).first() + if not permission: + permission = AssetUsageModel(user_id=user_id) + asset.permissions.append(permission) + permission.approved = True + local_db_session.flush() + if tags: asset.tags.delete() for tag in tags: @@ -340,3 +365,65 @@ def mutate(self, info, name, urls, media_type='media', id=None, copyright_level= asset = local_db_session.query(AssetModel).filter( AssetModel.id == asset.id).first() return SaveMedia(asset=asset) + + +class ConfirmPermission(graphene.Mutation): + """Mutation to approve or reject a media usage request""" + success = graphene.Boolean(description="Success") + message = graphene.String(description="Reason for why the mutation failed") + permissions = graphene.List( + lambda: AssetUsage, description="Permissions that were updated") + + class Arguments: + id = graphene.ID(description="ID of the media usage request") + approved = graphene.Boolean( + description="Whether the permission is approved. True for approving, False for rejecting") + + @jwt_required() + def mutate(self, info, id, approved): + id = from_global_id(id)[1] + with ScopedSession() as local_db_session: + asset_usage = local_db_session.query(AssetUsageModel).get(id) + asset_id = asset_usage.asset_id + if asset_usage: + code, error, user, timezone = current_user() + if not user.role in (ADMIN, SUPER_ADMIN): + if not user.id == asset_usage.asset.owner_id: + return ConfirmPermission(success=False, message="Only media owner or admin can delete this media!") + if approved: + asset_usage.approved = True + asset_usage.seen = True + else: + local_db_session.delete(asset_usage) + local_db_session.flush() + permissions = DBSession.query(AssetUsageModel).filter( + AssetUsageModel.asset_id == asset_id).all() + return ConfirmPermission(success=True, permissions=permissions) + + +class RequestPermission(graphene.Mutation): + """Mutation to create an asset usage""" + success = graphene.Boolean(description="Success") + + class Arguments: + asset_id = graphene.ID(description="ID of the media usage request") + note = graphene.String( + description="Note for the media usage request", required=False) + + @jwt_required() + def mutate(self, info, asset_id, note=None): + asset_id = from_global_id(asset_id)[1] + with ScopedSession() as local_db_session: + asset = local_db_session.query(AssetModel).get(asset_id) + if asset: + code, error, user, timezone = current_user() + asset_usage = AssetUsageModel( + user_id=user.id, asset_id=asset_id, note=note) + if asset.copyright_level == 2: + asset_usage.approved = False + else: + asset_usage.approved = True + local_db_session.add(asset_usage) + local_db_session.flush() + local_db_session.commit() + return ConfirmPermission(success=True) diff --git a/studio/notification.py b/studio/notification.py new file mode 100644 index 00000000..10bf63a3 --- /dev/null +++ b/studio/notification.py @@ -0,0 +1,35 @@ +from flask_jwt_extended.view_decorators import jwt_required +import graphene +from graphene_sqlalchemy.types import SQLAlchemyObjectType +import graphene +from config.project_globals import DBSession +from studio.media import AssetUsage +from user.user_utils import current_user +from licenses.models import AssetUsage as AssetUsageModel + + +class NotificationType(graphene.Enum): + MEDIA_USAGE = 1 + + +class Notification(graphene.ObjectType): + type = NotificationType(description="Type of notification") + mediaUsage = graphene.Field( + AssetUsage, description="If notification is of type media usage, this object contain the permission request") + + class Meta: + interfaces = (graphene.relay.Node,) + + def resolve_mediaUsage(self, info): + return self.mediaUsage + + +@jwt_required() +def resolve_notifications(self, info): + code, error, user, timezone = current_user() + notifications = [] + if user: + mediaUsages = [Notification(type=NotificationType.MEDIA_USAGE, mediaUsage=x) + for x in DBSession.query(AssetUsageModel).filter(AssetUsageModel.approved == False).filter(AssetUsageModel.asset.has(owner_id=user.id)).all()] + notifications += mediaUsages + return notifications diff --git a/studio/schema.py b/studio/schema.py index 327fb722..7a1f4e5f 100644 --- a/studio/schema.py +++ b/studio/schema.py @@ -10,12 +10,12 @@ from config.settings import VERSION from flask_graphql import GraphQLView from graphene import relay -from asset.models import Stage as StageModel -from asset.models import Tag as TagModel +from asset.models import Stage as StageModel, Tag as TagModel from stage.asset import DeleteMedia +from studio.notification import Notification, resolve_notifications from user.models import ROLES, User as UserModel, role_conv from studio.media import (Asset, AssetConnectionField, - AssetType, CalcSizes, SaveMedia, UploadFile) + AssetType, CalcSizes, ConfirmPermission, RequestPermission, SaveMedia, UploadFile) from user.user_utils import current_user appdir = os.path.abspath(os.path.dirname(__file__)) @@ -66,6 +66,7 @@ class Query(graphene.ObjectType): media = AssetConnectionField( Asset.connection, id=graphene.ID(), name_like=graphene.String(), created_between=graphene.List(graphene.Date), file_location=graphene.String(), media_types=graphene.List(graphene.String), owners=graphene.List(graphene.String), stages=graphene.List(graphene.Int), tags=graphene.List(graphene.String)) whoami = graphene.Field(User, description="Logged in user info") + notifications = graphene.List(Notification, resolver=resolve_notifications) @jwt_required() def resolve_whoami(self, info): @@ -79,6 +80,8 @@ class Mutation(graphene.ObjectType): uploadFile = UploadFile.Field() saveMedia = SaveMedia.Field() refreshUser = RefreshMutation.Field() + confirmPermission = ConfirmPermission.Field() + requestPermission = RequestPermission.Field() # ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ diff --git a/system/dev/dev_app1_nginx_upstage.conf b/system/dev/dev_app1_nginx_upstage.conf index bcbe309c..9daf19ca 100644 --- a/system/dev/dev_app1_nginx_upstage.conf +++ b/system/dev/dev_app1_nginx_upstage.conf @@ -49,7 +49,7 @@ server { #limit_req zone=limitone burst=20 nodelay; #auth_basic "Enter password."; #auth_basic_user_file /etc/nginx/htpasswd; - alias /home/upstage/mobilise/ui/dashboard/dist/; + alias /home/upstage/upstage/ui/dashboard/dist/; try_files $uri $uri/ /index.html; add_header Last-Modified $date_gmt; add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0'; @@ -63,7 +63,7 @@ server { } location /studio { - alias /home/upstage/mobilise/ui/studio/dist/; + alias /home/upstage/upstage/ui/studio/dist/; try_files $uri $uri/ /V4.0/studio/index.html; add_header Last-Modified $date_gmt; add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0'; @@ -76,11 +76,15 @@ server { gzip_min_length 1000; } - location /V4.0/static { - #limit_req zone=limitone burst=20 nodelay; - #auth_basic "Enter password."; - #auth_basic_user_file /etc/nginx/htpasswd; - alias /home/upstage/mobilise/ui/static; + location /static { + alias /home/upstage/upstage/ui/static; + expires off; + add_header Cache-Control 'no-cache, must-revalidate'; + } + + location /V4.0/static { + # Keep this path for not breaking replays + alias /home/upstage/upstage/ui/static; expires off; add_header Cache-Control 'no-cache, must-revalidate'; } diff --git a/system/dev/event_archive.service b/system/dev/event_archive.service index 6e8c7fed..5e83384e 100644 --- a/system/dev/event_archive.service +++ b/system/dev/event_archive.service @@ -3,7 +3,7 @@ Description=UpStage event archive service [Service] Type=simple -ExecStart=/usr/bin/python3 /home/upstage/mobilise/run_event_archive.py +ExecStart=/usr/bin/python3 /home/upstage/upstage/run_event_archive.py [Install] WantedBy=multi-user.target \ No newline at end of file diff --git a/system/dev/upstage.ini b/system/dev/upstage.ini index fa5a3fac..ad62e779 100644 --- a/system/dev/upstage.ini +++ b/system/dev/upstage.ini @@ -17,9 +17,9 @@ enable-threads=false socket=/home/upstage/uwsgi_sockets/upstage.socket chown-socket=upstage:upstage chmod-socket=777 -chdir=/home/upstage/mobilise/ +chdir=/home/upstage/upstage/ module = run_upstage:app -env = PYTHONPATH=/home/upstage/mobilise +env = PYTHONPATH=/home/upstage/upstage # NO!!! daemonize=/var/log/uwsgi/urbn_stripe_webhook.log logto2 = /var/log/uwsgi/upstage.log diff --git a/system/dev/upstage.service b/system/dev/upstage.service index 9d83f407..ea58cc53 100644 --- a/system/dev/upstage.service +++ b/system/dev/upstage.service @@ -6,7 +6,7 @@ After=syslog.target LimitNOFILE=100000 User=upstage Group=upstage -ExecStart=/bin/sh -c "exec /usr/local/bin/uwsgi --ini /home/upstage/mobilise/system/dev/upstage.ini" +ExecStart=/bin/sh -c "exec /usr/local/bin/uwsgi --ini /home/upstage/upstage/system/dev/upstage.ini" # Requires systemd version 211 or newer RuntimeDirectory=uwsgi_socket Restart=always diff --git a/system/prod/app1_nginx_upstage.conf b/system/prod/app1_nginx_upstage.conf index 748e44f1..6142568d 100644 --- a/system/prod/app1_nginx_upstage.conf +++ b/system/prod/app1_nginx_upstage.conf @@ -47,7 +47,7 @@ server { #limit_req zone=limitone burst=20 nodelay; #auth_basic "Enter password."; #auth_basic_user_file /etc/nginx/htpasswd; - alias /home/upstage/mobilise/ui/dashboard/dist/; + alias /home/upstage/upstage/ui/dashboard/dist/; try_files $uri $uri/ /index.html; add_header Last-Modified $date_gmt; add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0'; @@ -62,7 +62,7 @@ server { location /studio { - alias /home/upstage/mobilise/ui/studio/dist/; + alias /home/upstage/upstage/ui/studio/dist/; try_files $uri $uri/ /studio/index.html; add_header Last-Modified $date_gmt; add_header 'Cache-Control' 'no-store, no-cache, must-revalidate, proxy-revalidate, max-age=0'; @@ -75,11 +75,15 @@ server { gzip_min_length 1000; } + location /static { + alias /home/upstage/upstage/ui/static; + expires off; + add_header Cache-Control 'no-cache, must-revalidate'; + } + location /V4.0/static { - #limit_req zone=limitone burst=20 nodelay; - #auth_basic "Enter password."; - #auth_basic_user_file /etc/nginx/htpasswd; - alias /home/upstage/mobilise/ui/static; + # Keep this path for not breaking replays + alias /home/upstage/upstage/ui/static; expires off; add_header Cache-Control 'no-cache, must-revalidate'; } diff --git a/system/prod/event_archive.service b/system/prod/event_archive.service index 89456c68..15f5486c 100644 --- a/system/prod/event_archive.service +++ b/system/prod/event_archive.service @@ -3,7 +3,7 @@ Description=UpStage event archive service [Service] Type=simple -ExecStart=/usr/bin/python3 /home/upstage/mobilise/run_event_archive.py +ExecStart=/usr/bin/python3 /home/upstage/upstage/run_event_archive.py [Install] WantedBy=multi-user.target diff --git a/system/prod/upstage.ini b/system/prod/upstage.ini index fa5a3fac..ad62e779 100644 --- a/system/prod/upstage.ini +++ b/system/prod/upstage.ini @@ -17,9 +17,9 @@ enable-threads=false socket=/home/upstage/uwsgi_sockets/upstage.socket chown-socket=upstage:upstage chmod-socket=777 -chdir=/home/upstage/mobilise/ +chdir=/home/upstage/upstage/ module = run_upstage:app -env = PYTHONPATH=/home/upstage/mobilise +env = PYTHONPATH=/home/upstage/upstage # NO!!! daemonize=/var/log/uwsgi/urbn_stripe_webhook.log logto2 = /var/log/uwsgi/upstage.log diff --git a/system/prod/upstage.service b/system/prod/upstage.service index f48733d6..3d184d4d 100644 --- a/system/prod/upstage.service +++ b/system/prod/upstage.service @@ -6,7 +6,7 @@ After=syslog.target LimitNOFILE=100000 User=upstage Group=upstage -ExecStart=/bin/sh -c "exec /usr/local/bin/uwsgi --ini /home/upstage/mobilise/system/prod/upstage.ini" +ExecStart=/bin/sh -c "exec /usr/local/bin/uwsgi --ini /home/upstage/upstage/system/prod/upstage.ini" # Requires systemd version 211 or newer RuntimeDirectory=uwsgi_socket Restart=always diff --git a/ui/dashboard/.env b/ui/dashboard/.env deleted file mode 100644 index 655007dd..00000000 --- a/ui/dashboard/.env +++ /dev/null @@ -1,5 +0,0 @@ -VUE_APP_API_ENDPOINT=https://upstage.live/V4.0/ -VUE_APP_GRAPHQL_ENDPOINT=https://upstage.live/V4.0/ -VUE_APP_STATIC_ASSETS_ENDPOINT=https://upstage.live/V4.0/static/assets/ -VUE_APP_STUDIO_ENDPOINT=https://upstage.live/studio/ -VUE_APP_MQTT_NAMESPACE=app1 diff --git a/ui/dashboard/.env.dev b/ui/dashboard/.env.dev index 2026de0e..247391e0 100644 --- a/ui/dashboard/.env.dev +++ b/ui/dashboard/.env.dev @@ -1,5 +1,12 @@ VUE_APP_API_ENDPOINT=https://dev-app1.upstage.org.nz/V4.0/ VUE_APP_GRAPHQL_ENDPOINT=https://dev-app1.upstage.org.nz/V4.0/ -VUE_APP_STATIC_ASSETS_ENDPOINT=https://dev-app1.upstage.org.nz/V4.0/static/assets/ +VUE_APP_STATIC_ASSETS_ENDPOINT=https://dev-app1.upstage.org.nz/static/assets/ VUE_APP_STUDIO_ENDPOINT=https://dev-app1.upstage.org.nz/studio/ -VUE_APP_MQTT_NAMESPACE=dev \ No newline at end of file +VUE_APP_MQTT_NAMESPACE=dev +VUE_APP_MQTT_ENDPOINT=wss://svc1.upstage.org.nz:9002/mqtt +VUE_APP_MQTT_USERNAME=performance +VUE_APP_MQTT_PASSWORD=z48FCTsJVEUkYmtUw5S9 +VUE_APP_STREAMING_PUBLISH_ENDPOINT=rtmp://streaming1.upstage.org.nz:1941/live +VUE_APP_STREAMING_SUBSCRIBE_ENDPOINT=https://streaming1.upstage.org.nz:9999/ +VUE_APP_STREAMING_USERNAME=admin +VUE_APP_STREAMING_PASSWORD=admin \ No newline at end of file diff --git a/ui/dashboard/.env.live b/ui/dashboard/.env.live new file mode 100644 index 00000000..e4855dc9 --- /dev/null +++ b/ui/dashboard/.env.live @@ -0,0 +1,12 @@ +VUE_APP_API_ENDPOINT=https://upstage.live/V4.0/ +VUE_APP_GRAPHQL_ENDPOINT=https://upstage.live/V4.0/ +VUE_APP_STATIC_ASSETS_ENDPOINT=https://upstage.live/static/assets/ +VUE_APP_STUDIO_ENDPOINT=https://upstage.live/studio/ +VUE_APP_MQTT_NAMESPACE=app1 +VUE_APP_MQTT_ENDPOINT=wss://svc1.upstage.org.nz:9002/mqtt +VUE_APP_MQTT_USERNAME=performance +VUE_APP_MQTT_PASSWORD=z48FCTsJVEUkYmtUw5S9 +VUE_APP_STREAMING_PUBLISH_ENDPOINT=rtmp://streaming1.upstage.org.nz:1941/live +VUE_APP_STREAMING_SUBSCRIBE_ENDPOINT=https://streaming1.upstage.org.nz:9999/ +VUE_APP_STREAMING_USERNAME=admin +VUE_APP_STREAMING_PASSWORD=admin \ No newline at end of file diff --git a/ui/dashboard/.env.localhost b/ui/dashboard/.env.localhost index 3a707dc4..03e59e43 100644 --- a/ui/dashboard/.env.localhost +++ b/ui/dashboard/.env.localhost @@ -1,4 +1,4 @@ VUE_APP_API_ENDPOINT=http://localhost:5000/V4.0/ VUE_APP_GRAPHQL_ENDPOINT=http://localhost:5000/V4.0/ -VUE_APP_STATIC_ASSETS_ENDPOINT=https://app1.upstage.org.nz/V4.0/static/assets/ +VUE_APP_STATIC_ASSETS_ENDPOINT=https://app1.upstage.org.nz/static/assets/ VUE_APP_MQTT_NAMESPACE=dev \ No newline at end of file diff --git a/ui/dashboard/.env.meta b/ui/dashboard/.env.meta new file mode 100644 index 00000000..764e7048 --- /dev/null +++ b/ui/dashboard/.env.meta @@ -0,0 +1,12 @@ +VUE_APP_API_ENDPOINT=https://meta.upstage.live/V4.0/ +VUE_APP_GRAPHQL_ENDPOINT=https://meta.upstage.live/V4.0/ +VUE_APP_STATIC_ASSETS_ENDPOINT=https://meta.upstage.live/static/assets/ +VUE_APP_STUDIO_ENDPOINT=https://meta.upstage.live/studio/ +VUE_APP_MQTT_NAMESPACE=meta +VUE_APP_MQTT_ENDPOINT=wss://svc1.meta.upstage.live:9002/mqtt +VUE_APP_MQTT_USERNAME=meta +VUE_APP_MQTT_PASSWORD=7#Yr4egD'X&u]{wyK +VUE_APP_STREAMING_PUBLISH_ENDPOINT=rtmp://streaming1.meta.upstage.live:1941/live +VUE_APP_STREAMING_SUBSCRIBE_ENDPOINT=https://streaming1.meta.upstage.live:9999/ +VUE_APP_STREAMING_USERNAME=admin +VUE_APP_STREAMING_PASSWORD=admin \ No newline at end of file diff --git a/ui/dashboard/.gitignore b/ui/dashboard/.gitignore index 403adbc1..0035d70c 100644 --- a/ui/dashboard/.gitignore +++ b/ui/dashboard/.gitignore @@ -4,6 +4,7 @@ node_modules # local env files +.env .env.local .env.*.local diff --git a/ui/dashboard/package.json b/ui/dashboard/package.json index df0b914f..7c7be347 100644 --- a/ui/dashboard/package.json +++ b/ui/dashboard/package.json @@ -1,7 +1,7 @@ { "name": "dashboard", "version": "4.7.0", - "versionAlias": "MB-13", + "versionAlias": "TC-14", "private": true, "scripts": { "serve": "vue-cli-service serve --mode dev", diff --git a/ui/dashboard/src/components/NavBar.vue b/ui/dashboard/src/components/NavBar.vue index 70e61fa1..ede94624 100644 --- a/ui/dashboard/src/components/NavBar.vue +++ b/ui/dashboard/src/components/NavBar.vue @@ -17,63 +17,40 @@
-
- About -
- FAQs - Contacts - Diversity + Inclusion -
-
-
-
-   Learn   -
- Research +
Cannot display navigation properly, please check your menu syntax in Admin section!
+
@@ -103,25 +80,22 @@ import { computed, ref } from "vue"; import { loggedIn, logout } from "@/utils/auth"; import Logo from "./Logo"; import { useStore } from "vuex"; -import Loading from "@/components/Loading"; export default { - components: { Logo, Loading }, + components: { Logo }, setup() { const store = useStore(); const expanded = ref(false); const toggleExpanded = () => (expanded.value = !expanded.value); - const loadingStages = computed(() => store.getters["cache/loadingStages"]); - const liveStages = computed(() => store.getters["cache/liveStages"]); + const navigations = computed(() => store.getters["config/navigations"]); return { expanded, toggleExpanded, loggedIn, logout, - loadingStages, - liveStages, + navigations }; }, }; diff --git a/ui/dashboard/src/config.js b/ui/dashboard/src/config.js index c086990b..48ce243b 100644 --- a/ui/dashboard/src/config.js +++ b/ui/dashboard/src/config.js @@ -1,4 +1,17 @@ -const { VUE_APP_API_ENDPOINT, VUE_APP_GRAPHQL_ENDPOINT, VUE_APP_STATIC_ASSETS_ENDPOINT, VUE_APP_STUDIO_ENDPOINT, VUE_APP_MQTT_NAMESPACE } = process.env; +const { + VUE_APP_API_ENDPOINT, + VUE_APP_GRAPHQL_ENDPOINT, + VUE_APP_STATIC_ASSETS_ENDPOINT, + VUE_APP_STUDIO_ENDPOINT, + VUE_APP_MQTT_NAMESPACE, + VUE_APP_MQTT_ENDPOINT, + VUE_APP_MQTT_USERNAME, + VUE_APP_MQTT_PASSWORD, + VUE_APP_STREAMING_PUBLISH_ENDPOINT, + VUE_APP_STREAMING_SUBSCRIBE_ENDPOINT, + VUE_APP_STREAMING_USERNAME, + VUE_APP_STREAMING_PASSWORD, +} = process.env; let configs = { API_ENDPOINT: VUE_APP_API_ENDPOINT, @@ -9,20 +22,20 @@ let configs = { ACCESS_TOKEN_KEY: 'access_token', MQTT_NAMESPACE: VUE_APP_MQTT_NAMESPACE, MQTT_CONNECTION: { - url: 'wss://svc1.upstage.org.nz:9002/mqtt', - username: 'performance', - password: 'z48FCTsJVEUkYmtUw5S9', + url: VUE_APP_MQTT_ENDPOINT, + username: VUE_APP_MQTT_USERNAME, + password: VUE_APP_MQTT_PASSWORD, clean: true, // Reserved session connectTimeout: 4000, // Time out reconnectPeriod: 4000, // Reconnection interval retain: true, }, STREAMING: { - publish: "rtmp://streaming1.upstage.org.nz:1941/live", - subscribe: "https://streaming1.upstage.org.nz:9999/", + publish: VUE_APP_STREAMING_PUBLISH_ENDPOINT, + subscribe: VUE_APP_STREAMING_SUBSCRIBE_ENDPOINT, auth: { - username: 'admin', - password: 'admin' + username: VUE_APP_STREAMING_USERNAME, + password: VUE_APP_STREAMING_PASSWORD, } } } diff --git a/ui/dashboard/src/router/index.js b/ui/dashboard/src/router/index.js index 423248e3..7e2dd13c 100644 --- a/ui/dashboard/src/router/index.js +++ b/ui/dashboard/src/router/index.js @@ -95,6 +95,11 @@ const routes = [ name: 'System Configurations', component: () => import('../views/backstage/Admin/SystemConfigurations.vue'), }, + { + path: 'foyer-customisation', + name: 'Foyer Customisation', + component: () => import('../views/backstage/Admin/FoyerCustomisation.vue'), + } ] }, { diff --git a/ui/dashboard/src/services/graphql/config.js b/ui/dashboard/src/services/graphql/config.js index 9650a429..87130e6a 100644 --- a/ui/dashboard/src/services/graphql/config.js +++ b/ui/dashboard/src/services/graphql/config.js @@ -12,6 +12,11 @@ export default { system { termsOfService } + foyer { + title + description + menu + } } `), updateTermsOfService: (variables) => client.request(gql` @@ -20,5 +25,12 @@ export default { url } } - `, variables) + `, variables), + saveConfig: (name, value) => client.request(gql` + mutation SaveConfig($name: String!, $value: String!) { + saveConfig(name: $name, value: $value) { + success + } + } + `, { name, value }), } diff --git a/ui/dashboard/src/store/modules/config.js b/ui/dashboard/src/store/modules/config.js index e31bdee4..c377b0cd 100644 --- a/ui/dashboard/src/store/modules/config.js +++ b/ui/dashboard/src/store/modules/config.js @@ -4,7 +4,8 @@ export default { namespaced: true, state: { nginx: {}, - system: {} + system: {}, + foyer: null }, getters: { uploadLimit(state) { @@ -12,6 +13,37 @@ export default { }, termsOfService(state) { return state.system.termsOfService + }, + foyer(state) { + return state.foyer ?? {} + }, + navigations(state) { + if (!state.foyer) { + return [] + } + try { + const lines = state.foyer.menu.split("\n").filter(line => line.trim().length > 0) + const navigations = [] + for (const line of lines) { + // Syntax: (<url>) + const url = line.match(/\(([^)]+)\)/) // get the url part + let title = line.replace('>', '') + title = title.includes("(") ? title.split("(")[0].trim() : title.trim() // get the title part + const menu = { title, url: url ? url[1] : null } + if (line.trim().startsWith(">")) { + const parent = navigations[navigations.length - 1] + if (!parent.children) { + parent.children = [] + } + parent.children.push(menu) + } else { + navigations.push(menu) + } + } + return navigations + } catch (error) { + console.log(error) + } } }, mutations: { diff --git a/ui/dashboard/src/styles/custom.scss b/ui/dashboard/src/styles/custom.scss index b7426c1d..194c1c93 100644 --- a/ui/dashboard/src/styles/custom.scss +++ b/ui/dashboard/src/styles/custom.scss @@ -126,7 +126,6 @@ div.moveable-control-box { margin: 8px 12px; padding: 0 20px !important; justify-content: center; - text-transform: uppercase; border: 1px solid transparent; } .vertical-divider { diff --git a/ui/dashboard/src/styles/mixins.scss b/ui/dashboard/src/styles/mixins.scss index ec0d5b12..c7ed1ae4 100644 --- a/ui/dashboard/src/styles/mixins.scss +++ b/ui/dashboard/src/styles/mixins.scss @@ -17,7 +17,6 @@ @mixin textShadow() { color: $black; text-shadow: -3px 0 $primary; - text-transform: uppercase; } @mixin differentiatedToolbar($color) { background-color: $color; diff --git a/ui/dashboard/src/views/Home.vue b/ui/dashboard/src/views/Home.vue index 728b3661..c58f7a60 100644 --- a/ui/dashboard/src/views/Home.vue +++ b/ui/dashboard/src/views/Home.vue @@ -2,14 +2,8 @@ <section id="welcome" class="hero is-fullheight foyer-background"> <div class="hero-body"> <div class="container"> - <h1 class="title">CYBERFORMANCE PLATFORM</h1> - <h2 class="subtitle"> - UpStage is an online venue for live performance: remote performers - collaborate in real time using digital media, and online audiences - anywhere in the world join events by going to a web page, without - having to download and install any additional software. UpStage is - available free to anyone who would like to use it. - </h2> + <h1 class="title" v-html="foyer.title" /> + <h2 v-if="foyer.description" class="subtitle" v-html="foyer.description" /> <Loading v-if="loading" /> <div v-else class="links columns is-multiline my-4 pt-6"> <div v-for="stage in liveStages" :key="stage.id" class="column is-4"> @@ -53,6 +47,7 @@ export default { const loading = computed(() => store.getters["cache/loadingStages"]); const liveStages = computed(() => store.getters["cache/liveStages"]); + const foyer = computed(() => store.getters["config/foyer"]); const upcomingStages = computed( () => store.getters["cache/upcomingStages"] ); @@ -67,6 +62,7 @@ export default { loading, upcomingStages, absolutePath, + foyer, }; }, }; @@ -89,6 +85,7 @@ export default { max-width: 800px; margin: auto; box-shadow: 10px 10px 0 0 $primary; + white-space: pre-wrap; } .column { padding: 2rem; diff --git a/ui/dashboard/src/views/backstage/Admin/FoyerCustomisation.vue b/ui/dashboard/src/views/backstage/Admin/FoyerCustomisation.vue new file mode 100644 index 00000000..ad363604 --- /dev/null +++ b/ui/dashboard/src/views/backstage/Admin/FoyerCustomisation.vue @@ -0,0 +1,125 @@ +<template> + <div class="columns is-vcentered"> + <div class="column is-2"> + <b>Title</b> + </div> + <template v-if="edit == 'title'"> + <div class="column"> + <Field + v-model="title" + required + required-message="You should not leave the foyer title blank!" + /> + </div> + <div class="column is-narrow"> + <button + class="button is-primary" + :class="{ 'is-loading': loading }" + @click="save('Foyer title saved successfully!', 'FOYER_TITLE', title); edit = null" + >Save</button> + </div> + </template> + <template v-else> + <div class="column">{{ title }}</div> + <div class="column is-narrow"> + <button class="button is-primary" @click="edit = 'title'">Edit</button> + </div> + </template> + </div> + <div class="columns is-vcentered"> + <div class="column is-2"> + <b>Description</b> + </div> + <template v-if="edit == 'description'"> + <div class="column"> + <textarea class="textarea" rows="4" v-model="description" /> + </div> + <div class="column is-narrow"> + <button + class="button is-primary" + :class="{ 'is-loading': loading }" + @click="save('Foyer description saved successfully!', 'FOYER_DESCRIPTION', description); edit = null" + >Save</button> + </div> + </template> + <template v-else> + <div class="column pre-wrap">{{ description }}</div> + <div class="column is-narrow"> + <button class="button is-primary" @click="edit = 'description'">Edit</button> + </div> + </template> + </div> + <div class="columns is-vcentered"> + <div class="column is-2"> + <span + class="has-tooltip-right" + data-tooltip="Syntax: <title> (<url>) +For example: Development (https://github.com/upstage-org/upstage/) +Put the navigation links line by line. Put > before the line to make it nested inside parent menu. +For example: +About +> FAQ (https://upstage.org.nz/?page_id=115) +> Contact (/contact) +" + > + <b>Menu</b> + <i class="fas fa-info-circle ml-1"></i> + </span> + </div> + <template v-if="edit == 'menu'"> + <div class="column"> + <textarea class="textarea" rows="8" v-model="menu" /> + </div> + <div class="column is-narrow"> + <button + class="button is-primary" + :class="{ 'is-loading': loading }" + @click="save('Foyer menu saved successfully!', 'FOYER_MENU', menu); edit = null" + >Save</button> + </div> + </template> + <template v-else> + <div class="column pre-wrap">{{ menu }}</div> + <div class="column is-narrow"> + <button class="button is-primary" @click="edit = 'menu'">Edit</button> + </div> + </template> + </div> +</template> + +<script> +import Field from "@/components/form/Field"; +import { useStore } from "vuex"; +import { ref, watchEffect } from "@vue/runtime-core"; +import { useMutation } from "@/services/graphql/composable"; +import { configGraph } from "@/services/graphql"; +export default { + components: { Field }, + setup: () => { + const store = useStore(); + + const title = ref('') + const description = ref('') + const menu = ref('') + const edit = ref(); + + watchEffect(() => { + if (store.state.config.foyer) { + title.value = store.state.config.foyer.title + description.value = store.state.config.foyer.description + menu.value = store.state.config.foyer.menu + } + }); + + const { loading, save } = useMutation(configGraph.saveConfig); + + return { title, description, menu, edit, save, loading }; + }, +}; +</script> + +<style scoped> +.pre-wrap { + white-space: pre-wrap; +} +</style> diff --git a/ui/dashboard/src/views/backstage/Admin/index.vue b/ui/dashboard/src/views/backstage/Admin/index.vue index 24b2a001..7715903b 100644 --- a/ui/dashboard/src/views/backstage/Admin/index.vue +++ b/ui/dashboard/src/views/backstage/Admin/index.vue @@ -14,17 +14,13 @@ <router-link to="/backstage/admin/player-management" exact-active-class="is-active" - > - Player Management - </router-link> + >Player Management</router-link> </li> <li> <router-link to="/backstage/admin/batch-user-creation" exact-active-class="is-active" - > - Batch User Creation - </router-link> + >Batch User Creation</router-link> </li> </ul> <p class="menu-label">System</p> @@ -33,9 +29,13 @@ <router-link to="/backstage/admin/system-configurations" exact-active-class="is-active" - > - System Configurations - </router-link> + >System Configurations</router-link> + </li> + <li> + <router-link + to="/backstage/admin/foyer-customisation" + exact-active-class="is-active" + >Foyer Customisation</router-link> </li> </ul> </aside> diff --git a/ui/dashboard/src/views/backstage/Workshop.vue b/ui/dashboard/src/views/backstage/Workshop.vue index 1bea9ed6..68c53770 100644 --- a/ui/dashboard/src/views/backstage/Workshop.vue +++ b/ui/dashboard/src/views/backstage/Workshop.vue @@ -5,7 +5,7 @@ <h1 class="title">WORKSHOP</h1> <h2 class="subtitle"> <ul> - <li>View Workshop wireframes <a class="has-text-primary" href="https://github.com/upstage-org/mobilise/issues/64" target="_blank">here</a></li> + <li>View Workshop wireframes <a class="has-text-primary" href="https://github.com/upstage-org/upstage/issues/64" target="_blank">here</a></li> </ul> </h2> </div> diff --git a/ui/studio/.env.development b/ui/studio/.env.development index 87205058..2e2c84e8 100644 --- a/ui/studio/.env.development +++ b/ui/studio/.env.development @@ -1,3 +1,3 @@ NODE_ENV=production VITE_APP_GRAPHQL_ENDPOINT=https://dev-app1.upstage.org.nz/V4.0/studio_graphql/ -VITE_APP_STATIC_ASSETS_ENDPOINT=https://dev-app1.upstage.org.nz/V4.0/static/assets/ +VITE_APP_STATIC_ASSETS_ENDPOINT=https://dev-app1.upstage.org.nz/static/assets/ diff --git a/ui/studio/.env.localhost b/ui/studio/.env.localhost index a3e4b1c7..51015c45 100644 --- a/ui/studio/.env.localhost +++ b/ui/studio/.env.localhost @@ -1,2 +1,2 @@ VITE_APP_GRAPHQL_ENDPOINT=http://localhost:5000/V4.0/studio_graphql/ -VITE_APP_STATIC_ASSETS_ENDPOINT=https://dev-app1.upstage.org.nz/V4.0/static/assets/ \ No newline at end of file +VITE_APP_STATIC_ASSETS_ENDPOINT=https://dev-app1.upstage.org.nz/static/assets/ \ No newline at end of file diff --git a/ui/studio/.env.production b/ui/studio/.env.production index 88ad4851..2685a507 100644 --- a/ui/studio/.env.production +++ b/ui/studio/.env.production @@ -1,3 +1,3 @@ NODE_ENV=production -VITE_APP_GRAPHQL_ENDPOINT=https://upstage.live/V4.0/studio_graphql/ -VITE_APP_STATIC_ASSETS_ENDPOINT=https://upstage.live/V4.0/static/assets/ +VITE_APP_GRAPHQL_ENDPOINT=/V4.0/studio_graphql/ +VITE_APP_STATIC_ASSETS_ENDPOINT=/static/assets/ diff --git a/ui/studio/.gitignore b/ui/studio/.gitignore index d451ff16..c2245bb2 100644 --- a/ui/studio/.gitignore +++ b/ui/studio/.gitignore @@ -3,3 +3,4 @@ node_modules dist dist-ssr *.local +.env \ No newline at end of file diff --git a/ui/studio/src/components/display/DName.vue b/ui/studio/src/components/display/DName.vue new file mode 100644 index 00000000..45b839cd --- /dev/null +++ b/ui/studio/src/components/display/DName.vue @@ -0,0 +1,21 @@ +<script lang="ts" setup> +import { computed } from '@vue/reactivity'; +import { PropType } from 'vue'; +import { User } from '../../models/studio'; + +const { user } = defineProps({ + user: { + type: Object as PropType<User>, + default: 0 + } +}) + +const text = computed(() => { + if (user.displayName) { + return `${user.displayName} (${user.username})` + } + return user.username +}) +</script> + +<template>{{ text }}</template> \ No newline at end of file diff --git a/ui/studio/src/components/media/MediaFilter.vue b/ui/studio/src/components/media/MediaFilter.vue index a26f6244..9b15aed5 100644 --- a/ui/studio/src/components/media/MediaFilter.vue +++ b/ui/studio/src/components/media/MediaFilter.vue @@ -9,6 +9,7 @@ import { inquiryVar } from '../../apollo'; import moment, { Moment } from 'moment'; import configs from '../../config'; import { capitalize } from '../../utils/common'; +import { permissionFragment } from '../../models/fragment'; const { result, loading } = useQuery<StudioGraph>(gql` { @@ -20,6 +21,7 @@ const { result, loading } = useQuery<StudioGraph>(gql` users { edges { node { + dbId displayName username } diff --git a/ui/studio/src/components/media/MediaForm/MediaPermissions.vue b/ui/studio/src/components/media/MediaForm/MediaPermissions.vue new file mode 100644 index 00000000..14604129 --- /dev/null +++ b/ui/studio/src/components/media/MediaForm/MediaPermissions.vue @@ -0,0 +1,155 @@ +<script setup lang="ts"> +import { useQuery } from '@vue/apollo-composable'; +import { message } from 'ant-design-vue'; +import gql from 'graphql-tag'; +import { ref, watchEffect, PropType } from 'vue'; +import { editingMediaVar } from '../../../apollo'; +import configs from '../../../config'; +import { Media, StudioGraph, User } from '../../../models/studio'; +import { useConfirmPermission } from './composable'; + +const props = defineProps({ + modelValue: { + type: Number, + default: 0, + }, + users: { + type: Array as PropType<number[]>, + default: [], + }, + media: Object as PropType<Media>, +}); +const emits = defineEmits(['update:modelValue', 'update:users']); + +const copyrightLevel = ref(); +const targetKeys = ref(); +watchEffect(() => { + copyrightLevel.value = props.modelValue; + targetKeys.value = props.users; +}) + +watchEffect(() => { + emits('update:modelValue', copyrightLevel.value); + emits('update:users', targetKeys.value); +}) + +const { result, loading } = useQuery<StudioGraph>(gql` +{ + users { + edges { + node { + dbId + displayName + username + } + } + } +} +`, null, { fetchPolicy: "cache-only" }) + +const filterOption = (keyword: string, option: any) => { + const s = keyword.toLowerCase() + return option.value.toLowerCase().includes(s) || option.label.toLowerCase().includes(s) +} + +const renderItem = (item: User) => item.displayName || item.username; + +const { mutate: confirmPermission } = useConfirmPermission(); +const confirm = (id: string, approved: boolean) => confirmPermission({ id, approved }).then(result => { + if (result?.data?.confirmPermission.success) { + message.success('Permission updated successfully!'); + editingMediaVar({ + ...editingMediaVar()!, + permissions: result.data.confirmPermission.permissions, + }) + } +}) +</script> + +<template> + <a-space direction="vertical" class="w-full mb-4"> + <a-select class="w-80" placeholder="Media copyright level" v-model:value="copyrightLevel"> + <a-select-option + v-for="level in configs.MEDIA_COPYRIGHT_LEVELS" + :key="level.value" + :value="level.value" + > + <span>{{ level.name }}</span> + <a-tooltip placement="right"> + <template #title>{{ level.description }}</template> + <QuestionCircleOutlined class="float-right" /> + </a-tooltip> + </a-select-option> + </a-select> + <template v-if="copyrightLevel === 1"> + <a-alert + show-icon + v-for="request in media?.permissions" + :key="request.id" + class="bg-white" + > + <template #icon>โœ…</template> + <template #message> + <b> + <DName :user="request.user" /> + </b> + acknowledge of using this media. + <small + class="text-gray-500" + > + <d-date :value="request.createdOn" /> + </small> + </template> + </a-alert> + </template> + <template v-else-if="copyrightLevel === 2"> + <a-alert + type="warning" + show-icon + v-for="request in media?.permissions.filter(p => !p.approved)" + :key="request.id" + > + <template #icon>๐Ÿ”‘</template> + <template #message> + <b> + <DName :user="request.user" /> + </b> + is requesting access to this media: "{{ request.note }}" + <br /> + <a-space> + <smart-button + type="primary" + :action="() => confirm(request.id, true)" + >Approve</smart-button> + <smart-button + type="danger" + :action="() => confirm(request.id, false)" + >Reject</smart-button> + </a-space> + <br /> + <small class="text-gray-500"> + <d-date :value="request.createdOn" /> + </small> + </template> + </a-alert> + <a-transfer + :locale="{ + itemUnit: 'player', + itemsUnit: 'players', + notFoundContent: 'No player available', + searchPlaceholder: 'Search player name' + }" + :list-style="{ + flex: '1', + height: '300px' + }" + :titles="[' available', ' granted']" + v-model:target-keys="targetKeys" + :data-source="result ? result.users.edges.map(e => ({ key: e.node.dbId, ...e.node })) : []" + show-search + :filter-option="filterOption" + :render="renderItem" + /> + </template> + </a-space> +</template> \ No newline at end of file diff --git a/ui/studio/src/components/media/MediaForm/RequestAcknowledge.vue b/ui/studio/src/components/media/MediaForm/RequestAcknowledge.vue new file mode 100644 index 00000000..a18ad54b --- /dev/null +++ b/ui/studio/src/components/media/MediaForm/RequestAcknowledge.vue @@ -0,0 +1,37 @@ +<script lang="ts" setup> +import { message } from 'ant-design-vue'; +import { PropType, inject } from 'vue'; +import { Media } from '../../../models/studio'; +import { useRequestPermission } from './composable'; + +const props = defineProps({ + media: { + type: Object as PropType<Media>, + required: true, + }, +}); + +const refresh = inject('refresh', () => { }); +const { mutate, loading } = useRequestPermission() +const sendAcknowledge = async () => { + const response = await mutate({ + assetId: props.media.id + }) + if (response?.data?.requestPermission.success) { + message.success('Acknowledge sent! Enjoy using ' + props.media.name + '!'); + refresh(); + } +}; +</script> + +<template> + <a-tooltip placement="left"> + <template #title> + By clicking the button, you acknowledge that you are using the media created by + <DName :user="media.owner" /> + </template> + <smart-button type="dashed" :action="sendAcknowledge"> + <CheckSquareOutlined />Acknowledge + </smart-button> + </a-tooltip> +</template> \ No newline at end of file diff --git a/ui/studio/src/components/media/MediaForm/RequestPermission.vue b/ui/studio/src/components/media/MediaForm/RequestPermission.vue new file mode 100644 index 00000000..c0278424 --- /dev/null +++ b/ui/studio/src/components/media/MediaForm/RequestPermission.vue @@ -0,0 +1,56 @@ +<script lang="ts" setup> +import { message } from 'ant-design-vue'; +import { PropType, ref, inject } from 'vue'; +import { Media } from '../../../models/studio'; +import { absolutePath } from '../../../utils/common'; +import { useRequestPermission } from './composable'; + +const props = defineProps({ + media: { + type: Object as PropType<Media>, + required: true, + }, +}); + +const visible = ref(false); +const note = ref(''); + +const refresh = inject('refresh', () => { }); +const { mutate, loading } = useRequestPermission() +const handleOk = async () => { + if (!note.value.trim()) { + message.warning('Please provide a reason!'); + return; + } + const response = await mutate({ + assetId: props.media.id, + note: note.value, + }) + if (response?.data?.requestPermission.success) { + message.success('Permission request sent'); + visible.value = false; + refresh(); + } +}; +</script> + +<template> + <a-button type="dashed" @click="visible = true"> + <SendOutlined />Request permission + </a-button> + <a-modal + v-model:visible="visible" + :confirm-loading="loading" + @ok="handleOk" + okText="Send Request" + > + You are requesting permission for + <a-avatar class="my-2" :src="absolutePath(media.src)" /> + {{ media.name }}. + <a-textarea + v-model:value="note" + :placeholder="`Please write something so that ${media.owner.username} can understand more about your purpose of using the media...`" + :auto-size="{ minRows: 2, maxRows: 5 }" + /> + </a-modal> +</template> \ No newline at end of file diff --git a/ui/studio/src/components/media/MediaForm/composable.ts b/ui/studio/src/components/media/MediaForm/composable.ts index 0c4dc9b7..a77b82e4 100644 --- a/ui/studio/src/components/media/MediaForm/composable.ts +++ b/ui/studio/src/components/media/MediaForm/composable.ts @@ -2,7 +2,8 @@ import { useMutation } from "@vue/apollo-composable"; import { message } from "ant-design-vue"; import gql from "graphql-tag"; import { ref, computed } from "vue"; -import { Media, UploadFile } from "../../../models/studio"; +import { permissionFragment } from "../../../models/fragment"; +import { CopyrightLevel, Media, Permission, UploadFile } from "../../../models/studio"; interface SaveMediaPayload { files: UploadFile[]; @@ -12,12 +13,14 @@ interface SaveMediaPayload { interface SaveMediaMutationVariables { id?: string name: string - urls?: string[] + urls: string[] mediaType: string - playerAccess?: string - copyrightLevel: 0 | 1 | 2 | 3 + copyrightLevel: CopyrightLevel stageIds: number[] - tags: string[] + userIds: number[] + tags: string[], + w: number, + h: number, } const getBase64 = (file: File) => new Promise<string>((resolve) => { @@ -39,9 +42,9 @@ export const useSaveMedia = (collectData: () => SaveMediaPayload, handleSuccess: } } `) - const { mutate } = useMutation<{ saveMedia: { asset: Media } }, SaveMediaMutationVariables>(gql` - mutation SaveMedia($id: ID, $name: String!, $urls: [String], $mediaType: String, $playerAccess: String, $copyrightLevel: Int, $stageIds: [Int], $tags: [String]) { - saveMedia(id: $id, name: $name, urls: $urls, mediaType: $mediaType, playerAccess: $playerAccess, copyrightLevel: $copyrightLevel, stageIds: $stageIds, tags: $tags) { + const { mutate } = useMutation<{ saveMedia: { asset: Media } }, { input: SaveMediaMutationVariables }>(gql` + mutation SaveMedia($input: SaveStageInput!) { + saveMedia(input: $input) { asset { id } @@ -75,7 +78,7 @@ export const useSaveMedia = (collectData: () => SaveMediaPayload, handleSuccess: } } payload.media.urls = payload.files.filter(file => file.status === 'uploaded').map(file => file.url!) - const result = await mutate(payload.media) + const result = await mutate({ input: payload.media }) const mediaId = result?.data?.saveMedia.asset.id if (mediaId) { message.success("Media saved successfully") @@ -91,4 +94,29 @@ export const useSaveMedia = (collectData: () => SaveMediaPayload, handleSuccess: const saving = computed(() => progress.value < 100) return { progress, saveMedia, saving } +} + +export const useConfirmPermission = () => { + return useMutation<{ confirmPermission: { success: boolean, message: string, permissions: Permission[] } }, { id: string, approved: boolean }>(gql` + mutation ConfirmPermission($id: ID, $approved: Boolean) { + confirmPermission(id: $id, approved: $approved) { + success + message + permissions { + ...permissionFragment + } + } + } + ${permissionFragment} + `) +} + +export const useRequestPermission = () => { + return useMutation<{ requestPermission: { success: boolean, message: string } }, { assetId: string, note?: string }>(gql` + mutation RequestPermission($assetId: ID, $note: String) { + requestPermission(assetId: $assetId, note: $note) { + success + } + } + `) } \ No newline at end of file diff --git a/ui/studio/src/components/media/MediaForm/index.vue b/ui/studio/src/components/media/MediaForm/index.vue index bc7eabac..5d99c7c5 100644 --- a/ui/studio/src/components/media/MediaForm/index.vue +++ b/ui/studio/src/components/media/MediaForm/index.vue @@ -5,11 +5,12 @@ import { ExclamationCircleOutlined } from '@ant-design/icons-vue'; import gql from 'graphql-tag'; import { ref, computed, inject, Ref, createVNode, watch } from 'vue' import { SlickList, SlickItem } from 'vue-slicksort'; -import { Media, MediaAttributes, StudioGraph, UploadFile } from '../../../models/studio'; +import { CopyrightLevel, Media, MediaAttributes, StudioGraph, UploadFile } from '../../../models/studio'; import { absolutePath, capitalize } from '../../../utils/common'; import StageAssignment from './StageAssignment.vue'; import { useSaveMedia } from './composable'; import { editingMediaVar, inquiryVar } from '../../../apollo'; +import MediaPermissions from './MediaPermissions.vue'; const files = inject<Ref<UploadFile[]>>("files") const { result: editingMediaResult } = useQuery<{ editingMedia: Media }>(gql`{ editingMedia @client }`); @@ -20,6 +21,7 @@ watch(editingMediaResult, () => { name.value = editingMedia.name; type.value = editingMedia.assetType.name; tags.value = editingMedia.tags; + copyrightLevel.value = editingMedia.copyrightLevel; const attributes = JSON.parse(editingMedia.description) as MediaAttributes; if (files?.value) { const frames = attributes.frames && attributes.frames.length ? attributes.frames : [editingMedia.src]; @@ -36,6 +38,7 @@ watch(editingMediaResult, () => { if (editingMedia.stages) { stageIds.value = editingMedia.stages.map(stage => stage.id); } + userIds.value = editingMedia.permissions.filter(permission => permission.approved).map(permission => permission.userId); } }); @@ -43,6 +46,7 @@ const name = ref('') const type = ref('avatar') const tags = ref<string[]>([]) const stageIds = ref<number[]>([]) +const userIds = ref<number[]>([]) const mediaName = computed(() => { if (name.value) { return name.value @@ -52,6 +56,7 @@ const mediaName = computed(() => { } return '' }) +const copyrightLevel = ref<CopyrightLevel>(0) const handleFrameClick = ({ event, index }: { event: any, index: number }) => { console.log(event) @@ -134,9 +139,13 @@ const { progress, saveMedia, saving } = useSaveMedia(() => { id: editingMediaResult.value?.editingMedia?.id, name: mediaName.value, mediaType: type.value, - copyrightLevel: 0, + copyrightLevel: copyrightLevel.value, stageIds: stageIds.value, + userIds: userIds.value, tags: tags.value, + w: frameSize.value.width, + h: frameSize.value.height, + urls: [], } } }, id => { @@ -168,6 +177,24 @@ const addExistingFrame = () => { }) } } + +const frameSize = ref({ width: 100, height: 100 }) +const handleImageLoad = (e: Event, index: number) => { + if (index === 0 && e.target) { + const { width, height } = e.target as HTMLImageElement + if (width > height) { + frameSize.value = { + width: 100, + height: (100 * height) / width + } + } else { + frameSize.value = { + width: (100 * width) / height, + height: 100 + } + } + } +} </script> <template> @@ -218,7 +245,12 @@ const addExistingFrame = () => { > <SlickItem v-for="(file, i) in files" :key="file.id" :index="i" style="z-index: 99999;"> <div class="my-2 px-8 text-center"> - <img show-handle :src="file.preview" class="max-w-full rounded-md max-h-24" /> + <img + show-handle + :src="file.preview" + class="max-w-full rounded-md max-h-24" + @load="handleImageLoad($event, i)" + /> </div> </SlickItem> </SlickList> @@ -238,12 +270,13 @@ const addExistingFrame = () => { <a-tab-pane key="stages" tab="Stages" class="pb-4"> <StageAssignment v-model="stageIds" /> </a-tab-pane> - <a-tab-pane key="c" tab="Permissions"> - <a-result title="UNDER CONSTRUCTION" sub-title="Please come back later!"> - <template #icon> - <BuildOutlined /> - </template> - </a-result> + <a-tab-pane key="permissions" tab="Permissions"> + <MediaPermissions + :key="editingMediaResult?.editingMedia?.id" + v-model="copyrightLevel" + v-model:users="userIds" + :media="editingMediaResult?.editingMedia" + /> </a-tab-pane> <a-tab-pane key="voice" tab="Voice"> <a-result title="UNDER CONSTRUCTION" sub-title="Please come back later!"> diff --git a/ui/studio/src/components/media/MediaTable.vue b/ui/studio/src/components/media/MediaTable.vue index 70822987..68391c86 100644 --- a/ui/studio/src/components/media/MediaTable.vue +++ b/ui/studio/src/components/media/MediaTable.vue @@ -5,9 +5,12 @@ import gql from 'graphql-tag'; import { computed, reactive, watch, provide, ref, inject, Ref } from 'vue'; import { editingMediaVar, inquiryVar } from '../../apollo'; import configs from '../../config'; +import { permissionFragment } from '../../models/fragment'; import { Media, MediaAttributes, StudioGraph, UploadFile } from '../../models/studio'; import { absolutePath } from '../../utils/common'; import MediaPreview from './MediaPreview.vue'; +import RequestPermission from './MediaForm/RequestPermission.vue'; +import RequestAcknowledge from './MediaForm/RequestAcknowledge.vue'; const files = inject<Ref<UploadFile[]>>("files") @@ -51,10 +54,16 @@ query MediaTable($cursor: String, $limit: Int, $sort: [AssetSortEnum], $name: St id } tags + copyrightLevel + permissions { + ...permissionFragment + } + privilege } } } } +${permissionFragment} `, params.value, { notifyOnNetworkStatusChange: true }) const updateQuery = (previousResult: StudioGraph, { fetchMoreResult }: any) => { @@ -99,6 +108,11 @@ const columns = [ multiple: 2, }, }, + { + title: "Copyright Level", + dataIndex: "copyrightLevel", + key: "copyrightLevel", + }, { title: "Stages", key: 'stages', @@ -275,6 +289,11 @@ const filterTag = (tag: string) => { </a-tag> <a-tag v-else>No size</a-tag> </template> + <template v-if="column.key === 'copyrightLevel'"> + <span + class="leading-4" + >{{ configs.MEDIA_COPYRIGHT_LEVELS.find(l => l.value === record.copyrightLevel)?.name }}</span> + </template> <template v-if="column.key === 'created_on'"> <d-date :value="text" /> </template> @@ -284,33 +303,53 @@ const filterTag = (tag: string) => { <DoubleRightOutlined />Append frames </a-button> </a-space> - <a-space v-else> - <a-button type="primary" @click="editMedia(record)"> - <EditOutlined />Edit - </a-button> - <a :href="absolutePath(record.src)" :download="record.name"> - <a-button> - <template #icon> - <DownloadOutlined /> - </template> - </a-button> - </a> - <a-popconfirm - title="Are you sure delete this media?" - ok-text="Yes" - cancel-text="No" - @confirm="deleteMedia(record)" - placement="left" - :ok-button-props="{ danger: true }" - loading="deleting" + <template v-else> + <a-space v-if="record.privilege === 'NONE'"> + <a-tooltip> + <template #title>You don't have permission to access this media</template> + ๐Ÿ™…โ€โ™€๏ธ๐Ÿ™…โ€โ™‚๏ธ + </a-tooltip> + </a-space> + <a-space v-else-if="record.privilege === 'REQUIRE_APPROVAL'"> + <RequestPermission v-if="record.copyrightLevel === 2" :media="record" /> + <RequestAcknowledge v-else :media="record" /> + </a-space> + <a-space + v-else-if="record.privilege === 'PENDING_APPROVAL'" + direction="vertical" + class="leading-4" > - <a-button type="dashed" danger> - <template #icon> - <DeleteOutlined /> - </template> + <b>โœ… Request sent!</b> + <small>Please wait for the media owner's approval</small> + </a-space> + <a-space v-else> + <a-button type="primary" @click="editMedia(record)"> + <EditOutlined />Edit </a-button> - </a-popconfirm> - </a-space> + <a :href="absolutePath(record.src)" :download="record.name"> + <a-button> + <template #icon> + <DownloadOutlined /> + </template> + </a-button> + </a> + <a-popconfirm + title="Are you sure delete this media?" + ok-text="Yes" + cancel-text="No" + @confirm="deleteMedia(record)" + placement="left" + :ok-button-props="{ danger: true }" + loading="deleting" + > + <a-button type="dashed" danger> + <template #icon> + <DeleteOutlined /> + </template> + </a-button> + </a-popconfirm> + </a-space> + </template> </template> </template> </a-table> diff --git a/ui/studio/src/components/media/Notifications.vue b/ui/studio/src/components/media/Notifications.vue index 04fbdd79..fc198f74 100644 --- a/ui/studio/src/components/media/Notifications.vue +++ b/ui/studio/src/components/media/Notifications.vue @@ -1,40 +1,76 @@ <script lang="ts" setup> +import { useQuery } from '@vue/apollo-composable'; +import gql from 'graphql-tag'; +import { computed } from 'vue'; +import { permissionFragment } from '../../models/fragment'; +import { StudioGraph } from '../../models/studio'; +import { absolutePath } from '../../utils/common'; +import { useConfirmPermission } from './MediaForm/composable'; -const sample = { - image: 'https://dev-app1.upstage.org.nz/V4.0/static/assets/avatar/b3c600921fac49c082770db23da06cef.png?t=1628499235', - content: `<b>Hแป“ng Phรกt</b> is requesting access to your media <b>Julius</b>: <em>"Hey Helen, can I borrow him for my upcoming stage? Thank you!"</em>`, - at: new Date() +const { result, loading, refetch } = useQuery<StudioGraph>(gql` +{ + notifications { + type + mediaUsage { + ...permissionFragment + asset { + name + src + } + } + } } +${permissionFragment}`); -const notifications = Array(10).fill(sample) +const notifications = computed(() => result.value?.notifications || []); +const { mutate: confirmPermission } = useConfirmPermission(); +const refresh = () => refetch(); </script> <template> <a-popover title="Notifications" trigger="click"> <template #content> - <a-list class="w-96 overflow-auto" style="height: 75vh"> - <a-list-item v-for="notification in notifications" key="{notification.id}" class="px-4"> - <a-list-item-meta> - <template #avatar> - <a-avatar class="my-2" :src="notification.image" /> - </template> - <template #title> - <div class="text-sm whitespace-pre-wrap mb-2" v-html="notification.content"></div> - <a-space> - <a-button type="primary">Approve</a-button> - <a-button danger>Deny</a-button> - </a-space> - </template> - <template #description> - <d-date :value="notification.at" /> - </template> - </a-list-item-meta> + <a-list class="w-96 overflow-auto" style="max-height: 75vh"> + <a-list-item v-for="notification, i in notifications" :key="i" class="px-4"> + <template v-if="notification.type === 'MEDIA_USAGE'"> + <a-list-item-meta> + <template #avatar> + <a-avatar class="my-2" :src="absolutePath(notification.mediaUsage.asset.src)" /> + </template> + <template #title> + <div class="text-sm whitespace-pre-wrap mb-2"> + <b> + <DName :user="notification.mediaUsage.user" /> + </b> + is requesting access to your media + <b>{{ notification.mediaUsage.asset.name }}</b> + : + <em>"{{ notification.mediaUsage.note }}"</em> + <br /> + </div> + <a-space> + <smart-button + type="primary" + :action="() => confirmPermission({ approved: true, id: notification.mediaUsage.id }).then(refresh)" + >Approve</smart-button> + <smart-button + type="danger" + :action="() => confirmPermission({ approved: false, id: notification.mediaUsage.id }).then(refresh)" + >Reject</smart-button> + </a-space> + </template> + <template #description> + <d-date :value="notification.mediaUsage.createdOn" /> + </template> + </a-list-item-meta> + </template> </a-list-item> </a-list> </template> <a-badge :count="notifications.length" class="relative top-1"> <a-button type="text"> - <NotificationFilled /> + <a-spin v-if="loading" /> + <NotificationFilled v-else /> </a-button> </a-badge> </a-popover> diff --git a/ui/studio/src/components/upstage/SmartButton.vue b/ui/studio/src/components/upstage/SmartButton.vue new file mode 100644 index 00000000..36b1a3e6 --- /dev/null +++ b/ui/studio/src/components/upstage/SmartButton.vue @@ -0,0 +1,27 @@ +<script lang="ts" setup> +import { message } from 'ant-design-vue'; +import { ref, PropType } from 'vue'; + +const props = defineProps({ + action: { + type: Function as PropType<(e?: any) => Promise<any>>, + required: true, + } +}); +const loading = ref(false); +const handleClick = async (e: any): Promise<void> => { + try { + loading.value = true; + await props.action(e); + loading.value = false; + } catch (error: any) { + message.error(error.message ? error.message : error); + } +}; +</script> + +<template> + <a-button v-bind="$attrs" @click="handleClick" :loading="loading"> + <slot /> + </a-button> +</template> \ No newline at end of file diff --git a/ui/studio/src/config.ts b/ui/studio/src/config.ts index 9f3f6313..d4828797 100644 --- a/ui/studio/src/config.ts +++ b/ui/studio/src/config.ts @@ -7,7 +7,33 @@ const configs = { IMAGE: '.svg,.jpg,.jpeg,.png,.gif', AUDIO: '.wav,.mpeg,.mp3,.aac,.aacp,.ogg,.webm,.flac,.m4a', VIDEO: '.mp4,.webm,.opgg,.3gp,.flv' - } + }, + MEDIA_COPYRIGHT_LEVELS: [ + { + value: 0, + name: "โœ… Copyright free", + description: + "Can be used by other players in any way without need for permission", + }, + { + value: 1, + name: "๐Ÿ‘Œ Use with acknowledgement", + description: + "Other players can use the media item as long as the owner is acknowledged", + }, + { + value: 2, + name: "๐Ÿ” Use with permission", + description: + "Other players must ask the owner for permission if they want to use the media item", + }, + { + value: 3, + name: "๐Ÿ”’๏ธ Not shared", + description: + "Only the owner can assign this media item to a stage. Once it is assigned to a stage it can be used there by players who have access to that stage.", + }, + ] } export default configs diff --git a/ui/studio/src/models/fragment.ts b/ui/studio/src/models/fragment.ts new file mode 100644 index 00000000..6e42b930 --- /dev/null +++ b/ui/studio/src/models/fragment.ts @@ -0,0 +1,17 @@ +import gql from "graphql-tag"; + +export const permissionFragment = gql` + fragment permissionFragment on AssetUsage { + id + userId + assetId + approved + seen + createdOn + note + user { + username + displayName + } + } +`; \ No newline at end of file diff --git a/ui/studio/src/models/studio.ts b/ui/studio/src/models/studio.ts index 5c4fafd8..33a99a1f 100644 --- a/ui/studio/src/models/studio.ts +++ b/ui/studio/src/models/studio.ts @@ -16,6 +16,7 @@ export interface StudioGraph { tags: Connection<Tag>; media: Connection<Media>; whoami: User; + notifications: Notification[]; } export interface PageInfo { @@ -32,6 +33,7 @@ export interface MediaType { export interface User { id: string; + dbId: number; displayName: string; username: string; roleName: string; @@ -55,6 +57,8 @@ export interface AssignedStage { url: string } +export type CopyrightLevel = 0 | 1 | 2 | 3; + export interface Media { id: string; name: string; @@ -62,10 +66,13 @@ export interface Media { description: string; createdOn: string; size: number; + copyrightLevel: CopyrightLevel; + permissions: Permission[]; assetType: MediaType; owner: User; stages: AssignedStage[]; tags: string[]; + privilege: Privilege; } export interface MediaAttributes { @@ -97,4 +104,24 @@ export interface UploadFile { preview: string; status: 'local' | 'uploaded'; url?: string; -} \ No newline at end of file +} + +export interface Permission { + id: string; + approved: boolean; + userId: number; + assetId: number; + seen: boolean; + createdOn: string; + note: null; + user: User; + asset: Media; +} + +export interface Notification { + id: string; + type: "MEDIA_USAGE"; + mediaUsage: Permission; +} + +export type Privilege = 'NONE' | 'OWNER' | 'APPROVED' | 'PENDING_APPROVAL' | 'REQUIRE_APPROVAL' \ No newline at end of file diff --git a/user/schema.py b/user/schema.py index d1e571b2..aef7c98e 100644 --- a/user/schema.py +++ b/user/schema.py @@ -44,9 +44,11 @@ class User(SQLAlchemyObjectType): db_id = graphene.Int(description="Database ID") class Meta: model = UserModel - model.db_id = model.id interfaces = (relay.Node,) connection_class = graphql_utils.CountableConnection + + def resolve_db_id(self, info): + return self.id class CreateUserInput(graphene.InputObjectType, UserAttribute): """Arguments to create a user."""