Merge screenlink-web into screenlink-desktop with Unified Project Structure#3
Merged
mangledbottles merged 120 commits intomainfrom Feb 25, 2024
Merged
Merge screenlink-web into screenlink-desktop with Unified Project Structure#3mangledbottles merged 120 commits intomainfrom
screenlink-web into screenlink-desktop with Unified Project Structure#3mangledbottles merged 120 commits intomainfrom
Conversation
This commit introduces several changes to support video upload and playback functionality. A dashboard layout, `layout.tsx`, is added to provide a consistent UI across the dashboard. A `VideoPlayer.tsx` component is introduced to handle video playback. A dynamic page, `[id]/page.tsx`, is designed to provide a unique page for each video based on its ID. The commit also introduces new API routes for handling video uploads. The `uploads/[id]/route.ts` provides functionality to get the details of a specific upload, while `uploads/route.ts` allows the creation of a new upload link. The `next.config.js` file has been updated to enable experimental serverActions, enhancing server-side capabilities. New dependencies are added to the `package.json` file to support these features and functionalities. The application's title is updated from 'Create Next App' to 'ScreenLink' in `layout.tsx` to reflect the actual application name. Lastly, the `Upload` model is added to the Prisma schema to handle the storage of upload data, including fields like `id`, `provider`, `uploadLink`, `assetId`, `uploadId`, `playbackId`, `status`, `createdAt`, and `updatedAt`. These changes contribute to a more robust and feature-rich video handling process, improving the user experience and application's functionality.
The application now includes authentication forms and pages that support sign-in and sign-up processes. The addition of the necessary packages allows for the implementation of these processes and video playback functionality. The layout has been updated to support authenticated sessions, and the unnecessary 'hello' endpoint has been removed. This update provides users with the ability to create accounts, sign in, and view videos, enhancing the user experience and functionality of the application.
…inks This change introduces Open Graph meta tags to the page metadata, enhancing link sharing on social platforms. By dynamically generating thumbnail images using the upload.playbackId, shared links will now include a visual preview, improving user engagement and shareability.
Introduced a new device registration and authentication process in the application. This feature includes a new page for device authentication, enhancing the security and user experience. Users can now register new devices with unique codes, improving account security and device management. The changes also include updates to the authentication options, ensuring that user IDs are correctly associated with sessions. Additionally, the database schema is updated to support device management and authentication, further solidifying the application's security infrastructure
The addition of `overflow-x-hidden` to the body element's class list enhances the page's layout control. This prevents horizontal scrolling, ensuring a cleaner and more consistent user experience across various screen sizes.
Refactored the `SocialButton` and `AuthForm` components in `AuthForm.tsx` to include an optional `redirect` parameter. This allows users to be redirected to a specific page after signing in or signing up. Similarly, updated `SignIn` and `SignUp` pages in `signin/page.tsx` and `signup/page.tsx` to handle the `redirect` query parameter. These changes enhance user experience by providing a seamless redirection process after authentication, ensuring users land on the intended page post-login or registration.
Updated the Prisma client to version `^5.6.0` for better database management and feature support. Added the `sonner` package, version `^1.2.0`, to implement toast notifications in the application, enhancing the user interface with interactive feedback. Also, included the `date-fns` library, version `^2.30.0`, for efficient date manipulation, improving the handling of date and time data within the application. These updates and additions enhance the application's functionality and user experience.
Introduced `DashboardHeader` component in `DashboardHeader.tsx` and integrated it into the dashboard layout (`layout.tsx`). This new header provides a tailored user interface for authenticated users, enhancing navigation and user experience on the dashboard. Additionally, refactored code in `header.tsx` and `layout.tsx` to ensure consistent use of quotes and proper formatting. The `Header` component now dynamically switches to `DashboardHeader` when a user is authenticated, improving the overall layout and functionality for different user states.
… model In `AuthOptions.ts`, the console log statement has been commented out to clean up the output and make the server logs more concise. This change helps in reducing unnecessary logging, especially in production environments. Updated the `Devices` model in the Prisma schema to include a new field `appVersion`. This addition allows for tracking the version of the application used by each device, providing valuable information for debugging, usage analytics, and feature compatibility checks. This update enhances the application's data model by adding relevant information that aids in better understanding and managing the devices connected to the user accounts.
In `hero.tsx`, replaced the inline call-to-action link with the `CtaButton` component. This change streamlines the design and codebase, ensuring consistency in call-to-action buttons across the application. The `CtaButton` component provides a centralized place to manage button styles and behavior, which simplifies future updates and maintenance. Created a new `CtaButton` component in `CtaButton.tsx`. This component centralizes the logic for rendering call-to-action buttons, handling different user states like loading and authenticated. By abstracting this functionality into a separate component, the code becomes more modular and easier to manage. Updated `tsconfig.json` to include a new path alias `@components/*`, improving the import statement's readability and maintainability. This update helps in organizing the project structure and makes the codebase more navigable.
Created a new page, `Devices`, in the dashboard section of the application. This page allows users to view and manage the devices they have logged in with. It lists each device's name, operating system, addition date, last seen date, and status (active or revoked). This feature enhances user control over their account security by allowing them to manage their devices and revoke access if needed. Implemented device revocation functionality on the `Devices` page. Users can now revoke access from a specific device directly from this page, ensuring their account remains secure and accessible only from trusted devices. This addition significantly improves the application's security and user experience, providing peace of mind and easy management of account access. Included `NoDevices` component for cases where no devices are registered. This component displays a message and a download link for users to start using the application on their devices. This addition ensures a smooth user experience by guiding users on how to start and manage their devices within the application.
Introduced a new feature, Video Library, in the Dashboard page. This enhancement enables users to view and manage their uploaded videos. The page fetches video data from the database using Prisma and displays each video with a thumbnail, title, upload date, and view count. This feature provides users with an intuitive and easy way to access and interact with their video content. Included authentication checks to ensure only logged-in users can access the Dashboard. If a user is not authenticated, they are redirected to the signin page. This addition enhances the security of the application by restricting access to sensitive user data. Integrated 'date-fns' library for formatting video upload dates. This library allows the application to display human-readable time distances, such as "2 days ago," improving the user experience by providing a clearer context of when videos were uploaded. Overall, these changes significantly enhance the user experience of the Dashboard, making it a central hub for users to manage and view their video content efficiently.
Improved the new device registration process in the Dashboard. The updated process now includes additional parameters such as `appVersion` and `deviceType`, allowing for more detailed device tracking. This enhancement provides users with better insights into their device usage and makes device management more robust. Incorporated user session verification to enhance security. The function now checks if the user is logged in before proceeding with device registration. If the user is not authenticated, they are redirected to the sign-in page. This change ensures that device registration is secure and that only authenticated users can add new devices. Implemented user existence validation before device registration. The system now verifies whether the user exists in the database before creating a new device. This check prevents potential errors or inconsistencies in the database, ensuring that the device is linked to a valid user account. Overall, these changes make the device registration process more secure, informative, and user-friendly, enhancing the overall experience in the Dashboard.
Introduced significant improvements to the video player interface in the application. The `Player.tsx` component now includes enhanced error handling and loading indicators, providing a smoother user experience. It displays custom banners for loading and error states, making it easier for users to understand the current status of the video they are attempting to view. Implemented a `VideoSkeleton` component that displays a placeholder while the video is loading or processing. This visual feedback is crucial for maintaining a good user experience, as it indicates to the user that the video is being prepared for playback. Added a `ShareUploadButton` component for sharing videos. This feature allows users to quickly and easily copy the video link to their clipboard, enhancing the video's shareability. The integration of this button into the video player interface makes it more convenient for users to share their videos with others. Developed a `ViewHeader` component to display video metadata such as the title, uploader's name, and upload time. This addition provides context and enhances the overall viewing experience by giving viewers more information about the video they are watching. These enhancements collectively improve the functionality and user interface of the video player, making it more engaging and user-friendly.
Refactored the upload retrieval API to improve error handling. Implemented a try-catch block around the Mux Video Uploads API call to handle potential errors more gracefully. This change ensures that if an error occurs while fetching an upload from Mux, it is logged and appropriately handled, preventing the application from crashing and providing more informative error messages. Modified the response structure for cases where an upload is not found in the database. Instead of returning a custom JSON response with a 404 status, the API now throws a 'not_found' error type. This approach simplifies the error handling logic and makes the API's behavior more predictable and consistent. Updated the error response for all other exceptions. The API now returns a standardized error message and a 500 status code when any unexpected error occurs. This change ensures that all errors are handled uniformly, providing a cleaner and more consistent API response pattern. These changes enhance the robustness and reliability of the API, improving the overall stability and user experience of the application.
Refined the logic for handling redirect URLs in both the sign-in and sign-up pages. Previously, the redirect URL was being converted directly to a string without checking if it was defined. This has been updated to check for the existence of the `redirect` parameter in the `searchParams` object before converting it to a string. This change ensures that if the `redirect` parameter is not provided in the query string, the default redirection will be to `/app`. This approach prevents potential issues with undefined or null values and provides a more robust and reliable redirection mechanism. The update enhances user experience by ensuring they are redirected to the appropriate page after signing in or signing up, improving the overall flow and usability of the authentication process.
Implemented a new download page that dynamically detects the user's operating system. This feature enhances the user experience by automatically suggesting the correct version of the application for the user's OS. The `getOS` function utilizes the `window.navigator.userAgent` string to identify whether the user is on macOS, Windows, or Linux, and then adjusts the download link accordingly. This update streamlines the download process for users, making it more intuitive and user-friendly. By automatically detecting the operating system, it eliminates the need for users to manually select the correct version, reducing the possibility of downloading the wrong file and improving overall user satisfaction with the application.
Significant enhancements have been made to the devices and video management pages in the dashboard. These improvements include: 1. Integration of `Devices` and `PrismaClient` in the devices page for more efficient data handling. 2. Introduction of new icons like `AiFillProject` and `AiOutlineDownload` to enhance user interface and experience. 3. Implementation of a conditional rendering strategy where different components like `NoDevices` or `DevicesTable` are rendered based on the state of the devices array. This makes the UI more responsive and user-friendly. 4. For the video library, conditional rendering of a `NoUploads` component has been added for scenarios where there are no videos uploaded by the user, improving the overall user experience by providing clear and specific feedback. 5. Modification of the download page link to dynamically direct to the appropriate download path based on the user's operating system, making the process more intuitive and efficient. 6. Styling adjustments in various components like `ShareUploadButton` and `ViewHeader` to improve visual appeal and consistency across the application. These changes greatly improve the functionality and user experience of the dashboard, making it more intuitive and efficient for managing devices and videos. The addition of dynamic elements and better error handling mechanisms ensures a smoother interaction for users.
1. Removed unnecessary `console.log` statements from the `Devices` page. This cleanup improves code readability and performance, as excessive logging can clutter the console and slow down the application. 2. Adjusted padding in the `Player` component for a more balanced layout. This change enhances the visual appeal and user experience by ensuring that elements on the page are well-aligned and aesthetically pleasing. 3. Updated the styling of the `ErrorBanner` component to use a consistent color scheme (`pink-400`). This change brings uniformity to the error messages, making them more recognizable and visually consistent throughout the application. These changes contribute to a cleaner codebase and a more user-friendly interface, ultimately improving both the developer experience and the end-user interaction with the application.
This commit introduces the installation of two key libraries: @tremor/react and shadcn These libraries are added to enhance the user interface capabilities of the project. New UI components like avatar.tsx, button.tsx, command.tsx, dialog.tsx, hover-card.tsx, input.tsx, label.tsx, popover.tsx, select.tsx, along with utility functions in utils.ts, have been added, providing more building blocks for the user interface The package.json and Tailwind config files are updated to support these additions, ensuring compatibility and streamlined integration
… association In `AuthOptions.ts`, the signIn event logic now links users with projects, updating `currentProjectId` for existing users or creating new projects for new users. This modification ensures every user is associated with a project, enhancing project management capabilities. The Prisma schema (`schema.prisma`) includes new fields in the `Upload` and `Devices` models, such as `views`, `deviceId`, and `lastUploadAt`, along with a new index in the `Device` model. These changes support the updated authentication process and improve data management and tracking within the application.
…d and API In `page.tsx`, the device revocation process is now wrapped in a try-catch block for better error handling. Also, the 'Last Seen' column in the devices table is renamed to 'Last Interaction' to more accurately represent the data. These changes improve the reliability of the device management feature and enhance the user interface. In `route.ts`, the uploads route is updated to include device code verification and project association for each upload. This ensures that each upload is correctly linked to a user's device and associated with the right project. By enhancing the upload process, the application becomes more robust in handling user-generated content, ensuring accurate tracking and management of uploads.
…tions Refect Stripe pricing and annual discount
…mponent Refactored the `DownloadMessage` component invocation to a simpler `downloadToast` function across multiple click handlers in the `Demo` component
…oard page - Changed multiline imports of `AiOutlineDownload` and `AiOutlineVideoCameraAdd` from `react-icons/ai` to a single line to enhance code readability and consistency. - Simplified the video filtering logic to only exclude videos without a `playbackId`, removing the condition that also excluded videos older than 5 minutes
- Consolidated action exports in `actions/index.ts` for simplified imports - Introduced `navigate` and `updateUploadTitle` utilities for better action management - Updated dependencies in `package.json` and enhanced aliases in `components.json` for improved project maintainability
- Introduced infinite scroll feature in `Uploads.tsx` for dynamic content loading - Added pagination support in `app/api/uploads/route.ts` for uploads - Integrated `@tanstack/react-query` for efficient data fetching and state management
- Implemented `Card`, `Form`, `Progress`, `Separator`, and `Skeleton` components for a more structured and visually appealing UI. - Enhanced form handling and validation with `Form` components, utilizing `react-hook-form`. - Introduced loading indicators with `Skeleton` and `LayoutLoader` for a better user experience during data fetching.
- Decreased default `monthlyUploads` limit from 1000 to 15 to align with new usage policies - Introduced `projectSeats` field to specify the number of allowed members per project - Added `invitationCode` to facilitate invite-only project memberships and introduced `admin` role for more granular access control
- Modified error handling in `updateTitle` action for clarity and efficiency by directly returning a structured error response. - Enhanced session retrieval in `utils` with a check for user presence, ensuring a null user is explicitly handled. - Introduced `toUpperCamelCase` and `getAvatarFallbackInitials` utility functions for string manipulation and avatar generation, aiming to improve code reusability and maintainability.
- Added `Loading`, `AuthorizeDevice`, and `RedirectToDevice` components to streamline the device authorization process. - Improved the user experience by implementing a clearer, step-by-step authorization procedure. - Refined the backend logic for device confirmation, ensuring a secure and user-friendly way to authorize new devices.
- Integrated dynamic title editing in `ViewHeader` component, allowing only the upload owner to modify the title. - Implemented `updateTitle` action and session checks to enforce permission-based editing. - Added new components `AuthorizeDevice` and `RedirectToDevice` to streamline device authorization, improving security and user experience.
- Introduced `GeneralSettings` component for editing project name and viewing project details, ensuring users can easily manage their project settings. - Created `SideBar` component for navigation within project settings, improving user navigation and experience. - Implemented form validation and submission in `GeneralSettings` using Zod and React Hook Form, enhancing data integrity and user feedback.
- Added a `Billing` component to display current usage and limits for uploads and members within a project, providing clear visibility on resource consumption. - Integrated progress bars to visually represent the usage against limits, enhancing the user's understanding of their current plan utilization. - Included a "Manage billing" button for admin and owner roles, facilitating easy access to billing management and plan adjustments.
- Implemented a new API endpoint for updating project details, enhancing the application's functionality and allowing users to modify their project information directly from the frontend. - Utilized Zod for schema validation to ensure that the incoming data for project updates is correctly formatted, improving data integrity and error handling. - Integrated Sentry for error tracking within the API endpoint, allowing for better monitoring and debugging of issues that may arise during project updates.
- Added `InviteMember` component, enabling project owners and admins to generate and share invitation links for new team members. This feature streamlines the process of expanding team collaboration within projects. - Introduced `TeamMembers` component, which displays all members associated with a specific project, including their roles and the option for role adjustments. This component enhances visibility and management of team dynamics. - Created `TeamRoles` component, allowing for dynamic role assignments among project members. This component supports maintaining clear project hierarchies and responsibilities. - Implemented loading states across member-related components using the `Skeleton` loader, ensuring a smooth user experience during data fetching.
- Introduced `AcceptInvite` component for handling project invitation acceptance, streamlining the process for users to join projects. This change makes it easier for new team members to become part of a project. - Added `NotEnoughSeats` component to inform users when a project lacks sufficient seats for new members. This component aims to provide immediate feedback to users attempting to join a full project, enhancing user experience by setting clear expectations. - Updated project join page logic to incorporate project seat availability checks before allowing a user to join, ensuring project memberships adhere to set limits. This adjustment improves the management of project resources and team sizes. - Enhanced invitation acceptance flow by automatically updating the user's current project upon joining, facilitating a smoother transition into project collaboration. This improvement streamlines user navigation and project engagement within the platform.
…nd functionality - Included user roles in DashboardStatistics to tailor the dashboard experience based on user permissions. - Modified TeamSwitcher to improve navigation with direct links to project settings and members. - Ensured UpgradeButton visibility is based on user roles, maintaining proper access control.
- Added session and project user validation in project layout to ensure that only project members can access project-specific pages. This change guarantees that each user's interaction within the project space is secure and authorized. - Removed unnecessary console log from the project members page, streamlining the code and enhancing readability. This adjustment aids in maintaining clean and efficient codebase standards.
- Fixed incorrect condition that inaccurately allowed user to attempt joining a project regardless of seat availability
- Added current project ID tracking and project switching functionality in Dashboard and TeamSwitcher These updates ensure a more dynamic and seamless user experience when interacting with different projects within the dashboard
- Introduced loading state management to disable the "Join project" button while the join operation is in progress. - This change aims to improve the user experience by providing visual feedback during the invitation acceptance process, preventing multiple submissions and clarifying the operation's ongoing status.
- Introduced README.md files for the main project, desktop, and web apps, providing a comprehensive overview, getting started instructions, and features of ScreenLink. - Enhanced visual appeal of READMEs with badges, structured content, and links to the project website. - Removed outdated content and streamlined the setup instructions to improve clarity and user guidance
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changes Summary:
screenlink-desktopandscreenlink-webinto one repo with distinct/apps/desktopand/apps/webdirectories.Impact: