4.9 KiB
Activities - Comments and Likes
Activities allow users to interact with assets in shared albums through comments and likes. This creates a social layer for collaborative photo sharing.
Activity Types
Comment
A text-based reaction attached to an album or specific asset:
- id: Unique identifier
- assetId: Optional - if set, comment is on specific asset; otherwise on album
- comment: The text content
- createdAt: Timestamp when comment was created
- user: The user who created the comment
Like
A simple thumbs-up reaction:
- id: Unique identifier
- assetId: Optional - if set, like is on specific asset; otherwise on album
- createdAt: Timestamp when like was created
- user: The user who liked
Activity Statistics
The app can fetch activity statistics for an album:
- comments: Number of comments on the album
API Endpoints
Get All Activities
Fetch all activities for an album, optionally filtered to a specific asset.
Request:
GET /activities?albumId={albumId}&assetId={assetId}
Response:
[
{
"id": "activity-uuid",
"albumId": "album-uuid",
"assetId": "asset-uuid",
"comment": "Great photo!",
"type": "comment",
"createdAt": "2024-01-15T10:30:00Z",
"user": {
"id": "user-uuid",
"name": "John Doe",
"email": "john@example.com"
}
}
]
Create Activity
Add a new comment or like.
Request:
POST /activities
{
"albumId": "album-uuid",
"assetId": "asset-uuid",
"type": "comment",
"comment": "Great photo!"
}
Response: The created activity object
Delete Activity
Remove an activity (comment or like).
Request:
DELETE /activities/{id}
Get Activity Statistics
Get comment count for an album.
Request:
GET /activities/statistics?albumId={albumId}&assetId={assetId}
Response:
{
"comments": 5
}
UI Components
Activities Page
The main activities page displays all activities for an album or asset.
Layout:
+----------------------------------+
| [Back] Album Name |
+----------------------------------+
| |
| [Avatar] User • 2 hours ago |
| Comment text here |
| |
| [Thumbs Up] User • 1 hour ago |
| |
| [Avatar] User • 30 min ago |
| Another comment |
| |
| ... (scrollable list) |
| |
+----------------------------------+
| [Avatar] [Text Input] [Like] |
+----------------------------------+
Behaviors:
- List scrolls to show all activities
- New comments auto-scroll to bottom
- Activities can be dismissed by swiping (if user has permission)
Activity Tile
Each activity is displayed as a tile:
Comment Tile:
- User avatar on the left
- Username and relative time ("2 hours ago") in header
- Comment text as subtitle
- If viewing from album page: thumbnail of asset on right (tappable)
Like Tile:
- Thumbs up icon on the left (colored with primary theme color)
- Username and relative time
- If on specific asset: shows asset thumbnail
Activity Text Field
Input area at bottom of activities page:
Components:
- Current user's avatar on the left
- Text input field in center
- Like/unlike button on the right
States:
- Enabled: User can type comments and toggle like
- Disabled: Shows message "Activities are disabled" (when album owner disables activities)
Like Button States:
- Not liked: Outline thumbs up icon
- Liked: Filled thumbs up icon in primary color
Behaviors:
- Keyboard shows automatically when page opens
- Pressing "Send" on keyboard submits comment
- Tapping outside unfocuses input
- Like button toggles current user's like on/off
Dismissible Activity
Activities can be swiped to delete if user has permission:
- Activity author can delete their own activities
- Album owner can delete any activity
Swipe Animation:
- Red background appears
- Trash icon shown
- Activity slides away when dismissed
Permission Rules
| Action | Who Can Perform |
|---|---|
| Add comment | Any album member (if activities enabled) |
| Add like | Any album member (if activities enabled) |
| Delete own activity | Activity author |
| Delete any activity | Album owner |
| Disable activities | Album owner |
Localization Strings
| Key | Usage |
|---|---|
say_something |
Placeholder text in comment input |
shared_album_activities_input_disable |
Shown when activities are disabled |
Navigation
When viewing activities from album page and tapping an activity with an asset:
- Build asset viewer route
- Navigate to full-screen asset viewer
- Show the specific asset the activity references