@worksafevictoria/wcl7.5 1.1.0-beta.98 → 1.1.0-beta.99

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/Paragraphs/VideoGrid/index.stories.js +43 -19
  3. package/src/components/Paragraphs/VideoGrid/index.vue +2 -2
  4. package/src/components/SubComponents/VideoThumbnail/index.vue +20 -22
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@worksafevictoria/wcl7.5",
3
- "version": "1.1.0-beta.98",
3
+ "version": "1.1.0-beta.99",
4
4
  "main": "src/index.js",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/components/Paragraphs/VideoGrid/index.stories.js CHANGED
@@ -13,7 +13,7 @@ const mockData = {
13
13
  cta: {
14
14
  text: 'Click here',
15
15
  url: 'https://www.example.com',
16
- workwell: false
16
+ workwell: false,
17
17
  },
18
18
  videos: [
19
19
  {
@@ -26,7 +26,7 @@ const mockData = {
26
26
  transcript:
27
27
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
28
28
  rtl: false,
29
- fixWidth: false
29
+ fixWidth: false,
30
30
  },
31
31
  {
32
32
  mediaTitle: 'Youtube Video',
@@ -38,7 +38,7 @@ const mockData = {
38
38
  transcript:
39
39
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
40
40
  rtl: false,
41
- fixWidth: false
41
+ fixWidth: false,
42
42
  },
43
43
  {
44
44
  mediaTitle: 'Youtube Video',
@@ -50,7 +50,7 @@ const mockData = {
50
50
  transcript:
51
51
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
52
52
  rtl: false,
53
- fixWidth: false
53
+ fixWidth: false,
54
54
  },
55
55
  {
56
56
  mediaTitle: 'Youtube Video',
@@ -62,7 +62,7 @@ const mockData = {
62
62
  transcript:
63
63
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
64
64
  rtl: false,
65
- fixWidth: false
65
+ fixWidth: false,
66
66
  },
67
67
  {
68
68
  mediaTitle: 'Youtube Video',
@@ -74,7 +74,7 @@ const mockData = {
74
74
  transcript:
75
75
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
76
76
  rtl: false,
77
- fixWidth: false
77
+ fixWidth: false,
78
78
  },
79
79
  {
80
80
  mediaTitle: 'Youtube Video',
@@ -86,7 +86,7 @@ const mockData = {
86
86
  transcript:
87
87
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
88
88
  rtl: false,
89
- fixWidth: false
89
+ fixWidth: false,
90
90
  },
91
91
  {
92
92
  mediaTitle: 'Youtube Video',
@@ -98,9 +98,34 @@ const mockData = {
98
98
  transcript:
99
99
  'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
100
100
  rtl: false,
101
- fixWidth: false
102
- }
103
- ]
101
+ fixWidth: false,
102
+ },
103
+ {
104
+ // <img src="https://i.vimeocdn.com/video/1480292651-b8fe54c9f954427644325f094a8138dbe17d3437e55bb2c6e9cbb52053a690f7-d_640x360?&amp;r=pad" srcset="https://i.vimeocdn.com/video/1480292651-b8fe54c9f954427644325f094a8138dbe17d3437e55bb2c6e9cbb52053a690f7-d_960x540?&amp;r=pad 2x, https://i.vimeocdn.com/video/1480292651-b8fe54c9f954427644325f094a8138dbe17d3437e55bb2c6e9cbb52053a690f7-d_1280x720?&amp;r=pad 3x, https://i.vimeocdn.com/video/1480292651-b8fe54c9f954427644325f094a8138dbe17d3437e55bb2c6e9cbb52053a690f7-d_1920x1080?&amp;r=pad 4x" alt="WorkSafe Recovery Service Model - Tech Enabler" class="sc-1nghd6u-1 bJrnPX">
105
+ mediaTitle: 'Vimeo Video',
106
+ mediaDescription:
107
+ 'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis iaculis nulla iaculis vitae. Donec sagittis faucibus lacus eget blandit.',
108
+ id: '720522862',
109
+ provider: 'vimeo',
110
+ transcriptTitle: 'Transcript',
111
+ transcript:
112
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
113
+ rtl: false,
114
+ fixWidth: false,
115
+ },
116
+ {
117
+ mediaTitle: 'Vimeo Video',
118
+ mediaDescription:
119
+ 'Vestibulum rutrum quam vitae fringilla tincidunt. Suspendisse nec tortor urna. Ut laoreet sodales nisi, quis iaculis nulla iaculis vitae. Donec sagittis faucibus lacus eget blandit.',
120
+ id: '735637035',
121
+ provider: 'vimeo',
122
+ transcriptTitle: 'Transcript',
123
+ transcript:
124
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
125
+ rtl: false,
126
+ fixWidth: false,
127
+ },
128
+ ],
104
129
  }
105
130
 
106
131
  export default {
@@ -110,8 +135,8 @@ export default {
110
135
  argTypes: {
111
136
  titleTag: {
112
137
  control: 'select',
113
- options: ['h2', 'h3']
114
- }
138
+ options: ['h2', 'h3'],
139
+ },
115
140
  },
116
141
  args: {
117
142
  gridTitle: mockData.title,
@@ -120,19 +145,19 @@ export default {
120
145
  videoList: mockData.videos,
121
146
  rtl: mockData.rtl,
122
147
  threeColumns: mockData.threeColumns,
123
- greyBackground: mockData.greyBackground,
124
- cta: mockData.cta
125
- }
148
+ greyBackground: mockData.greyBackground,
149
+ cta: mockData.cta,
150
+ },
126
151
  }
127
152
 
128
153
  const YoutubeContent = (args, { argTypes }) => ({
129
154
  components: { VideoGrid, Container, Row, Column },
130
155
  setup() {
131
- return { args };
156
+ return { args }
132
157
  },
133
158
  data() {
134
159
  return {
135
- videos: mockData.videos
160
+ videos: mockData.videos,
136
161
  }
137
162
  },
138
163
  template: `
@@ -145,8 +170,7 @@ const YoutubeContent = (args, { argTypes }) => ({
145
170
  </column>
146
171
  </row>
147
172
  </container>
148
- `
173
+ `,
149
174
  })
150
175
 
151
176
  export const Youtube = YoutubeContent.bind({})
152
-
package/src/components/Paragraphs/VideoGrid/index.vue CHANGED
@@ -103,7 +103,7 @@ export default {
103
103
 
104
104
  &.items-2 {
105
105
  :deep(.wcl-video-thumbnail-wrapper a .video-thumbnail__image) {
106
- max-height: 304px;
106
+ // max-height: 304px;
107
107
  @include mq('mm') {
108
108
  max-height: auto;
109
109
  }
@@ -111,7 +111,7 @@ export default {
111
111
  }
112
112
  &.items-3 {
113
113
  :deep(.wcl-video-thumbnail-wrapper a .video-thumbnail__image) {
114
- max-height: 225px;
114
+ // max-height: 225px;
115
115
  @include mq('mm') {
116
116
  max-height: auto;
117
117
  }
package/src/components/SubComponents/VideoThumbnail/index.vue CHANGED
@@ -46,6 +46,7 @@ import VideoMedia from './../../Paragraphs/VideoPlayer/index.vue'
46
46
  import VideoPlay from './../../../assets/icons/video-play.svg?url'
47
47
  import IconClose from './../../../assets/icons/icon-close.svg?url'
48
48
  import { BModal } from 'bootstrap-vue-next'
49
+ import axios from 'axios'
49
50
 
50
51
  export default {
51
52
  name: 'VideoThumbnail',
@@ -72,31 +73,28 @@ export default {
72
73
  this.getVideoThumbnail()
73
74
  },
74
75
  methods: {
75
- async getVideoThumbnail() {
76
- if (this.video.provider === 'youtube') {
77
- this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/maxresdefault.jpg`
78
- if (process.env.IS_STORYBOOK !== 'TRUE') {
79
- let thumbnailAvailable = await this.$axios?.get(
80
- `${window.location.origin}/api/v2/urlExists?url=${this.videoThumbnail}`,
81
- )
82
- if (
83
- thumbnailAvailable &&
84
- thumbnailAvailable.data &&
85
- thumbnailAvailable.data.valid === false
86
- ) {
76
+ async getVideoThumbnail(url) {
77
+ try {
78
+ if (this.video.provider === 'youtube') {
79
+ this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/maxresdefault.jpg`
80
+ const response = await axios.head(this.videoThumbnail)
81
+ if (response.status === 200) {
82
+ } else {
87
83
  this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`
88
84
  }
85
+ } else if (this.video.provider === 'vimeo') {
86
+ let thumbnail = await axios.get(
87
+ `https://vimeo.com/api/v2/video/${this.video.id}.json`,
88
+ )
89
+ if (thumbnail.data) {
90
+ this.videoThumbnail = thumbnail.data[0].thumbnail_large
91
+ }
92
+ }
93
+ } catch (error) {
94
+ if (error.response && error.response.status === 404) {
95
+ this.videoThumbnail = `https://i.ytimg.com/vi/${this.video.id}/hqdefault.jpg`
96
+ } else {
89
97
  }
90
- } else if (this.video.provider === 'vimeo') {
91
- this.getVimeoThumbnail()
92
- }
93
- },
94
- async getVimeoThumbnail() {
95
- let thumbnail = await this.$axios.get(
96
- `https://vimeo.com/api/v2/video/${this.video.id}.json`,
97
- )
98
- if (thumbnail.data) {
99
- this.videoThumbnail = thumbnail.data[0].thumbnail_large
100
98
  }
101
99
  },
102
100
  },