Skip to content

Commit

Permalink
2.1.0
Browse files Browse the repository at this point in the history
Add .mp4 support.
  • Loading branch information
chrobaktruhlik authored Mar 12, 2023
1 parent aaf5b94 commit f0703cb
Show file tree
Hide file tree
Showing 27 changed files with 769 additions and 94 deletions.
4 changes: 3 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
# Change Log

All notable changes to the `align-comments-vscode-extension` extension.
All notable changes to the `spfx-lightbox-image-gallery` extension.

## [Unreleased]
- Nothing

## [2.1.0] - 2023-03-13
- New: Support for .mp4 files.

## [2.0.0] - 2023-03-10
First public release. It retains the version numbering continuing from the original. Release 2.0.0 is first new, modified version.
Expand Down
25 changes: 13 additions & 12 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,30 @@
# SharePoint Lightbox Image Gallery Web Part
Fork from [YannickRe/spfx-lightbox-image-gallery](https://github.com/YannickRe/spfx-lightbox-image-gallery), version 1.0.0.

Fork from [YannickRe / spfx-lightbox-image-gallery](https://github.com/YannickRe/spfx-lightbox-image-gallery) version 1.0.0<br>
The web part uses the same id as the original repository making it easy to be replace.
## Summary

A SharePoint web part, created with SharePoint Framework (SPFx) that visualizes images/photos from a Document Library or Picture Library on a page. It uses the existing folder structure to create albums and puts them in the breadcrumb when opened. Clicking on an image opens a nice Lightbox effect for easy browsing the fullsized versions.

[![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
Primarily designed for presenting photos, but the web part also supports video files.

<!-- ![directory](/assets/SPFxLightRoomImageGalleryWebPart.gif) -->
[![License](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)

Feature set:
- Select SharePoint Picture/Document Library
- Navigate through images and folders
- Show breadcrumb to visualize context in the library
- Show Lightbox effect for images, using [react-lightgallery](https://github.com/VLZH/react-lightgallery)
- Select SharePoint Picture/Document Library.
- Navigate through images and folders.
- Show breadcrumb to visualize context in the library.
- Displays images using the Lightbox effect.
- Independent sorting method for directories and images in the library.
- Supported file types: .jpg, .jpeg, .png, .mp4

## Release Notes
This SharePoint web part uses modified version of react wrapper [react-lightgallery](https://github.com/VLZH/react-lightgallery) for [lightgallery.js](https://sachinchoolur.github.io/lightgallery.js). The modified react-lightgallery module is included in the repository.

![drop](https://img.shields.io/badge/Version-2.0.0-green.svg)

## Release Notes
![drop](https://img.shields.io/badge/Version-2.1.0-green.svg)

For more information see [CHANGELOG](CHANGELOG.md) file.

## Applies to

* [SharePoint Online](https://docs.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview) Modern Site

## Disclaimer
Expand Down
2 changes: 1 addition & 1 deletion config/package-solution.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"name": "SharePoint Lightbox Image Gallery",
"id": "a7d34cfc-bc45-4910-9ec5-3e2ca97a5d27",
"iconPath": "assets/slideshow96x96.png",
"version": "2.0.0.0",
"version": "2.1.0.0",
"supportedLocales": [
"en-us",
"sk-sk"
Expand Down
21 changes: 15 additions & 6 deletions fast-serve/webpack.extend.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,27 @@
// you can add your project related webpack configuration here, it will be merged using webpack-merge module
// i.e. plugins: [new webpack.Plugin()]
const webpackConfig = {

module: {
rules: [
{
exclude: /(node_modules)/,
test: /\.(js|jsx)$/i,
loader: "babel-loader",
options: { presets: ['@babel/preset-env', '@babel/preset-react'] }
}
]
}
}

// for even more fine-grained control, you can apply custom webpack settings using below function
const transformConfig = function (initialWebpackConfig) {
// transform the initial webpack config here, i.e.
// initialWebpackConfig.plugins.push(new webpack.Plugin()); etc.
// transform the initial webpack config here, i.e.
// initialWebpackConfig.plugins.push(new webpack.Plugin()); etc.

return initialWebpackConfig;
return initialWebpackConfig;
}

module.exports = {
webpackConfig,
transformConfig
webpackConfig,
transformConfig
}
2 changes: 1 addition & 1 deletion gulpfile.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ addFastServe(build);
/* end of fast-serve */

build.initialize(require('gulp'));

// build.addSuppression(/Warning - \[sass\] The local CSS class '.+?' is not camelCase and will not be type-safe/gi);

gulp.task('version-sync', function (done) { // Create gulp task: 'version-sync'
// This function updates the package-solution version analogue to the the package.json file.
Expand Down
9 changes: 6 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "spfx-lightbox-image-gallery",
"version": "2.0.0",
"version": "2.1.0",
"engines": {
"node": "^14.21.2"
},
Expand Down Expand Up @@ -29,12 +29,14 @@
"@pnp/pnpjs": "^2.15.0",
"@pnp/spfx-controls-react": "^3.12.0",
"@pnp/spfx-property-controls": "^3.11.0",
"modified-react-lightgallery": "file:src/modules/modified-react-lightgallery",
"office-ui-fabric-react": "^7.174.1",
"react": "16.13.1",
"react-dom": "16.13.1",
"react-lightgallery": "0.9.0"
"react-dom": "16.13.1"
},
"devDependencies": {
"@babel/preset-env": "^7.20.2",
"@babel/preset-react": "^7.18.6",
"@microsoft/rush-stack-compiler-3.9": "^0.5.0",
"@microsoft/sp-build-web": "1.14.0",
"@microsoft/sp-module-interfaces": "1.14.0",
Expand All @@ -43,6 +45,7 @@
"@types/react-dom": "^16.9.8",
"@types/webpack-env": "^1.16.2",
"ajv": "~5.2.2",
"babel-loader": "^8.3.0",
"gulp": "~4.0.2",
"spfx-fast-serve-helpers": "~1.14.0"
}
Expand Down
4 changes: 4 additions & 0 deletions src/modules/modified-react-lightgallery/.babelrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
{
"presets": ["@babel/preset-env", "@babel/preset-react"],
"plugins": ["@babel/plugin-proposal-class-properties"]
}
2 changes: 2 additions & 0 deletions src/modules/modified-react-lightgallery/.eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
dist
node_modules
34 changes: 34 additions & 0 deletions src/modules/modified-react-lightgallery/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
module.exports = {
env: {
browser: true,
node: true,
es6: true,
},
extends: [
"eslint:recommended",
"plugin:react/recommended",
"prettier",
"plugin:import/errors",
"plugin:import/warnings",
],
parser: "babel-eslint",
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: "module",
},
plugins: ["react", "prettier", "import"],
rules: {
indent: ["error", 4],
"linebreak-style": ["error", "unix"],
quotes: ["error", "double"],
semi: ["error", "always"],
"no-console": "off",
"no-prototype-builtins": "off",
},
globals: {
lightGallery: true,
},
};
5 changes: 5 additions & 0 deletions src/modules/modified-react-lightgallery/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules
yarn-error.log
dist
.example_dist
.cache
5 changes: 5 additions & 0 deletions src/modules/modified-react-lightgallery/.huskyrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
module.exports = {
hooks: {
"pre-commit": "yarn run eslint",
},
};
7 changes: 7 additions & 0 deletions src/modules/modified-react-lightgallery/.npmignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/node_modules
/src
/example
/.yarn-error.log
/.cache
/.example_dist
/.github
22 changes: 22 additions & 0 deletions src/modules/modified-react-lightgallery/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
MIT License

Copyright (c) 2020 VLZH, 2023 chrobaktruhlik

Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:

The above copyright notice and this permission notice shall be included
in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
52 changes: 52 additions & 0 deletions src/modules/modified-react-lightgallery/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
{
"name": "modified-react-lightgallery",
"version": "0.9.1",
"description": "Modified React wrapper for https://github.com/sachinchoolur/lightgallery.js",
"main": "src/index.js",
"author": "VLZH, modified by chrobaktruhlik",
"license": "MIT",
"dependencies": {
"browser-or-node": "^1.3.0",
"hoist-non-react-statics": "^3.3.2",
"lg-autoplay.js": "^1.2.0",
"lg-fullscreen.js": "^1.2.0",
"lg-hash.js": "^1.0.0",
"lg-pager.js": "^1.0.0",
"lg-share.js": "^1.3.0",
"lg-thumbnail.js": "^1.2.0",
"lg-video.js": "^1.2.0",
"lg-zoom.js": "^1.2.0",
"lightgallery.js": "^1.2.0",
"lodash": "^4.17.15",
"prop-types": "^15.7.2",
"uniqid": "^5.2.0"
},
"devDependencies": {
"@babel/core": "^7.10.2",
"@babel/plugin-proposal-class-properties": "^7.10.1",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.10.2",
"@babel/preset-react": "^7.10.1",
"babel-eslint": "10.1.0",
"eslint": "^7.2.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-react": "^7.20.0",
"husky": "^4.2.5",
"parcel-bundler": "^1.12.3",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"rollup": "^2.15.0",
"rollup-plugin-babel": "^4.4.0",
"rollup-plugin-commonjs": "^10.1.0",
"rollup-plugin-node-resolve": "^5.2.0",
"rollup-plugin-terser": "^6.1.0",
"rollup-plugin-uglify": "^6.0.3"
},
"peerDependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}
15 changes: 15 additions & 0 deletions src/modules/modified-react-lightgallery/readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
## About

This is modified [react-lightgallery](https://github.com/VLZH/react-lightgallery) package 0.9.0 – React wrapper for: [lightgallery.js](https://sachinchoolur.github.io/lightgallery.js)

Add new options to LightgalleryItem:
- html [String] – Used for inserting html5 videos
- poster [String] – Poster image for your video

![drop](https://img.shields.io/badge/Version-0.9.1-green.svg)
## Installation
- Copy module to your src folder
- `npm install <path>/modified-react-lightgallery --save`

## Usage
More info on [original repository page](https://github.com/VLZH/react-lightgallery).
71 changes: 71 additions & 0 deletions src/modules/modified-react-lightgallery/src/LightgalleryItem.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import React, { Component } from "react";
import PT from "prop-types";
import uniqid from "uniqid";
//
import lightgalleryContext from "./lightgalleryContext";
import { addPrefix } from "./utils";

export class LightgalleryItem extends Component {
static propTypes = {
children: PT.any,
group: PT.string.isRequired,
src: PT.string.isRequired,
thumb: PT.string,
subHtml: PT.oneOfType([PT.string, PT.object]),
downloadUrl: PT.string,
html: PT.string,
poster: PT.string,
itemClassName: PT.string
};
static contextType = lightgalleryContext;

state = {
id: uniqid(),
};

componentDidMount() {
this.register();
}

componentWillUnmount() {
this.unregister();
}

/**
* Register this slide in provider
*/
register = () => {
const { src, thumb = src, subHtml = "", downloadUrl = "", html = "", poster = "" } = this.props;
this.context.registerPhoto(this.state.id, this.props.group, {
src,
thumb,
subHtml,
downloadUrl,
html,
poster
});
};

/**
* Unregister this slide in provider
*/
unregister = () => {
this.context.unregisterPhoto(this.state.id, this.props.group);
};

/**
* Open this slide
*/
open = () => {
this.context.openGallery(this.state.id, this.props.group);
};

render() {
const { itemClassName = addPrefix("item"), children } = this.props;
return (
<div className={itemClassName} onClick={this.open}>
{children}
</div>
);
}
}
Loading

0 comments on commit f0703cb

Please sign in to comment.